carbon-components-angular 6.0.0-rc.4 → 6.0.0-rc.6
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 +3 -2
- package/docs/documentation/components/ComboBox.html +160 -138
- package/docs/documentation/components/ContentSwitcher.html +19 -13
- package/docs/documentation/components/ContextMenuComponent.html +35 -29
- package/docs/documentation/components/ContextMenuDividerComponent.html +11 -6
- package/docs/documentation/components/ContextMenuGroupComponent.html +25 -19
- package/docs/documentation/components/ContextMenuItemComponent.html +70 -64
- package/docs/documentation/components/DatePicker.html +106 -100
- package/docs/documentation/components/DatePickerInput.html +41 -35
- package/docs/documentation/components/Dropdown.html +118 -119
- package/docs/documentation/components/DropdownList.html +88 -97
- package/docs/documentation/js/search/search_index.js +2 -2
- package/docs/documentation/modules/TilesModule/dependencies.svg +106 -106
- package/docs/documentation/modules/TilesModule.html +106 -106
- package/docs/documentation/modules/TimePickerModule/dependencies.svg +36 -40
- package/docs/documentation/modules/TimePickerModule.html +36 -40
- package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +49 -45
- package/docs/documentation/modules/TimePickerSelectModule.html +49 -45
- package/docs/documentation/modules/ToggleModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ToggleModule.html +4 -4
- package/docs/documentation/modules/TooltipModule/dependencies.svg +29 -29
- package/docs/documentation/modules/TooltipModule.html +29 -29
- package/docs/documentation/modules/TreeviewModule/dependencies.svg +35 -35
- package/docs/documentation/modules/TreeviewModule.html +35 -35
- package/docs/documentation.json +505 -497
- package/docs/storybook/{8383.1f80f6c8.iframe.bundle.js → 8383.844bcd95.iframe.bundle.js} +1 -1
- package/docs/storybook/combobox-combobox-stories.2b92d137.iframe.bundle.js +1 -0
- package/docs/storybook/{content-switcher-content-switcher-stories.753fbf1c.iframe.bundle.js → content-switcher-content-switcher-stories.0d959b5c.iframe.bundle.js} +1 -1
- package/docs/storybook/{context-menu-context-menu-stories.6344e050.iframe.bundle.js → context-menu-context-menu-stories.d2e63fe8.iframe.bundle.js} +1 -1
- package/docs/storybook/{datepicker-datepicker-stories.5cf89dc1.iframe.bundle.js → datepicker-datepicker-stories.b4bcda9f.iframe.bundle.js} +1 -1
- package/docs/storybook/iframe.html +2 -2
- package/docs/storybook/main.07778da0.iframe.bundle.js +1 -0
- package/docs/storybook/project.json +1 -1
- package/docs/storybook/{runtime~main.de5a4ef6.iframe.bundle.js → runtime~main.ec2949a5.iframe.bundle.js} +1 -1
- package/dropdown/dropdown.component.d.ts +2 -3
- package/dropdown/list/dropdown-list.component.d.ts +2 -3
- package/esm2022/combobox/combobox.component.mjs +11 -9
- package/esm2022/content-switcher/content-switcher.component.mjs +5 -4
- package/esm2022/context-menu/context-menu-divider.component.mjs +5 -4
- package/esm2022/context-menu/context-menu-group.component.mjs +5 -4
- package/esm2022/context-menu/context-menu-item.component.mjs +4 -4
- package/esm2022/context-menu/context-menu.component.mjs +4 -4
- package/esm2022/datepicker/datepicker.component.mjs +5 -4
- package/esm2022/datepicker-input/datepicker-input.component.mjs +5 -4
- package/esm2022/dropdown/dropdown.component.mjs +1 -1
- package/esm2022/dropdown/list/dropdown-list.component.mjs +4 -6
- package/fesm2022/carbon-components-angular-combobox.mjs +10 -8
- package/fesm2022/carbon-components-angular-combobox.mjs.map +1 -1
- package/fesm2022/carbon-components-angular-content-switcher.mjs +4 -3
- package/fesm2022/carbon-components-angular-content-switcher.mjs.map +1 -1
- package/fesm2022/carbon-components-angular-context-menu.mjs +11 -9
- package/fesm2022/carbon-components-angular-context-menu.mjs.map +1 -1
- package/fesm2022/carbon-components-angular-datepicker-input.mjs +4 -3
- package/fesm2022/carbon-components-angular-datepicker-input.mjs.map +1 -1
- package/fesm2022/carbon-components-angular-datepicker.mjs +4 -3
- package/fesm2022/carbon-components-angular-datepicker.mjs.map +1 -1
- package/fesm2022/carbon-components-angular-dropdown.mjs +3 -5
- package/fesm2022/carbon-components-angular-dropdown.mjs.map +1 -1
- package/package.json +7 -7
- package/docs/storybook/combobox-combobox-stories.3bf37571.iframe.bundle.js +0 -1
- package/docs/storybook/main.3c25e34a.iframe.bundle.js +0 -1
package/docs/documentation.json
CHANGED
|
@@ -23523,8 +23523,9 @@
|
|
|
23523
23523
|
},
|
|
23524
23524
|
{
|
|
23525
23525
|
"name": "ComboBox",
|
|
23526
|
-
"id": "component-ComboBox-
|
|
23526
|
+
"id": "component-ComboBox-f881f1a5ad95a97858c0fa0a156cc1b72f68959c194f8254264bc38dc7d65ad54b012c8c42bbe080dfe80d90a9fb9dc27594836bd9038924ae945b4831cf7d76",
|
|
23527
23527
|
"file": "src/combobox/combobox.component.ts",
|
|
23528
|
+
"changeDetection": "ChangeDetectionStrategy.OnPush",
|
|
23528
23529
|
"encapsulation": [],
|
|
23529
23530
|
"entryComponents": [],
|
|
23530
23531
|
"inputs": [],
|
|
@@ -23537,7 +23538,7 @@
|
|
|
23537
23538
|
"selector": "cds-combo-box, ibm-combo-box",
|
|
23538
23539
|
"styleUrls": [],
|
|
23539
23540
|
"styles": [],
|
|
23540
|
-
"template": "<div\n\tclass=\"cds--list-box__wrapper\"\n\t[ngClass]=\"{\n\t\t'cds--list-box__wrapper--fluid': fluid,\n\t\t'cds--list-box__wrapper--fluid--invalid': fluid && invalid,\n\t\t'cds--list-box__wrapper--fluid--focus': fluid && _isFocused\n\t}\">\n\t@if (label) {\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\t[id]=\"labelId\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t}\">\n\t\t\t@if (isTemplate(label)) {\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"label\" />\n\t\t\t} @else {\n\t\t\t\t{{label}}\n\t\t\t}\n\t\t</label>\n\t}\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\t'cds--list-box--invalid': invalid\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@if (type === 'multi' && pills.length > 0) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--tag cds--tag--filter cds--tag--high-contrast\"\n\t\t\t\t\t[ngClass]=\"{'cds--tag--disabled': disabled || readonly}\">\n\t\t\t\t\t<span class=\"cds--tag__label\">{{ pills.length }}</span>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t(click)=\"clearSelected($event)\"\n\t\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t\t(keydown.enter)=\"clearSelected($event)\"\n\t\t\t\t\t\tclass=\"cds--tag__close-icon\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[title]=\"clearSelectionsTitle\"\n\t\t\t\t\t\t[disabled]=\"disabled || readonly\"\n\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\taria-hidden=\"true\">\n\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</svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t}\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(focus)=\"fluid ? handleFocus($event) : null\"\n\t\t\t\t(blur)=\"fluid ? handleFocus($event) : 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@if (invalid) {\n\t\t\t\t<svg\n\
|
|
23541
|
+
"template": "<div\n\tclass=\"cds--list-box__wrapper\"\n\t[ngClass]=\"{\n\t\t'cds--list-box__wrapper--fluid': fluid,\n\t\t'cds--list-box__wrapper--fluid--invalid': fluid && invalid,\n\t\t'cds--list-box__wrapper--fluid--focus': fluid && _isFocused\n\t}\">\n\t@if (label) {\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\t[id]=\"labelId\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t}\">\n\t\t\t@if (isTemplate(label)) {\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"label\" />\n\t\t\t} @else {\n\t\t\t\t{{label}}\n\t\t\t}\n\t\t</label>\n\t}\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\t'cds--list-box--invalid': invalid\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@if (type === 'multi' && pills.length > 0) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--tag cds--tag--filter cds--tag--high-contrast\"\n\t\t\t\t\t[ngClass]=\"{'cds--tag--disabled': disabled || readonly}\">\n\t\t\t\t\t<span class=\"cds--tag__label\">{{ pills.length }}</span>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t(click)=\"clearSelected($event)\"\n\t\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t\t(keydown.enter)=\"clearSelected($event)\"\n\t\t\t\t\t\tclass=\"cds--tag__close-icon\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[title]=\"clearSelectionsTitle\"\n\t\t\t\t\t\t[disabled]=\"disabled || readonly\"\n\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\taria-hidden=\"true\">\n\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</svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t}\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(focus)=\"fluid ? handleFocus($event) : null\"\n\t\t\t\t(blur)=\"fluid ? handleFocus($event) : 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@if (invalid) {\n\t\t\t\t<svg\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--list-box__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t} @else if (warn) {\n\t\t\t\t<svg\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t\t\t</svg>\n\t\t\t}\n\t\t\t@if (showClearButton) {\n\t\t\t\t<div\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\tclass=\"cds--list-box__selection\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\"\n\t\t\t\t\t[title]=\"clearSelectionTitle\"\n\t\t\t\t\t(keyup.enter)=\"clearInput($event)\"\n\t\t\t\t\t(click)=\"clearInput($event)\"\n\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t\t\t\t</div>\n\t\t\t}\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@if (open) {\n\t\t\t\t<ng-content />\n\t\t\t}\n\t\t</div>\n\t</div>\n\t@if (fluid) {\n\t\t<hr class=\"cds--list-box__divider\" />\n\t}\n\t@if (invalid) {\n\t\t<div class=\"cds--form-requirement\">\n\t\t\t@if (isTemplate(invalidText)) {\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"invalidText\" />\n\t\t\t} @else {\n\t\t\t\t{{ invalidText }}\n\t\t\t}\n\t\t</div>\n\t} @else if (warn) {\n\t\t<div class=\"cds--form-requirement\">\n\t\t\t@if (isTemplate(warnText)) {\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"warnText\" />\n\t\t\t} @else {\n\t\t\t\t{{warnText}}\n\t\t\t}\n\t\t</div>\n\t} @else if(helperText && !fluid) {\n\t\t<div\n\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t@if (isTemplate(helperText)) {\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"helperText\" />\n\t\t\t\t} @else {\n\t\t\t\t\t{{helperText}}\n\t\t\t\t}\n\t\t</div>\n\t}\n</div>\n\t",
|
|
23541
23542
|
"templateUrl": [],
|
|
23542
23543
|
"viewProviders": [],
|
|
23543
23544
|
"hostDirectives": [],
|
|
@@ -23549,7 +23550,7 @@
|
|
|
23549
23550
|
"deprecationMessage": "",
|
|
23550
23551
|
"rawdescription": "\n\nset to `true` to place the dropdown view inline with the component\n",
|
|
23551
23552
|
"description": "<p>set to <code>true</code> to place the dropdown view inline with the component</p>\n",
|
|
23552
|
-
"line":
|
|
23553
|
+
"line": 357,
|
|
23553
23554
|
"type": "boolean",
|
|
23554
23555
|
"decorators": []
|
|
23555
23556
|
},
|
|
@@ -23560,7 +23561,7 @@
|
|
|
23560
23561
|
"deprecationMessage": "",
|
|
23561
23562
|
"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",
|
|
23562
23563
|
"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",
|
|
23563
|
-
"line":
|
|
23564
|
+
"line": 393,
|
|
23564
23565
|
"type": "string",
|
|
23565
23566
|
"decorators": []
|
|
23566
23567
|
},
|
|
@@ -23570,7 +23571,7 @@
|
|
|
23570
23571
|
"deprecationMessage": "",
|
|
23571
23572
|
"rawdescription": "\n\nValue to display for accessibility purposes on the clear the selected item icon, when single is selected\n",
|
|
23572
23573
|
"description": "<p>Value to display for accessibility purposes on the clear the selected item icon, when single is selected</p>\n",
|
|
23573
|
-
"line":
|
|
23574
|
+
"line": 293,
|
|
23574
23575
|
"type": "string | Observable",
|
|
23575
23576
|
"decorators": []
|
|
23576
23577
|
},
|
|
@@ -23580,7 +23581,7 @@
|
|
|
23580
23581
|
"deprecationMessage": "",
|
|
23581
23582
|
"rawdescription": "\n\nValue to display for accessibility purposes to clear selections, when multi is selected\n",
|
|
23582
23583
|
"description": "<p>Value to display for accessibility purposes to clear selections, when multi is selected</p>\n",
|
|
23583
|
-
"line":
|
|
23584
|
+
"line": 273,
|
|
23584
23585
|
"type": "string | Observable",
|
|
23585
23586
|
"decorators": []
|
|
23586
23587
|
},
|
|
@@ -23590,7 +23591,7 @@
|
|
|
23590
23591
|
"deprecationMessage": "",
|
|
23591
23592
|
"rawdescription": "\n\nValue to display on the clear selections icon, when multi is selected\n",
|
|
23592
23593
|
"description": "<p>Value to display on the clear selections icon, when multi is selected</p>\n",
|
|
23593
|
-
"line":
|
|
23594
|
+
"line": 263,
|
|
23594
23595
|
"type": "string | Observable",
|
|
23595
23596
|
"decorators": []
|
|
23596
23597
|
},
|
|
@@ -23600,7 +23601,7 @@
|
|
|
23600
23601
|
"deprecationMessage": "",
|
|
23601
23602
|
"rawdescription": "\n\nValue to display on the clear the selected item icon, when single is selected\n",
|
|
23602
23603
|
"description": "<p>Value to display on the clear the selected item icon, when single is selected</p>\n",
|
|
23603
|
-
"line":
|
|
23604
|
+
"line": 283,
|
|
23604
23605
|
"type": "string | Observable",
|
|
23605
23606
|
"decorators": []
|
|
23606
23607
|
},
|
|
@@ -23610,7 +23611,7 @@
|
|
|
23610
23611
|
"deprecationMessage": "",
|
|
23611
23612
|
"rawdescription": "\n\nValue to display for accessibility purposes on the combobox control menu when opened\n",
|
|
23612
23613
|
"description": "<p>Value to display for accessibility purposes on the combobox control menu when opened</p>\n",
|
|
23613
|
-
"line":
|
|
23614
|
+
"line": 253,
|
|
23614
23615
|
"type": "string | Observable",
|
|
23615
23616
|
"decorators": []
|
|
23616
23617
|
},
|
|
@@ -23621,7 +23622,7 @@
|
|
|
23621
23622
|
"deprecationMessage": "",
|
|
23622
23623
|
"rawdescription": "\n\nSet to `true` to disable combobox.\n",
|
|
23623
23624
|
"description": "<p>Set to <code>true</code> to disable combobox.</p>\n",
|
|
23624
|
-
"line":
|
|
23625
|
+
"line": 401,
|
|
23625
23626
|
"type": "boolean",
|
|
23626
23627
|
"decorators": []
|
|
23627
23628
|
},
|
|
@@ -23631,7 +23632,7 @@
|
|
|
23631
23632
|
"deprecationMessage": "",
|
|
23632
23633
|
"rawdescription": "\n\nOverrides the automatic dropUp.\n",
|
|
23633
23634
|
"description": "<p>Overrides the automatic dropUp.</p>\n",
|
|
23634
|
-
"line":
|
|
23635
|
+
"line": 397,
|
|
23635
23636
|
"type": "boolean",
|
|
23636
23637
|
"decorators": []
|
|
23637
23638
|
},
|
|
@@ -23642,7 +23643,7 @@
|
|
|
23642
23643
|
"deprecationMessage": "",
|
|
23643
23644
|
"rawdescription": "\n\nExperimental: enable fluid state\n",
|
|
23644
23645
|
"description": "<p>Experimental: enable fluid state</p>\n",
|
|
23645
|
-
"line":
|
|
23646
|
+
"line": 409,
|
|
23646
23647
|
"type": "boolean",
|
|
23647
23648
|
"decorators": []
|
|
23648
23649
|
},
|
|
@@ -23652,7 +23653,7 @@
|
|
|
23652
23653
|
"deprecationMessage": "",
|
|
23653
23654
|
"rawdescription": "\n\nSets the optional helper text.\n",
|
|
23654
23655
|
"description": "<p>Sets the optional helper text.</p>\n",
|
|
23655
|
-
"line":
|
|
23656
|
+
"line": 353,
|
|
23656
23657
|
"type": "string | TemplateRef<any>",
|
|
23657
23658
|
"decorators": []
|
|
23658
23659
|
},
|
|
@@ -23663,7 +23664,7 @@
|
|
|
23663
23664
|
"deprecationMessage": "",
|
|
23664
23665
|
"rawdescription": "\n\nHide label while keeping it accessible for screen readers\n",
|
|
23665
23666
|
"description": "<p>Hide label while keeping it accessible for screen readers</p>\n",
|
|
23666
|
-
"line":
|
|
23667
|
+
"line": 349,
|
|
23667
23668
|
"type": "boolean",
|
|
23668
23669
|
"decorators": []
|
|
23669
23670
|
},
|
|
@@ -23672,7 +23673,7 @@
|
|
|
23672
23673
|
"defaultValue": "`combobox-${ComboBox.comboBoxCount++}`",
|
|
23673
23674
|
"deprecated": false,
|
|
23674
23675
|
"deprecationMessage": "",
|
|
23675
|
-
"line":
|
|
23676
|
+
"line": 301,
|
|
23676
23677
|
"type": "string",
|
|
23677
23678
|
"decorators": []
|
|
23678
23679
|
},
|
|
@@ -23683,7 +23684,7 @@
|
|
|
23683
23684
|
"deprecationMessage": "",
|
|
23684
23685
|
"rawdescription": "\n\nSet to `true` to show the invalid state.\n",
|
|
23685
23686
|
"description": "<p>Set to <code>true</code> to show the invalid state.</p>\n",
|
|
23686
|
-
"line":
|
|
23687
|
+
"line": 361,
|
|
23687
23688
|
"type": "boolean",
|
|
23688
23689
|
"decorators": []
|
|
23689
23690
|
},
|
|
@@ -23693,7 +23694,7 @@
|
|
|
23693
23694
|
"deprecationMessage": "",
|
|
23694
23695
|
"rawdescription": "\n\nValue displayed if combobox is in an invalid state.\n",
|
|
23695
23696
|
"description": "<p>Value displayed if combobox is in an invalid state.</p>\n",
|
|
23696
|
-
"line":
|
|
23697
|
+
"line": 365,
|
|
23697
23698
|
"type": "string | TemplateRef<any>",
|
|
23698
23699
|
"decorators": []
|
|
23699
23700
|
},
|
|
@@ -23704,7 +23705,7 @@
|
|
|
23704
23705
|
"deprecationMessage": "",
|
|
23705
23706
|
"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",
|
|
23706
23707
|
"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>",
|
|
23707
|
-
"line":
|
|
23708
|
+
"line": 329,
|
|
23708
23709
|
"type": "Array<ListItem>",
|
|
23709
23710
|
"decorators": []
|
|
23710
23711
|
},
|
|
@@ -23714,7 +23715,7 @@
|
|
|
23714
23715
|
"deprecationMessage": "",
|
|
23715
23716
|
"rawdescription": "\n\nSpecifies the property to be used as the return value to `ngModel`\n",
|
|
23716
23717
|
"description": "<p>Specifies the property to be used as the return value to <code>ngModel</code></p>\n",
|
|
23717
|
-
"line":
|
|
23718
|
+
"line": 341,
|
|
23718
23719
|
"type": "string",
|
|
23719
23720
|
"decorators": []
|
|
23720
23721
|
},
|
|
@@ -23724,7 +23725,7 @@
|
|
|
23724
23725
|
"deprecationMessage": "",
|
|
23725
23726
|
"rawdescription": "\n\nLabel for the combobox.\n",
|
|
23726
23727
|
"description": "<p>Label for the combobox.</p>\n",
|
|
23727
|
-
"line":
|
|
23728
|
+
"line": 345,
|
|
23728
23729
|
"type": "string | TemplateRef<any>",
|
|
23729
23730
|
"decorators": []
|
|
23730
23731
|
},
|
|
@@ -23733,7 +23734,7 @@
|
|
|
23733
23734
|
"defaultValue": "`combobox-label-${ComboBox.comboBoxCount++}`",
|
|
23734
23735
|
"deprecated": false,
|
|
23735
23736
|
"deprecationMessage": "",
|
|
23736
|
-
"line":
|
|
23737
|
+
"line": 302,
|
|
23737
23738
|
"type": "string",
|
|
23738
23739
|
"decorators": []
|
|
23739
23740
|
},
|
|
@@ -23744,7 +23745,7 @@
|
|
|
23744
23745
|
"deprecationMessage": "",
|
|
23745
23746
|
"rawdescription": "\n\nMax length value to limit input characters\n",
|
|
23746
23747
|
"description": "<p>Max length value to limit input characters</p>\n",
|
|
23747
|
-
"line":
|
|
23748
|
+
"line": 377,
|
|
23748
23749
|
"type": "number",
|
|
23749
23750
|
"decorators": []
|
|
23750
23751
|
},
|
|
@@ -23754,7 +23755,7 @@
|
|
|
23754
23755
|
"deprecationMessage": "",
|
|
23755
23756
|
"rawdescription": "\n\nValue to display for accessibility purposes on the combobox control menu when closed\n",
|
|
23756
23757
|
"description": "<p>Value to display for accessibility purposes on the combobox control menu when closed</p>\n",
|
|
23757
|
-
"line":
|
|
23758
|
+
"line": 243,
|
|
23758
23759
|
"type": "string | Observable",
|
|
23759
23760
|
"decorators": []
|
|
23760
23761
|
},
|
|
@@ -23764,7 +23765,7 @@
|
|
|
23764
23765
|
"deprecationMessage": "",
|
|
23765
23766
|
"rawdescription": "\n\nText to show when nothing is selected.\n",
|
|
23766
23767
|
"description": "<p>Text to show when nothing is selected.</p>\n",
|
|
23767
|
-
"line":
|
|
23768
|
+
"line": 233,
|
|
23768
23769
|
"type": "string | Observable",
|
|
23769
23770
|
"decorators": []
|
|
23770
23771
|
},
|
|
@@ -23775,7 +23776,7 @@
|
|
|
23775
23776
|
"deprecationMessage": "",
|
|
23776
23777
|
"rawdescription": "\n\nSet to `true` for readonly state.\n",
|
|
23777
23778
|
"description": "<p>Set to <code>true</code> for readonly state.</p>\n",
|
|
23778
|
-
"line":
|
|
23779
|
+
"line": 405,
|
|
23779
23780
|
"type": "boolean",
|
|
23780
23781
|
"decorators": []
|
|
23781
23782
|
},
|
|
@@ -23786,7 +23787,7 @@
|
|
|
23786
23787
|
"deprecationMessage": "",
|
|
23787
23788
|
"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",
|
|
23788
23789
|
"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",
|
|
23789
|
-
"line":
|
|
23790
|
+
"line": 388,
|
|
23790
23791
|
"type": "\"top\" | \"fixed\" | \"top-after-reopen\"",
|
|
23791
23792
|
"decorators": []
|
|
23792
23793
|
},
|
|
@@ -23797,7 +23798,7 @@
|
|
|
23797
23798
|
"deprecationMessage": "",
|
|
23798
23799
|
"rawdescription": "\n\nCombo box render size.\n",
|
|
23799
23800
|
"description": "<p>Combo box render size.</p>\n",
|
|
23800
|
-
"line":
|
|
23801
|
+
"line": 337,
|
|
23801
23802
|
"type": "\"sm\" | \"md\" | \"lg\"",
|
|
23802
23803
|
"decorators": []
|
|
23803
23804
|
},
|
|
@@ -23808,16 +23809,16 @@
|
|
|
23808
23809
|
"deprecationMessage": "since v5 - Use `cdsLayer` directive instead",
|
|
23809
23810
|
"jsdoctags": [
|
|
23810
23811
|
{
|
|
23811
|
-
"pos":
|
|
23812
|
-
"end":
|
|
23812
|
+
"pos": 10273,
|
|
23813
|
+
"end": 10331,
|
|
23813
23814
|
"kind": 331,
|
|
23814
23815
|
"id": 0,
|
|
23815
23816
|
"flags": 16842752,
|
|
23816
23817
|
"modifierFlagsCache": 0,
|
|
23817
23818
|
"transformFlags": 0,
|
|
23818
23819
|
"tagName": {
|
|
23819
|
-
"pos":
|
|
23820
|
-
"end":
|
|
23820
|
+
"pos": 10274,
|
|
23821
|
+
"end": 10284,
|
|
23821
23822
|
"kind": 80,
|
|
23822
23823
|
"id": 0,
|
|
23823
23824
|
"flags": 16842752,
|
|
@@ -23827,7 +23828,7 @@
|
|
|
23827
23828
|
"comment": "<p>since v5 - Use <code>cdsLayer</code> directive instead</p>\n"
|
|
23828
23829
|
}
|
|
23829
23830
|
],
|
|
23830
|
-
"line":
|
|
23831
|
+
"line": 381,
|
|
23831
23832
|
"type": "\"light\" | \"dark\"",
|
|
23832
23833
|
"decorators": []
|
|
23833
23834
|
},
|
|
@@ -23838,7 +23839,7 @@
|
|
|
23838
23839
|
"deprecationMessage": "",
|
|
23839
23840
|
"rawdescription": "\n\nCombo box type (supporting single or multi selection of items).\n",
|
|
23840
23841
|
"description": "<p>Combo box type (supporting single or multi selection of items).</p>\n",
|
|
23841
|
-
"line":
|
|
23842
|
+
"line": 333,
|
|
23842
23843
|
"type": "\"single\" | \"multi\"",
|
|
23843
23844
|
"decorators": []
|
|
23844
23845
|
},
|
|
@@ -23849,7 +23850,7 @@
|
|
|
23849
23850
|
"deprecationMessage": "",
|
|
23850
23851
|
"rawdescription": "\n\nSet to `true` to show a warning (contents set by warnText)\n",
|
|
23851
23852
|
"description": "<p>Set to <code>true</code> to show a warning (contents set by warnText)</p>\n",
|
|
23852
|
-
"line":
|
|
23853
|
+
"line": 369,
|
|
23853
23854
|
"type": "boolean",
|
|
23854
23855
|
"decorators": []
|
|
23855
23856
|
},
|
|
@@ -23859,7 +23860,7 @@
|
|
|
23859
23860
|
"deprecationMessage": "",
|
|
23860
23861
|
"rawdescription": "\n\nSets the warning text\n",
|
|
23861
23862
|
"description": "<p>Sets the warning text</p>\n",
|
|
23862
|
-
"line":
|
|
23863
|
+
"line": 373,
|
|
23863
23864
|
"type": "string | TemplateRef<any>",
|
|
23864
23865
|
"decorators": []
|
|
23865
23866
|
}
|
|
@@ -23872,7 +23873,7 @@
|
|
|
23872
23873
|
"deprecationMessage": "",
|
|
23873
23874
|
"rawdescription": "\nEmits an event when the clear button is clicked.",
|
|
23874
23875
|
"description": "<p>Emits an event when the clear button is clicked.</p>\n",
|
|
23875
|
-
"line":
|
|
23876
|
+
"line": 461,
|
|
23876
23877
|
"type": "EventEmitter"
|
|
23877
23878
|
},
|
|
23878
23879
|
{
|
|
@@ -23882,7 +23883,7 @@
|
|
|
23882
23883
|
"deprecationMessage": "",
|
|
23883
23884
|
"rawdescription": "\nEmits an empty event when the menu is closed",
|
|
23884
23885
|
"description": "<p>Emits an empty event when the menu is closed</p>\n",
|
|
23885
|
-
"line":
|
|
23886
|
+
"line": 457,
|
|
23886
23887
|
"type": "EventEmitter"
|
|
23887
23888
|
},
|
|
23888
23889
|
{
|
|
@@ -23892,7 +23893,7 @@
|
|
|
23892
23893
|
"deprecationMessage": "",
|
|
23893
23894
|
"rawdescription": "\nEmits the search string from the input",
|
|
23894
23895
|
"description": "<p>Emits the search string from the input</p>\n",
|
|
23895
|
-
"line":
|
|
23896
|
+
"line": 459,
|
|
23896
23897
|
"type": "EventEmitter"
|
|
23897
23898
|
},
|
|
23898
23899
|
{
|
|
@@ -23902,7 +23903,7 @@
|
|
|
23902
23903
|
"deprecationMessage": "",
|
|
23903
23904
|
"rawdescription": "\n\nEmits a ListItem\n\nExample:\n```javascript\n{\n\t\tcontent: \"one\",\n\t\tselected: true\n}\n```\n",
|
|
23904
23905
|
"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>",
|
|
23905
|
-
"line":
|
|
23906
|
+
"line": 421,
|
|
23906
23907
|
"type": "EventEmitter"
|
|
23907
23908
|
},
|
|
23908
23909
|
{
|
|
@@ -23912,7 +23913,7 @@
|
|
|
23912
23913
|
"deprecationMessage": "",
|
|
23913
23914
|
"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",
|
|
23914
23915
|
"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>",
|
|
23915
|
-
"line":
|
|
23916
|
+
"line": 448,
|
|
23916
23917
|
"type": "EventEmitter"
|
|
23917
23918
|
}
|
|
23918
23919
|
],
|
|
@@ -23926,7 +23927,7 @@
|
|
|
23926
23927
|
"indexKey": "",
|
|
23927
23928
|
"optional": false,
|
|
23928
23929
|
"description": "<p>controls whether the <code>drop-up</code> class is applied</p>\n",
|
|
23929
|
-
"line":
|
|
23930
|
+
"line": 483,
|
|
23930
23931
|
"rawdescription": "\n\ncontrols whether the `drop-up` class is applied\n"
|
|
23931
23932
|
},
|
|
23932
23933
|
{
|
|
@@ -23938,7 +23939,7 @@
|
|
|
23938
23939
|
"indexKey": "",
|
|
23939
23940
|
"optional": false,
|
|
23940
23941
|
"description": "",
|
|
23941
|
-
"line":
|
|
23942
|
+
"line": 300,
|
|
23942
23943
|
"modifierKind": [
|
|
23943
23944
|
126
|
|
23944
23945
|
]
|
|
@@ -23951,7 +23952,7 @@
|
|
|
23951
23952
|
"indexKey": "",
|
|
23952
23953
|
"optional": false,
|
|
23953
23954
|
"description": "",
|
|
23954
|
-
"line":
|
|
23955
|
+
"line": 464,
|
|
23955
23956
|
"decorators": [
|
|
23956
23957
|
{
|
|
23957
23958
|
"name": "ViewChild",
|
|
@@ -23971,7 +23972,7 @@
|
|
|
23971
23972
|
"indexKey": "",
|
|
23972
23973
|
"optional": false,
|
|
23973
23974
|
"description": "",
|
|
23974
|
-
"line":
|
|
23975
|
+
"line": 467,
|
|
23975
23976
|
"decorators": [
|
|
23976
23977
|
{
|
|
23977
23978
|
"name": "HostBinding",
|
|
@@ -23990,7 +23991,7 @@
|
|
|
23990
23991
|
"indexKey": "",
|
|
23991
23992
|
"optional": false,
|
|
23992
23993
|
"description": "",
|
|
23993
|
-
"line":
|
|
23994
|
+
"line": 465,
|
|
23994
23995
|
"decorators": [
|
|
23995
23996
|
{
|
|
23996
23997
|
"name": "ViewChild",
|
|
@@ -24010,7 +24011,7 @@
|
|
|
24010
24011
|
"indexKey": "",
|
|
24011
24012
|
"optional": false,
|
|
24012
24013
|
"description": "",
|
|
24013
|
-
"line":
|
|
24014
|
+
"line": 479
|
|
24014
24015
|
},
|
|
24015
24016
|
{
|
|
24016
24017
|
"name": "listbox",
|
|
@@ -24020,7 +24021,7 @@
|
|
|
24020
24021
|
"indexKey": "",
|
|
24021
24022
|
"optional": false,
|
|
24022
24023
|
"description": "",
|
|
24023
|
-
"line":
|
|
24024
|
+
"line": 466,
|
|
24024
24025
|
"decorators": [
|
|
24025
24026
|
{
|
|
24026
24027
|
"name": "ViewChild",
|
|
@@ -24040,7 +24041,7 @@
|
|
|
24040
24041
|
"indexKey": "",
|
|
24041
24042
|
"optional": false,
|
|
24042
24043
|
"description": "",
|
|
24043
|
-
"line":
|
|
24044
|
+
"line": 469,
|
|
24044
24045
|
"modifierKind": [
|
|
24045
24046
|
125
|
|
24046
24047
|
]
|
|
@@ -24054,7 +24055,7 @@
|
|
|
24054
24055
|
"indexKey": "",
|
|
24055
24056
|
"optional": false,
|
|
24056
24057
|
"description": "",
|
|
24057
|
-
"line":
|
|
24058
|
+
"line": 478
|
|
24058
24059
|
},
|
|
24059
24060
|
{
|
|
24060
24061
|
"name": "pills",
|
|
@@ -24065,7 +24066,7 @@
|
|
|
24065
24066
|
"indexKey": "",
|
|
24066
24067
|
"optional": false,
|
|
24067
24068
|
"description": "<p>Selected items for multi-select combo-boxes.</p>\n",
|
|
24068
|
-
"line":
|
|
24069
|
+
"line": 474,
|
|
24069
24070
|
"rawdescription": "\nSelected items for multi-select combo-boxes.",
|
|
24070
24071
|
"modifierKind": [
|
|
24071
24072
|
125
|
|
@@ -24080,7 +24081,7 @@
|
|
|
24080
24081
|
"indexKey": "",
|
|
24081
24082
|
"optional": false,
|
|
24082
24083
|
"description": "<p>used to update the displayValue</p>\n",
|
|
24083
|
-
"line":
|
|
24084
|
+
"line": 476,
|
|
24084
24085
|
"rawdescription": "\nused to update the displayValue",
|
|
24085
24086
|
"modifierKind": [
|
|
24086
24087
|
125
|
|
@@ -24095,7 +24096,7 @@
|
|
|
24095
24096
|
"indexKey": "",
|
|
24096
24097
|
"optional": false,
|
|
24097
24098
|
"description": "",
|
|
24098
|
-
"line":
|
|
24099
|
+
"line": 471,
|
|
24099
24100
|
"modifierKind": [
|
|
24100
24101
|
125
|
|
24101
24102
|
]
|
|
@@ -24108,7 +24109,7 @@
|
|
|
24108
24109
|
"indexKey": "",
|
|
24109
24110
|
"optional": false,
|
|
24110
24111
|
"description": "<p>ContentChild reference to the instantiated dropdown list</p>\n",
|
|
24111
|
-
"line":
|
|
24112
|
+
"line": 463,
|
|
24112
24113
|
"rawdescription": "\nContentChild reference to the instantiated dropdown list",
|
|
24113
24114
|
"decorators": [
|
|
24114
24115
|
{
|
|
@@ -24128,7 +24129,7 @@
|
|
|
24128
24129
|
"optional": false,
|
|
24129
24130
|
"returnType": "void",
|
|
24130
24131
|
"typeParameters": [],
|
|
24131
|
-
"line":
|
|
24132
|
+
"line": 884,
|
|
24132
24133
|
"deprecated": false,
|
|
24133
24134
|
"deprecationMessage": "",
|
|
24134
24135
|
"rawdescription": "\n\nCreates the `Dropdown` list as an element that is appended to the DOM body.\n",
|
|
@@ -24140,7 +24141,7 @@
|
|
|
24140
24141
|
"optional": false,
|
|
24141
24142
|
"returnType": "void",
|
|
24142
24143
|
"typeParameters": [],
|
|
24143
|
-
"line":
|
|
24144
|
+
"line": 895,
|
|
24144
24145
|
"deprecated": false,
|
|
24145
24146
|
"deprecationMessage": "",
|
|
24146
24147
|
"rawdescription": "\n\nCreates the `Dropdown` list appending it to the dropdown parent object instead of the body.\n",
|
|
@@ -24159,7 +24160,7 @@
|
|
|
24159
24160
|
"optional": false,
|
|
24160
24161
|
"returnType": "void",
|
|
24161
24162
|
"typeParameters": [],
|
|
24162
|
-
"line":
|
|
24163
|
+
"line": 864,
|
|
24163
24164
|
"deprecated": false,
|
|
24164
24165
|
"deprecationMessage": "",
|
|
24165
24166
|
"rawdescription": "\n\nHandles keyboard events so users are controlling the `Dropdown` instead of unintentionally controlling outside elements.\n",
|
|
@@ -24182,7 +24183,7 @@
|
|
|
24182
24183
|
"optional": false,
|
|
24183
24184
|
"returnType": "void",
|
|
24184
24185
|
"typeParameters": [],
|
|
24185
|
-
"line":
|
|
24186
|
+
"line": 646,
|
|
24186
24187
|
"deprecated": false,
|
|
24187
24188
|
"deprecationMessage": ""
|
|
24188
24189
|
},
|
|
@@ -24199,7 +24200,7 @@
|
|
|
24199
24200
|
"optional": false,
|
|
24200
24201
|
"returnType": "void",
|
|
24201
24202
|
"typeParameters": [],
|
|
24202
|
-
"line":
|
|
24203
|
+
"line": 924,
|
|
24203
24204
|
"deprecated": false,
|
|
24204
24205
|
"deprecationMessage": "",
|
|
24205
24206
|
"rawdescription": "\n\nHandles clicks outside of the `Dropdown` list.\n",
|
|
@@ -24222,7 +24223,7 @@
|
|
|
24222
24223
|
"optional": false,
|
|
24223
24224
|
"returnType": "any",
|
|
24224
24225
|
"typeParameters": [],
|
|
24225
|
-
"line":
|
|
24226
|
+
"line": 904,
|
|
24226
24227
|
"deprecated": false,
|
|
24227
24228
|
"deprecationMessage": "",
|
|
24228
24229
|
"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",
|
|
@@ -24241,7 +24242,7 @@
|
|
|
24241
24242
|
"optional": false,
|
|
24242
24243
|
"returnType": "void",
|
|
24243
24244
|
"typeParameters": [],
|
|
24244
|
-
"line":
|
|
24245
|
+
"line": 836,
|
|
24245
24246
|
"deprecated": false,
|
|
24246
24247
|
"deprecationMessage": "",
|
|
24247
24248
|
"jsdoctags": [
|
|
@@ -24269,7 +24270,7 @@
|
|
|
24269
24270
|
"optional": false,
|
|
24270
24271
|
"returnType": "void",
|
|
24271
24272
|
"typeParameters": [],
|
|
24272
|
-
"line":
|
|
24273
|
+
"line": 712,
|
|
24273
24274
|
"deprecated": false,
|
|
24274
24275
|
"deprecationMessage": "",
|
|
24275
24276
|
"modifierKind": [
|
|
@@ -24293,7 +24294,7 @@
|
|
|
24293
24294
|
"optional": false,
|
|
24294
24295
|
"returnType": "void",
|
|
24295
24296
|
"typeParameters": [],
|
|
24296
|
-
"line":
|
|
24297
|
+
"line": 740,
|
|
24297
24298
|
"deprecated": false,
|
|
24298
24299
|
"deprecationMessage": "",
|
|
24299
24300
|
"rawdescription": "\n\nCloses the dropdown and emits the close event.\n",
|
|
@@ -24315,7 +24316,7 @@
|
|
|
24315
24316
|
"optional": false,
|
|
24316
24317
|
"returnType": "void",
|
|
24317
24318
|
"typeParameters": [],
|
|
24318
|
-
"line":
|
|
24319
|
+
"line": 933,
|
|
24319
24320
|
"deprecated": false,
|
|
24320
24321
|
"deprecationMessage": "",
|
|
24321
24322
|
"jsdoctags": [
|
|
@@ -24343,7 +24344,7 @@
|
|
|
24343
24344
|
"optional": false,
|
|
24344
24345
|
"returnType": "void",
|
|
24345
24346
|
"typeParameters": [],
|
|
24346
|
-
"line":
|
|
24347
|
+
"line": 621,
|
|
24347
24348
|
"deprecated": false,
|
|
24348
24349
|
"deprecationMessage": "",
|
|
24349
24350
|
"rawdescription": "\n\nHandles `Escape/Tab` key closing the dropdown, and arrow up/down focus to/from the dropdown list.\n",
|
|
@@ -24382,7 +24383,7 @@
|
|
|
24382
24383
|
"optional": false,
|
|
24383
24384
|
"returnType": "boolean",
|
|
24384
24385
|
"typeParameters": [],
|
|
24385
|
-
"line":
|
|
24386
|
+
"line": 857,
|
|
24386
24387
|
"deprecated": false,
|
|
24387
24388
|
"deprecationMessage": "",
|
|
24388
24389
|
"modifierKind": [
|
|
@@ -24406,7 +24407,7 @@
|
|
|
24406
24407
|
"optional": false,
|
|
24407
24408
|
"returnType": "void",
|
|
24408
24409
|
"typeParameters": [],
|
|
24409
|
-
"line":
|
|
24410
|
+
"line": 683,
|
|
24410
24411
|
"deprecated": false,
|
|
24411
24412
|
"deprecationMessage": ""
|
|
24412
24413
|
},
|
|
@@ -24430,7 +24431,7 @@
|
|
|
24430
24431
|
"optional": false,
|
|
24431
24432
|
"returnType": "void",
|
|
24432
24433
|
"typeParameters": [],
|
|
24433
|
-
"line":
|
|
24434
|
+
"line": 792,
|
|
24434
24435
|
"deprecated": false,
|
|
24435
24436
|
"deprecationMessage": "",
|
|
24436
24437
|
"rawdescription": "\n\nSets the list group filter, and manages single select item selection.\n",
|
|
@@ -24473,7 +24474,7 @@
|
|
|
24473
24474
|
"optional": false,
|
|
24474
24475
|
"returnType": "void",
|
|
24475
24476
|
"typeParameters": [],
|
|
24476
|
-
"line":
|
|
24477
|
+
"line": 825,
|
|
24477
24478
|
"deprecated": false,
|
|
24478
24479
|
"deprecationMessage": "",
|
|
24479
24480
|
"rawdescription": "\n\nIntended to be used to add items to the list.\n",
|
|
@@ -24499,7 +24500,7 @@
|
|
|
24499
24500
|
"optional": false,
|
|
24500
24501
|
"returnType": "void",
|
|
24501
24502
|
"typeParameters": [],
|
|
24502
|
-
"line":
|
|
24503
|
+
"line": 756,
|
|
24503
24504
|
"deprecated": false,
|
|
24504
24505
|
"deprecationMessage": "",
|
|
24505
24506
|
"rawdescription": "\n\nOpens the dropdown.\n",
|
|
@@ -24521,7 +24522,7 @@
|
|
|
24521
24522
|
"optional": false,
|
|
24522
24523
|
"returnType": "void",
|
|
24523
24524
|
"typeParameters": [],
|
|
24524
|
-
"line":
|
|
24525
|
+
"line": 687,
|
|
24525
24526
|
"deprecated": false,
|
|
24526
24527
|
"deprecationMessage": "",
|
|
24527
24528
|
"jsdoctags": [
|
|
@@ -24549,7 +24550,7 @@
|
|
|
24549
24550
|
"optional": false,
|
|
24550
24551
|
"returnType": "void",
|
|
24551
24552
|
"typeParameters": [],
|
|
24552
|
-
"line":
|
|
24553
|
+
"line": 691,
|
|
24553
24554
|
"deprecated": false,
|
|
24554
24555
|
"deprecationMessage": "",
|
|
24555
24556
|
"jsdoctags": [
|
|
@@ -24577,7 +24578,7 @@
|
|
|
24577
24578
|
"optional": false,
|
|
24578
24579
|
"returnType": "void",
|
|
24579
24580
|
"typeParameters": [],
|
|
24580
|
-
"line":
|
|
24581
|
+
"line": 700,
|
|
24581
24582
|
"deprecated": false,
|
|
24582
24583
|
"deprecationMessage": "",
|
|
24583
24584
|
"rawdescription": "\n\n`ControlValueAccessor` method to programmatically disable the combobox.\n\nex: `this.formGroup.get(\"myCoolCombobox\").disable();`\n",
|
|
@@ -24600,7 +24601,7 @@
|
|
|
24600
24601
|
"optional": false,
|
|
24601
24602
|
"returnType": "void",
|
|
24602
24603
|
"typeParameters": [],
|
|
24603
|
-
"line":
|
|
24604
|
+
"line": 781,
|
|
24604
24605
|
"deprecated": false,
|
|
24605
24606
|
"deprecationMessage": "",
|
|
24606
24607
|
"rawdescription": "\n\nToggles the dropdown.\n",
|
|
@@ -24615,7 +24616,7 @@
|
|
|
24615
24616
|
"optional": false,
|
|
24616
24617
|
"returnType": "void",
|
|
24617
24618
|
"typeParameters": [],
|
|
24618
|
-
"line":
|
|
24619
|
+
"line": 707,
|
|
24619
24620
|
"deprecated": false,
|
|
24620
24621
|
"deprecationMessage": "",
|
|
24621
24622
|
"rawdescription": "\n\nCalled by `n-pill-input` when the selected pills have changed.\n",
|
|
@@ -24637,7 +24638,7 @@
|
|
|
24637
24638
|
"optional": false,
|
|
24638
24639
|
"returnType": "void",
|
|
24639
24640
|
"typeParameters": [],
|
|
24640
|
-
"line":
|
|
24641
|
+
"line": 651,
|
|
24641
24642
|
"deprecated": false,
|
|
24642
24643
|
"deprecationMessage": "",
|
|
24643
24644
|
"jsdoctags": [
|
|
@@ -24661,7 +24662,7 @@
|
|
|
24661
24662
|
"defaultValue": "true",
|
|
24662
24663
|
"deprecated": false,
|
|
24663
24664
|
"deprecationMessage": "",
|
|
24664
|
-
"line":
|
|
24665
|
+
"line": 467,
|
|
24665
24666
|
"type": "boolean",
|
|
24666
24667
|
"decorators": []
|
|
24667
24668
|
}
|
|
@@ -24684,7 +24685,7 @@
|
|
|
24684
24685
|
"deprecationMessage": "",
|
|
24685
24686
|
"rawdescription": "\n\nHandles `Escape/Tab` key closing the dropdown, and arrow up/down focus to/from the dropdown list.\n",
|
|
24686
24687
|
"description": "<p>Handles <code>Escape/Tab</code> key closing the dropdown, and arrow up/down focus to/from the dropdown list.</p>\n",
|
|
24687
|
-
"line":
|
|
24688
|
+
"line": 621
|
|
24688
24689
|
}
|
|
24689
24690
|
],
|
|
24690
24691
|
"standalone": false,
|
|
@@ -24692,7 +24693,7 @@
|
|
|
24692
24693
|
"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",
|
|
24693
24694
|
"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",
|
|
24694
24695
|
"type": "component",
|
|
24695
|
-
"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\n\t\t\tclass=\"cds--list-box__wrapper\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--list-box__wrapper--fluid': fluid,\n\t\t\t\t'cds--list-box__wrapper--fluid--invalid': fluid && invalid,\n\t\t\t\t'cds--list-box__wrapper--fluid--focus': fluid && _isFocused\n\t\t\t}\">\n\t\t\t@if (label) {\n\t\t\t\t<label\n\t\t\t\t\t[for]=\"id\"\n\t\t\t\t\t[id]=\"labelId\"\n\t\t\t\t\tclass=\"cds--label\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t\t\t}\">\n\t\t\t\t\t@if (isTemplate(label)) {\n\t\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"label\" />\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t{{label}}\n\t\t\t\t\t}\n\t\t\t\t</label>\n\t\t\t}\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\t'cds--list-box--invalid': invalid\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@if (type === 'multi' && pills.length > 0) {\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"cds--tag cds--tag--filter cds--tag--high-contrast\"\n\t\t\t\t\t\t\t[ngClass]=\"{'cds--tag--disabled': disabled || readonly}\">\n\t\t\t\t\t\t\t<span class=\"cds--tag__label\">{{ pills.length }}</span>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t(click)=\"clearSelected($event)\"\n\t\t\t\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t\t\t\t(keydown.enter)=\"clearSelected($event)\"\n\t\t\t\t\t\t\t\tclass=\"cds--tag__close-icon\"\n\t\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t\t[title]=\"clearSelectionsTitle\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled || readonly\"\n\t\t\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\">\n\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\">\n\t\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\t</svg>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\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(focus)=\"fluid ? handleFocus($event) : null\"\n\t\t\t\t\t\t(blur)=\"fluid ? handleFocus($event) : 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@if (invalid) {\n\t\t\t\t\t\t<svg\n\n\t\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon\">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t} @else if (warn) {\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t}\n\t\t\t\t\t@if (showClearButton) {\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\tclass=\"cds--list-box__selection\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\"\n\t\t\t\t\t\t\t[title]=\"clearSelectionTitle\"\n\t\t\t\t\t\t\t(keyup.enter)=\"clearInput($event)\"\n\t\t\t\t\t\t\t(click)=\"clearInput($event)\"\n\t\t\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\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@if (open) {\n\t\t\t\t\t\t<ng-content />\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t@if (fluid) {\n\t\t\t\t<hr class=\"cds--list-box__divider\" />\n\t\t\t}\n\t\t\t@if (invalid) {\n\t\t\t\t<div class=\"cds--form-requirement\">\n\t\t\t\t\t@if (isTemplate(invalidText)) {\n\t\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"invalidText\" />\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t{{ invalidText }}\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t} @else if (warn) {\n\t\t\t\t<div class=\"cds--form-requirement\">\n\t\t\t\t\t@if (isTemplate(warnText)) {\n\t\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"warnText\" />\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t{{warnText}}\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t} @else if(helperText && !fluid) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t\t\t@if (isTemplate(helperText)) {\n\t\t\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"helperText\" />\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t{{helperText}}\n\t\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\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 = `combobox-${ComboBox.comboBoxCount++}`;\n\t@Input() labelId = `combobox-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 * Experimental: enable fluid state\n\t */\n\t@Input() fluid = 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\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\tprotected _isFocused = false;\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\n\t\t// in case there are disabled items they should be mapped according to itemValueKey\n\t\tif (this.itemValueKey && selected) {\n\t\t\tconst values = selected.map((item) => item[this.itemValueKey]);\n\t\t\tthis.propagateChangeCallback(values);\n\t\t} else {\n\t\t\tthis.propagateChangeCallback(selected);\n\t\t}\n\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\thandleFocus(event: FocusEvent) {\n\t\tthis._isFocused = event.type === \"focus\";\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",
|
|
24696
|
+
"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\tChangeDetectionStrategy,\n\tChangeDetectorRef\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\n\t\t\tclass=\"cds--list-box__wrapper\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--list-box__wrapper--fluid': fluid,\n\t\t\t\t'cds--list-box__wrapper--fluid--invalid': fluid && invalid,\n\t\t\t\t'cds--list-box__wrapper--fluid--focus': fluid && _isFocused\n\t\t\t}\">\n\t\t\t@if (label) {\n\t\t\t\t<label\n\t\t\t\t\t[for]=\"id\"\n\t\t\t\t\t[id]=\"labelId\"\n\t\t\t\t\tclass=\"cds--label\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t\t\t}\">\n\t\t\t\t\t@if (isTemplate(label)) {\n\t\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"label\" />\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t{{label}}\n\t\t\t\t\t}\n\t\t\t\t</label>\n\t\t\t}\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\t'cds--list-box--invalid': invalid\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@if (type === 'multi' && pills.length > 0) {\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"cds--tag cds--tag--filter cds--tag--high-contrast\"\n\t\t\t\t\t\t\t[ngClass]=\"{'cds--tag--disabled': disabled || readonly}\">\n\t\t\t\t\t\t\t<span class=\"cds--tag__label\">{{ pills.length }}</span>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t(click)=\"clearSelected($event)\"\n\t\t\t\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t\t\t\t(keydown.enter)=\"clearSelected($event)\"\n\t\t\t\t\t\t\t\tclass=\"cds--tag__close-icon\"\n\t\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t\t[title]=\"clearSelectionsTitle\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled || readonly\"\n\t\t\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\">\n\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\">\n\t\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\t</svg>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\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(focus)=\"fluid ? handleFocus($event) : null\"\n\t\t\t\t\t\t(blur)=\"fluid ? handleFocus($event) : 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@if (invalid) {\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon\">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t} @else if (warn) {\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t}\n\t\t\t\t\t@if (showClearButton) {\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\tclass=\"cds--list-box__selection\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\"\n\t\t\t\t\t\t\t[title]=\"clearSelectionTitle\"\n\t\t\t\t\t\t\t(keyup.enter)=\"clearInput($event)\"\n\t\t\t\t\t\t\t(click)=\"clearInput($event)\"\n\t\t\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\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@if (open) {\n\t\t\t\t\t\t<ng-content />\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t@if (fluid) {\n\t\t\t\t<hr class=\"cds--list-box__divider\" />\n\t\t\t}\n\t\t\t@if (invalid) {\n\t\t\t\t<div class=\"cds--form-requirement\">\n\t\t\t\t\t@if (isTemplate(invalidText)) {\n\t\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"invalidText\" />\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t{{ invalidText }}\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t} @else if (warn) {\n\t\t\t\t<div class=\"cds--form-requirement\">\n\t\t\t\t\t@if (isTemplate(warnText)) {\n\t\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"warnText\" />\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t{{warnText}}\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t} @else if(helperText && !fluid) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t\t\t@if (isTemplate(helperText)) {\n\t\t\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"helperText\" />\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t{{helperText}}\n\t\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\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\tchangeDetection: ChangeDetectionStrategy.OnPush\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 = `combobox-${ComboBox.comboBoxCount++}`;\n\t@Input() labelId = `combobox-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 * Experimental: enable fluid state\n\t */\n\t@Input() fluid = 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\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\tprotected _isFocused = false;\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\tprotected cdr: ChangeDetectorRef\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\n\t\t// in case there are disabled items they should be mapped according to itemValueKey\n\t\tif (this.itemValueKey && selected) {\n\t\t\tconst values = selected.map((item) => item[this.itemValueKey]);\n\t\t\tthis.propagateChangeCallback(values);\n\t\t} else {\n\t\t\tthis.propagateChangeCallback(selected);\n\t\t}\n\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\n\t\tthis.cdr.markForCheck();\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\n\t\tthis.cdr.markForCheck();\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\thandleFocus(event: FocusEvent) {\n\t\tthis._isFocused = event.type === \"focus\";\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",
|
|
24696
24697
|
"assetsDirs": [],
|
|
24697
24698
|
"styleUrlsData": "",
|
|
24698
24699
|
"stylesData": "",
|
|
@@ -24719,9 +24720,15 @@
|
|
|
24719
24720
|
"type": "I18n",
|
|
24720
24721
|
"deprecated": false,
|
|
24721
24722
|
"deprecationMessage": ""
|
|
24723
|
+
},
|
|
24724
|
+
{
|
|
24725
|
+
"name": "cdr",
|
|
24726
|
+
"type": "ChangeDetectorRef",
|
|
24727
|
+
"deprecated": false,
|
|
24728
|
+
"deprecationMessage": ""
|
|
24722
24729
|
}
|
|
24723
24730
|
],
|
|
24724
|
-
"line":
|
|
24731
|
+
"line": 497,
|
|
24725
24732
|
"rawdescription": "\n\nCreates an instance of ComboBox.\n",
|
|
24726
24733
|
"jsdoctags": [
|
|
24727
24734
|
{
|
|
@@ -24750,6 +24757,15 @@
|
|
|
24750
24757
|
"tagName": {
|
|
24751
24758
|
"text": "param"
|
|
24752
24759
|
}
|
|
24760
|
+
},
|
|
24761
|
+
{
|
|
24762
|
+
"name": "cdr",
|
|
24763
|
+
"type": "ChangeDetectorRef",
|
|
24764
|
+
"deprecated": false,
|
|
24765
|
+
"deprecationMessage": "",
|
|
24766
|
+
"tagName": {
|
|
24767
|
+
"text": "param"
|
|
24768
|
+
}
|
|
24753
24769
|
}
|
|
24754
24770
|
]
|
|
24755
24771
|
},
|
|
@@ -24777,7 +24793,7 @@
|
|
|
24777
24793
|
}
|
|
24778
24794
|
],
|
|
24779
24795
|
"returnType": "void",
|
|
24780
|
-
"line":
|
|
24796
|
+
"line": 233,
|
|
24781
24797
|
"rawdescription": "\n\nText to show when nothing is selected.\n",
|
|
24782
24798
|
"description": "<p>Text to show when nothing is selected.</p>\n",
|
|
24783
24799
|
"jsdoctags": [
|
|
@@ -24796,7 +24812,7 @@
|
|
|
24796
24812
|
"name": "placeholder",
|
|
24797
24813
|
"type": "",
|
|
24798
24814
|
"returnType": "",
|
|
24799
|
-
"line":
|
|
24815
|
+
"line": 237
|
|
24800
24816
|
}
|
|
24801
24817
|
},
|
|
24802
24818
|
"openMenuAria": {
|
|
@@ -24815,7 +24831,7 @@
|
|
|
24815
24831
|
}
|
|
24816
24832
|
],
|
|
24817
24833
|
"returnType": "void",
|
|
24818
|
-
"line":
|
|
24834
|
+
"line": 243,
|
|
24819
24835
|
"rawdescription": "\n\nValue to display for accessibility purposes on the combobox control menu when closed\n",
|
|
24820
24836
|
"description": "<p>Value to display for accessibility purposes on the combobox control menu when closed</p>\n",
|
|
24821
24837
|
"jsdoctags": [
|
|
@@ -24834,7 +24850,7 @@
|
|
|
24834
24850
|
"name": "openMenuAria",
|
|
24835
24851
|
"type": "",
|
|
24836
24852
|
"returnType": "",
|
|
24837
|
-
"line":
|
|
24853
|
+
"line": 247
|
|
24838
24854
|
}
|
|
24839
24855
|
},
|
|
24840
24856
|
"closeMenuAria": {
|
|
@@ -24853,7 +24869,7 @@
|
|
|
24853
24869
|
}
|
|
24854
24870
|
],
|
|
24855
24871
|
"returnType": "void",
|
|
24856
|
-
"line":
|
|
24872
|
+
"line": 253,
|
|
24857
24873
|
"rawdescription": "\n\nValue to display for accessibility purposes on the combobox control menu when opened\n",
|
|
24858
24874
|
"description": "<p>Value to display for accessibility purposes on the combobox control menu when opened</p>\n",
|
|
24859
24875
|
"jsdoctags": [
|
|
@@ -24872,7 +24888,7 @@
|
|
|
24872
24888
|
"name": "closeMenuAria",
|
|
24873
24889
|
"type": "",
|
|
24874
24890
|
"returnType": "",
|
|
24875
|
-
"line":
|
|
24891
|
+
"line": 257
|
|
24876
24892
|
}
|
|
24877
24893
|
},
|
|
24878
24894
|
"clearSelectionsTitle": {
|
|
@@ -24891,7 +24907,7 @@
|
|
|
24891
24907
|
}
|
|
24892
24908
|
],
|
|
24893
24909
|
"returnType": "void",
|
|
24894
|
-
"line":
|
|
24910
|
+
"line": 263,
|
|
24895
24911
|
"rawdescription": "\n\nValue to display on the clear selections icon, when multi is selected\n",
|
|
24896
24912
|
"description": "<p>Value to display on the clear selections icon, when multi is selected</p>\n",
|
|
24897
24913
|
"jsdoctags": [
|
|
@@ -24910,7 +24926,7 @@
|
|
|
24910
24926
|
"name": "clearSelectionsTitle",
|
|
24911
24927
|
"type": "",
|
|
24912
24928
|
"returnType": "",
|
|
24913
|
-
"line":
|
|
24929
|
+
"line": 267
|
|
24914
24930
|
}
|
|
24915
24931
|
},
|
|
24916
24932
|
"clearSelectionsAria": {
|
|
@@ -24929,7 +24945,7 @@
|
|
|
24929
24945
|
}
|
|
24930
24946
|
],
|
|
24931
24947
|
"returnType": "void",
|
|
24932
|
-
"line":
|
|
24948
|
+
"line": 273,
|
|
24933
24949
|
"rawdescription": "\n\nValue to display for accessibility purposes to clear selections, when multi is selected\n",
|
|
24934
24950
|
"description": "<p>Value to display for accessibility purposes to clear selections, when multi is selected</p>\n",
|
|
24935
24951
|
"jsdoctags": [
|
|
@@ -24948,7 +24964,7 @@
|
|
|
24948
24964
|
"name": "clearSelectionsAria",
|
|
24949
24965
|
"type": "",
|
|
24950
24966
|
"returnType": "",
|
|
24951
|
-
"line":
|
|
24967
|
+
"line": 277
|
|
24952
24968
|
}
|
|
24953
24969
|
},
|
|
24954
24970
|
"clearSelectionTitle": {
|
|
@@ -24967,7 +24983,7 @@
|
|
|
24967
24983
|
}
|
|
24968
24984
|
],
|
|
24969
24985
|
"returnType": "void",
|
|
24970
|
-
"line":
|
|
24986
|
+
"line": 283,
|
|
24971
24987
|
"rawdescription": "\n\nValue to display on the clear the selected item icon, when single is selected\n",
|
|
24972
24988
|
"description": "<p>Value to display on the clear the selected item icon, when single is selected</p>\n",
|
|
24973
24989
|
"jsdoctags": [
|
|
@@ -24986,7 +25002,7 @@
|
|
|
24986
25002
|
"name": "clearSelectionTitle",
|
|
24987
25003
|
"type": "",
|
|
24988
25004
|
"returnType": "",
|
|
24989
|
-
"line":
|
|
25005
|
+
"line": 287
|
|
24990
25006
|
}
|
|
24991
25007
|
},
|
|
24992
25008
|
"clearSelectionAria": {
|
|
@@ -25005,7 +25021,7 @@
|
|
|
25005
25021
|
}
|
|
25006
25022
|
],
|
|
25007
25023
|
"returnType": "void",
|
|
25008
|
-
"line":
|
|
25024
|
+
"line": 293,
|
|
25009
25025
|
"rawdescription": "\n\nValue to display for accessibility purposes on the clear the selected item icon, when single is selected\n",
|
|
25010
25026
|
"description": "<p>Value to display for accessibility purposes on the clear the selected item icon, when single is selected</p>\n",
|
|
25011
25027
|
"jsdoctags": [
|
|
@@ -25024,7 +25040,7 @@
|
|
|
25024
25040
|
"name": "clearSelectionAria",
|
|
25025
25041
|
"type": "",
|
|
25026
25042
|
"returnType": "",
|
|
25027
|
-
"line":
|
|
25043
|
+
"line": 297
|
|
25028
25044
|
}
|
|
25029
25045
|
}
|
|
25030
25046
|
}
|
|
@@ -25449,8 +25465,9 @@
|
|
|
25449
25465
|
},
|
|
25450
25466
|
{
|
|
25451
25467
|
"name": "ContentSwitcher",
|
|
25452
|
-
"id": "component-ContentSwitcher-
|
|
25468
|
+
"id": "component-ContentSwitcher-2b9e587c9aa5bac0ebb087c9f041f11bb181fb34a17be1e135ecce3e2d0bb46d85a95f1067a8eeede929a8c850f3c6852164ff90f7bf235454bb07d446d2b07a",
|
|
25453
25469
|
"file": "src/content-switcher/content-switcher.component.ts",
|
|
25470
|
+
"changeDetection": "ChangeDetectionStrategy.OnPush",
|
|
25454
25471
|
"encapsulation": [],
|
|
25455
25472
|
"entryComponents": [],
|
|
25456
25473
|
"inputs": [],
|
|
@@ -25469,7 +25486,7 @@
|
|
|
25469
25486
|
"defaultValue": "\"content switcher\"",
|
|
25470
25487
|
"deprecated": false,
|
|
25471
25488
|
"deprecationMessage": "",
|
|
25472
|
-
"line":
|
|
25489
|
+
"line": 54,
|
|
25473
25490
|
"type": "string",
|
|
25474
25491
|
"decorators": []
|
|
25475
25492
|
},
|
|
@@ -25480,7 +25497,7 @@
|
|
|
25480
25497
|
"deprecationMessage": "",
|
|
25481
25498
|
"rawdescription": "\n\nSet content switcher size\n",
|
|
25482
25499
|
"description": "<p>Set content switcher size</p>\n",
|
|
25483
|
-
"line":
|
|
25500
|
+
"line": 59,
|
|
25484
25501
|
"type": "\"sm\" | \"md\" | \"lg\"",
|
|
25485
25502
|
"decorators": []
|
|
25486
25503
|
}
|
|
@@ -25493,7 +25510,7 @@
|
|
|
25493
25510
|
"deprecationMessage": "",
|
|
25494
25511
|
"rawdescription": "\n\nEmits the activated `ContentSwitcherOption`\n",
|
|
25495
25512
|
"description": "<p>Emits the activated <code>ContentSwitcherOption</code></p>\n",
|
|
25496
|
-
"line":
|
|
25513
|
+
"line": 64,
|
|
25497
25514
|
"type": "EventEmitter"
|
|
25498
25515
|
}
|
|
25499
25516
|
],
|
|
@@ -25506,7 +25523,7 @@
|
|
|
25506
25523
|
"indexKey": "",
|
|
25507
25524
|
"optional": false,
|
|
25508
25525
|
"description": "",
|
|
25509
|
-
"line":
|
|
25526
|
+
"line": 66,
|
|
25510
25527
|
"decorators": [
|
|
25511
25528
|
{
|
|
25512
25529
|
"name": "ContentChildren",
|
|
@@ -25532,7 +25549,7 @@
|
|
|
25532
25549
|
"optional": false,
|
|
25533
25550
|
"returnType": "void",
|
|
25534
25551
|
"typeParameters": [],
|
|
25535
|
-
"line":
|
|
25552
|
+
"line": 91,
|
|
25536
25553
|
"deprecated": false,
|
|
25537
25554
|
"deprecationMessage": "",
|
|
25538
25555
|
"decorators": [
|
|
@@ -25576,7 +25593,7 @@
|
|
|
25576
25593
|
],
|
|
25577
25594
|
"deprecated": false,
|
|
25578
25595
|
"deprecationMessage": "",
|
|
25579
|
-
"line":
|
|
25596
|
+
"line": 91
|
|
25580
25597
|
}
|
|
25581
25598
|
],
|
|
25582
25599
|
"standalone": false,
|
|
@@ -25584,7 +25601,7 @@
|
|
|
25584
25601
|
"description": "<p>The content switcher can be used for toggling between distinct options.\nSimilar to tabs, but without an associated content panel.</p>\n<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { ContentSwitcherModule } from 'carbon-components-angular';</code></pre></div><b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\"><cds-content-switcher (selected)="selected($event)">\n <button cdsContentOption>First section</button>\n <button cdsContentOption>Second section</button>\n <button cdsContentOption>Third section</button>\n</cds-content-switcher></code></pre></div><p><a href=\"../../?path=/story/components-content-switcher--basic\">See demo</a></p>\n",
|
|
25585
25602
|
"rawdescription": "\n\nThe content switcher can be used for toggling between distinct options.\nSimilar to tabs, but without an associated content panel.\n\nGet started with importing the module:\n\n```typescript\nimport { ContentSwitcherModule } from 'carbon-components-angular';\n```\n\n```html\n<cds-content-switcher (selected)=\"selected($event)\">\n\t\t<button cdsContentOption>First section</button>\n\t\t<button cdsContentOption>Second section</button>\n\t\t<button cdsContentOption>Third section</button>\n</cds-content-switcher>\n```\n\n[See demo](../../?path=/story/components-content-switcher--basic)\n",
|
|
25586
25603
|
"type": "component",
|
|
25587
|
-
"sourceCode": "import {\n\tComponent,\n\tInput,\n\tContentChildren,\n\tQueryList,\n\tOutput,\n\tEventEmitter,\n\tAfterViewInit,\n\tHostListener,\n\tElementRef\n} from \"@angular/core\";\nimport { ContentSwitcherOption } from \"./content-switcher-option.directive\";\nimport { isFocusInLastItem, isFocusInFirstItem } from \"carbon-components-angular/common\";\n\n/**\n * The content switcher can be used for toggling between distinct options.\n * Similar to tabs, but without an associated content panel.\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { ContentSwitcherModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-content-switcher (selected)=\"selected($event)\">\n *\t\t<button cdsContentOption>First section</button>\n *\t\t<button cdsContentOption>Second section</button>\n *\t\t<button cdsContentOption>Third section</button>\n * </cds-content-switcher>\n * ```\n *\n * [See demo](../../?path=/story/components-content-switcher--basic)\n */\n@Component({\n\tselector: \"cds-content-switcher, ibm-content-switcher\",\n\ttemplate: `\n\t\t<div\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"cds--content-switcher\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--content-switcher--sm': size === 'sm',\n\t\t\t\t'cds--content-switcher--md': size === 'md',\n\t\t\t\t'cds--content-switcher--lg': size === 'lg'\n\t\t\t}\"\n\t\t\trole=\"tablist\">\n\t\t\t<ng-content />\n\t\t</div>\n\t
|
|
25604
|
+
"sourceCode": "import {\n\tComponent,\n\tInput,\n\tContentChildren,\n\tQueryList,\n\tOutput,\n\tEventEmitter,\n\tAfterViewInit,\n\tHostListener,\n\tElementRef,\n\tChangeDetectionStrategy\n} from \"@angular/core\";\nimport { ContentSwitcherOption } from \"./content-switcher-option.directive\";\nimport { isFocusInLastItem, isFocusInFirstItem } from \"carbon-components-angular/common\";\n\n/**\n * The content switcher can be used for toggling between distinct options.\n * Similar to tabs, but without an associated content panel.\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { ContentSwitcherModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-content-switcher (selected)=\"selected($event)\">\n *\t\t<button cdsContentOption>First section</button>\n *\t\t<button cdsContentOption>Second section</button>\n *\t\t<button cdsContentOption>Third section</button>\n * </cds-content-switcher>\n * ```\n *\n * [See demo](../../?path=/story/components-content-switcher--basic)\n */\n@Component({\n\tselector: \"cds-content-switcher, ibm-content-switcher\",\n\ttemplate: `\n\t\t<div\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"cds--content-switcher\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--content-switcher--sm': size === 'sm',\n\t\t\t\t'cds--content-switcher--md': size === 'md',\n\t\t\t\t'cds--content-switcher--lg': size === 'lg'\n\t\t\t}\"\n\t\t\trole=\"tablist\">\n\t\t\t<ng-content />\n\t\t</div>\n\t`,\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ContentSwitcher implements AfterViewInit {\n\t@Input() ariaLabel = \"content switcher\";\n\n\t/**\n\t * Set content switcher size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t/**\n\t * Emits the activated `ContentSwitcherOption`\n\t */\n\t@Output() selected = new EventEmitter<ContentSwitcherOption>();\n\n\t@ContentChildren(ContentSwitcherOption) options: QueryList<ContentSwitcherOption>;\n\n\tconstructor(protected elementRef: ElementRef) {}\n\n\tngAfterViewInit() {\n\t\tconst firstActive = this.options.find(option => option.active);\n\t\t// delay setting active until the DOM has settled\n\t\tif (!firstActive) {\n\t\t\tsetTimeout(() => this.options.first.active = true);\n\t\t}\n\t\t// subscribe to each item, emit when one is selected, and reset the active states\n\t\tthis.options.forEach(option => {\n\t\t\toption.selected.subscribe((_: boolean) => {\n\t\t\t\tconst active = option;\n\t\t\t\tthis.options.forEach(option => {\n\t\t\t\t\tif (option !== active) {\n\t\t\t\t\t\toption.active = false;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tthis.selected.emit(active);\n\t\t\t});\n\t\t});\n\t}\n\n\t@HostListener(\"keydown\", [\"$event\"])\n\thostkeys(event: KeyboardEvent) {\n\t\tconst buttonList = Array.from<any>(this.elementRef.nativeElement.querySelectorAll(\"[cdsContentOption], [ibmContentOption]\"));\n\n\t\tswitch (event.key) {\n\t\t\tcase \"ArrowRight\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (!isFocusInLastItem(event, buttonList)) {\n\t\t\t\t\tconst index = buttonList.findIndex(item => item === event.target);\n\t\t\t\t\tbuttonList[index + 1].focus();\n\t\t\t\t} else {\n\t\t\t\t\tbuttonList[0].focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\tcase \"ArrowLeft\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (!isFocusInFirstItem(event, buttonList)) {\n\t\t\t\t\tconst index = buttonList.findIndex(item => item === event.target);\n\t\t\t\t\tbuttonList[index - 1].focus();\n\t\t\t\t} else {\n\t\t\t\t\tbuttonList[buttonList.length - 1].focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\tcase \"Home\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbuttonList[0].focus();\n\t\t\t\tbreak;\n\n\t\t\tcase \"End\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbuttonList[buttonList.length - 1].focus();\n\t\t\t\tbreak;\n\t\t}\n\t}\n}\n",
|
|
25588
25605
|
"assetsDirs": [],
|
|
25589
25606
|
"styleUrlsData": "",
|
|
25590
25607
|
"stylesData": "",
|
|
@@ -25601,7 +25618,7 @@
|
|
|
25601
25618
|
"deprecationMessage": ""
|
|
25602
25619
|
}
|
|
25603
25620
|
],
|
|
25604
|
-
"line":
|
|
25621
|
+
"line": 66,
|
|
25605
25622
|
"jsdoctags": [
|
|
25606
25623
|
{
|
|
25607
25624
|
"name": "elementRef",
|
|
@@ -25621,8 +25638,9 @@
|
|
|
25621
25638
|
},
|
|
25622
25639
|
{
|
|
25623
25640
|
"name": "ContextMenuComponent",
|
|
25624
|
-
"id": "component-ContextMenuComponent-
|
|
25641
|
+
"id": "component-ContextMenuComponent-cf20ee078d958b8d605e4d73c0396a457aff63d3229567140bd445d108429b455fd93265dc95acff8ac52e6946bb799224f5506ed4f7932c29b51d15f6a0f289",
|
|
25625
25642
|
"file": "src/context-menu/context-menu.component.ts",
|
|
25643
|
+
"changeDetection": "ChangeDetectionStrategy.OnPush",
|
|
25626
25644
|
"encapsulation": [],
|
|
25627
25645
|
"entryComponents": [],
|
|
25628
25646
|
"inputs": [],
|
|
@@ -25643,7 +25661,7 @@
|
|
|
25643
25661
|
"defaultValue": "false",
|
|
25644
25662
|
"deprecated": false,
|
|
25645
25663
|
"deprecationMessage": "",
|
|
25646
|
-
"line":
|
|
25664
|
+
"line": 34,
|
|
25647
25665
|
"type": "boolean",
|
|
25648
25666
|
"decorators": []
|
|
25649
25667
|
},
|
|
@@ -25652,7 +25670,7 @@
|
|
|
25652
25670
|
"defaultValue": "{\n\t\tleft: 0,\n\t\ttop: 0\n\t}",
|
|
25653
25671
|
"deprecated": false,
|
|
25654
25672
|
"deprecationMessage": "",
|
|
25655
|
-
"line":
|
|
25673
|
+
"line": 35,
|
|
25656
25674
|
"type": "{ left: number; top: number; }",
|
|
25657
25675
|
"decorators": []
|
|
25658
25676
|
}
|
|
@@ -25668,7 +25686,7 @@
|
|
|
25668
25686
|
"indexKey": "",
|
|
25669
25687
|
"optional": false,
|
|
25670
25688
|
"description": "",
|
|
25671
|
-
"line":
|
|
25689
|
+
"line": 40,
|
|
25672
25690
|
"decorators": [
|
|
25673
25691
|
{
|
|
25674
25692
|
"name": "HostBinding",
|
|
@@ -25688,7 +25706,7 @@
|
|
|
25688
25706
|
"indexKey": "",
|
|
25689
25707
|
"optional": false,
|
|
25690
25708
|
"description": "",
|
|
25691
|
-
"line":
|
|
25709
|
+
"line": 43,
|
|
25692
25710
|
"decorators": [
|
|
25693
25711
|
{
|
|
25694
25712
|
"name": "HostBinding",
|
|
@@ -25708,7 +25726,7 @@
|
|
|
25708
25726
|
"indexKey": "",
|
|
25709
25727
|
"optional": false,
|
|
25710
25728
|
"description": "",
|
|
25711
|
-
"line":
|
|
25729
|
+
"line": 44,
|
|
25712
25730
|
"decorators": [
|
|
25713
25731
|
{
|
|
25714
25732
|
"name": "HostBinding",
|
|
@@ -25727,7 +25745,7 @@
|
|
|
25727
25745
|
"optional": false,
|
|
25728
25746
|
"returnType": "void",
|
|
25729
25747
|
"typeParameters": [],
|
|
25730
|
-
"line":
|
|
25748
|
+
"line": 62,
|
|
25731
25749
|
"deprecated": false,
|
|
25732
25750
|
"deprecationMessage": ""
|
|
25733
25751
|
},
|
|
@@ -25744,7 +25762,7 @@
|
|
|
25744
25762
|
"optional": false,
|
|
25745
25763
|
"returnType": "void",
|
|
25746
25764
|
"typeParameters": [],
|
|
25747
|
-
"line":
|
|
25765
|
+
"line": 72,
|
|
25748
25766
|
"deprecated": false,
|
|
25749
25767
|
"deprecationMessage": "",
|
|
25750
25768
|
"decorators": [
|
|
@@ -25777,7 +25795,7 @@
|
|
|
25777
25795
|
"defaultValue": "\"menu\"",
|
|
25778
25796
|
"deprecated": false,
|
|
25779
25797
|
"deprecationMessage": "",
|
|
25780
|
-
"line":
|
|
25798
|
+
"line": 43,
|
|
25781
25799
|
"type": "string",
|
|
25782
25800
|
"decorators": []
|
|
25783
25801
|
},
|
|
@@ -25786,7 +25804,7 @@
|
|
|
25786
25804
|
"defaultValue": "\"-1\"",
|
|
25787
25805
|
"deprecated": false,
|
|
25788
25806
|
"deprecationMessage": "",
|
|
25789
|
-
"line":
|
|
25807
|
+
"line": 44,
|
|
25790
25808
|
"type": "string",
|
|
25791
25809
|
"decorators": []
|
|
25792
25810
|
},
|
|
@@ -25795,7 +25813,7 @@
|
|
|
25795
25813
|
"defaultValue": "true",
|
|
25796
25814
|
"deprecated": false,
|
|
25797
25815
|
"deprecationMessage": "",
|
|
25798
|
-
"line":
|
|
25816
|
+
"line": 40,
|
|
25799
25817
|
"type": "boolean",
|
|
25800
25818
|
"decorators": []
|
|
25801
25819
|
},
|
|
@@ -25803,7 +25821,7 @@
|
|
|
25803
25821
|
"name": "class.cds--menu--open",
|
|
25804
25822
|
"deprecated": false,
|
|
25805
25823
|
"deprecationMessage": "",
|
|
25806
|
-
"line":
|
|
25824
|
+
"line": 41,
|
|
25807
25825
|
"type": "boolean",
|
|
25808
25826
|
"decorators": []
|
|
25809
25827
|
},
|
|
@@ -25811,7 +25829,7 @@
|
|
|
25811
25829
|
"name": "class.cds--menu--shown",
|
|
25812
25830
|
"deprecated": false,
|
|
25813
25831
|
"deprecationMessage": "",
|
|
25814
|
-
"line":
|
|
25832
|
+
"line": 42,
|
|
25815
25833
|
"type": "boolean",
|
|
25816
25834
|
"decorators": []
|
|
25817
25835
|
},
|
|
@@ -25819,7 +25837,7 @@
|
|
|
25819
25837
|
"name": "class.cds--menu--with-icons",
|
|
25820
25838
|
"deprecated": false,
|
|
25821
25839
|
"deprecationMessage": "",
|
|
25822
|
-
"line":
|
|
25840
|
+
"line": 48,
|
|
25823
25841
|
"type": "HTMLElement",
|
|
25824
25842
|
"decorators": []
|
|
25825
25843
|
},
|
|
@@ -25827,7 +25845,7 @@
|
|
|
25827
25845
|
"name": "style.left.px",
|
|
25828
25846
|
"deprecated": false,
|
|
25829
25847
|
"deprecationMessage": "",
|
|
25830
|
-
"line":
|
|
25848
|
+
"line": 45,
|
|
25831
25849
|
"type": "number",
|
|
25832
25850
|
"decorators": []
|
|
25833
25851
|
},
|
|
@@ -25835,7 +25853,7 @@
|
|
|
25835
25853
|
"name": "style.top.px",
|
|
25836
25854
|
"deprecated": false,
|
|
25837
25855
|
"deprecationMessage": "",
|
|
25838
|
-
"line":
|
|
25856
|
+
"line": 46,
|
|
25839
25857
|
"type": "number",
|
|
25840
25858
|
"decorators": []
|
|
25841
25859
|
}
|
|
@@ -25856,7 +25874,7 @@
|
|
|
25856
25874
|
],
|
|
25857
25875
|
"deprecated": false,
|
|
25858
25876
|
"deprecationMessage": "",
|
|
25859
|
-
"line":
|
|
25877
|
+
"line": 72
|
|
25860
25878
|
}
|
|
25861
25879
|
],
|
|
25862
25880
|
"standalone": false,
|
|
@@ -25864,7 +25882,7 @@
|
|
|
25864
25882
|
"description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { ContextMenuModule } from 'carbon-components-angular';</code></pre></div><p><a href=\"../../?path=/story/components-context-menu--basic\">See demo</a></p>\n",
|
|
25865
25883
|
"rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { ContextMenuModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-context-menu--basic)\n",
|
|
25866
25884
|
"type": "component",
|
|
25867
|
-
"sourceCode": "import {\n\tComponent,\n\tElementRef,\n\tHostListener,\n\tInput,\n\tSimpleChanges,\n\tOnChanges,\n\tHostBinding\n} from \"@angular/core\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ContextMenuModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-context-menu--basic)\n */\n@Component({\n\tselector: \"cds-context-menu, ibm-context-menu\",\n\ttemplate: `\n\t\t\t<ng-content />\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t`]\n})\nexport class ContextMenuComponent implements OnChanges {\n\t@Input() open = false;\n\t@Input() position = {\n\t\tleft: 0,\n\t\ttop: 0\n\t};\n\n\t@HostBinding(\"class.cds--menu\") contextMenu = true;\n\t@HostBinding(\"class.cds--menu--open\") get contextMenuOpen() { return this.open; }\n\t@HostBinding(\"class.cds--menu--shown\") get showMenu() { return this.open; }\n\t@HostBinding(\"attr.role\") role = \"menu\";\n\t@HostBinding(\"attr.tabindex\") tabindex = \"-1\";\n\t@HostBinding(\"style.left.px\") get leftPosition() { return this.position.left; }\n\t@HostBinding(\"style.top.px\") get topPosition() { return this.position.top; }\n\n\t@HostBinding(\"class.cds--menu--with-icons\") get classIcons() {\n\t\tconst svgElement = this.elementRef.nativeElement\n\t\t\t.querySelector(\".cds--menu-item .cds--menu-item__icon svg\") as HTMLElement;\n\t\treturn svgElement;\n\t}\n\n\tconstructor(protected elementRef: ElementRef) { }\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (changes.open && changes.open.currentValue) {\n\t\t\tthis.focusMenu();\n\t\t}\n\t}\n\n\tfocusMenu() {\n\t\t// wait until the next tick to let the DOM settle before changing the focus\n\t\tsetTimeout(() => {\n\t\t\tconst list: HTMLElement = this.elementRef.nativeElement;\n\t\t\tconst firstOption = list.querySelector(\".cds--menu-item\") as HTMLElement;\n\t\t\tfirstOption.focus();\n\t\t});\n\t}\n\n\t@HostListener(\"keydown\", [\"$event\"])\n\thandleNavigation(event: KeyboardEvent) {\n\t\tconst list: HTMLElement = this.elementRef.nativeElement;\n\t\tconst subMenus: HTMLElement[] = Array.from(list.querySelectorAll(\"cds-context-menu[role=menu]\"));\n\t\tconst menuItems: HTMLElement[] = (\n\t\t\tArray.from(list.querySelectorAll(\".cds--menu-item\")) as HTMLElement[])\n\t\t\t.filter(menuItem => !subMenus.some(subMenu => subMenu.contains(menuItem))\n\t\t);\n\t\tconst currentIndex = menuItems.findIndex(menuItem => parseInt(menuItem.getAttribute(\"tabindex\"), 10) === 0);\n\t\tconst currentMenuItem = menuItems[currentIndex];\n\n\t\tswitch (event.key) {\n\t\t\tcase \"ArrowDown\": {\n\t\t\t\tif (document.activeElement === list) {\n\t\t\t\t\tmenuItems[0].focus();\n\t\t\t\t} else {\n\t\t\t\t\tif (currentIndex !== -1 && currentIndex < menuItems.length - 1) {\n\t\t\t\t\t\tmenuItems[currentIndex + 1].focus();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"ArrowUp\": {\n\t\t\t\tif (document.activeElement === list) {\n\t\t\t\t\tmenuItems[menuItems.length - 1].focus();\n\t\t\t\t} else {\n\t\t\t\t\tif (currentIndex !== -1 && currentIndex > 0) {\n\t\t\t\t\t\tmenuItems[currentIndex - 1].focus();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"ArrowRight\": {\n\t\t\t\tif (currentIndex !== -1 && subMenus.some(subMenu => currentMenuItem.contains(subMenu))) {\n\t\t\t\t\tcurrentMenuItem.click();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"ArrowLeft\": {\n\t\t\t\tconst parent = currentMenuItem.parentElement.closest(\".cds--menu-item, .cds--menu-item\") as HTMLElement;\n\t\t\t\tif (parent) {\n\t\t\t\t\tparent.focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n}\n",
|
|
25885
|
+
"sourceCode": "import {\n\tComponent,\n\tElementRef,\n\tHostListener,\n\tInput,\n\tSimpleChanges,\n\tOnChanges,\n\tHostBinding,\n\tChangeDetectionStrategy\n} from \"@angular/core\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ContextMenuModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-context-menu--basic)\n */\n@Component({\n\tselector: \"cds-context-menu, ibm-context-menu\",\n\ttemplate: `\n\t\t\t<ng-content />\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t`],\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ContextMenuComponent implements OnChanges {\n\t@Input() open = false;\n\t@Input() position = {\n\t\tleft: 0,\n\t\ttop: 0\n\t};\n\n\t@HostBinding(\"class.cds--menu\") contextMenu = true;\n\t@HostBinding(\"class.cds--menu--open\") get contextMenuOpen() { return this.open; }\n\t@HostBinding(\"class.cds--menu--shown\") get showMenu() { return this.open; }\n\t@HostBinding(\"attr.role\") role = \"menu\";\n\t@HostBinding(\"attr.tabindex\") tabindex = \"-1\";\n\t@HostBinding(\"style.left.px\") get leftPosition() { return this.position.left; }\n\t@HostBinding(\"style.top.px\") get topPosition() { return this.position.top; }\n\n\t@HostBinding(\"class.cds--menu--with-icons\") get classIcons() {\n\t\tconst svgElement = this.elementRef.nativeElement\n\t\t\t.querySelector(\".cds--menu-item .cds--menu-item__icon svg\") as HTMLElement;\n\t\treturn svgElement;\n\t}\n\n\tconstructor(protected elementRef: ElementRef) { }\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (changes.open && changes.open.currentValue) {\n\t\t\tthis.focusMenu();\n\t\t}\n\t}\n\n\tfocusMenu() {\n\t\t// wait until the next tick to let the DOM settle before changing the focus\n\t\tsetTimeout(() => {\n\t\t\tconst list: HTMLElement = this.elementRef.nativeElement;\n\t\t\tconst firstOption = list.querySelector(\".cds--menu-item\") as HTMLElement;\n\t\t\tfirstOption.focus();\n\t\t});\n\t}\n\n\t@HostListener(\"keydown\", [\"$event\"])\n\thandleNavigation(event: KeyboardEvent) {\n\t\tconst list: HTMLElement = this.elementRef.nativeElement;\n\t\tconst subMenus: HTMLElement[] = Array.from(list.querySelectorAll(\"cds-context-menu[role=menu]\"));\n\t\tconst menuItems: HTMLElement[] = (\n\t\t\tArray.from(list.querySelectorAll(\".cds--menu-item\")) as HTMLElement[])\n\t\t\t.filter(menuItem => !subMenus.some(subMenu => subMenu.contains(menuItem))\n\t\t);\n\t\tconst currentIndex = menuItems.findIndex(menuItem => parseInt(menuItem.getAttribute(\"tabindex\"), 10) === 0);\n\t\tconst currentMenuItem = menuItems[currentIndex];\n\n\t\tswitch (event.key) {\n\t\t\tcase \"ArrowDown\": {\n\t\t\t\tif (document.activeElement === list) {\n\t\t\t\t\tmenuItems[0].focus();\n\t\t\t\t} else {\n\t\t\t\t\tif (currentIndex !== -1 && currentIndex < menuItems.length - 1) {\n\t\t\t\t\t\tmenuItems[currentIndex + 1].focus();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"ArrowUp\": {\n\t\t\t\tif (document.activeElement === list) {\n\t\t\t\t\tmenuItems[menuItems.length - 1].focus();\n\t\t\t\t} else {\n\t\t\t\t\tif (currentIndex !== -1 && currentIndex > 0) {\n\t\t\t\t\t\tmenuItems[currentIndex - 1].focus();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"ArrowRight\": {\n\t\t\t\tif (currentIndex !== -1 && subMenus.some(subMenu => currentMenuItem.contains(subMenu))) {\n\t\t\t\t\tcurrentMenuItem.click();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"ArrowLeft\": {\n\t\t\t\tconst parent = currentMenuItem.parentElement.closest(\".cds--menu-item, .cds--menu-item\") as HTMLElement;\n\t\t\t\tif (parent) {\n\t\t\t\t\tparent.focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n}\n",
|
|
25868
25886
|
"assetsDirs": [],
|
|
25869
25887
|
"styleUrlsData": "",
|
|
25870
25888
|
"stylesData": "\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t\n",
|
|
@@ -25881,7 +25899,7 @@
|
|
|
25881
25899
|
"deprecationMessage": ""
|
|
25882
25900
|
}
|
|
25883
25901
|
],
|
|
25884
|
-
"line":
|
|
25902
|
+
"line": 52,
|
|
25885
25903
|
"jsdoctags": [
|
|
25886
25904
|
{
|
|
25887
25905
|
"name": "elementRef",
|
|
@@ -25905,7 +25923,7 @@
|
|
|
25905
25923
|
"name": "contextMenuOpen",
|
|
25906
25924
|
"type": "",
|
|
25907
25925
|
"returnType": "",
|
|
25908
|
-
"line":
|
|
25926
|
+
"line": 41
|
|
25909
25927
|
}
|
|
25910
25928
|
},
|
|
25911
25929
|
"showMenu": {
|
|
@@ -25914,7 +25932,7 @@
|
|
|
25914
25932
|
"name": "showMenu",
|
|
25915
25933
|
"type": "",
|
|
25916
25934
|
"returnType": "",
|
|
25917
|
-
"line":
|
|
25935
|
+
"line": 42
|
|
25918
25936
|
}
|
|
25919
25937
|
},
|
|
25920
25938
|
"leftPosition": {
|
|
@@ -25923,7 +25941,7 @@
|
|
|
25923
25941
|
"name": "leftPosition",
|
|
25924
25942
|
"type": "",
|
|
25925
25943
|
"returnType": "",
|
|
25926
|
-
"line":
|
|
25944
|
+
"line": 45
|
|
25927
25945
|
}
|
|
25928
25946
|
},
|
|
25929
25947
|
"topPosition": {
|
|
@@ -25932,7 +25950,7 @@
|
|
|
25932
25950
|
"name": "topPosition",
|
|
25933
25951
|
"type": "",
|
|
25934
25952
|
"returnType": "",
|
|
25935
|
-
"line":
|
|
25953
|
+
"line": 46
|
|
25936
25954
|
}
|
|
25937
25955
|
},
|
|
25938
25956
|
"classIcons": {
|
|
@@ -25941,15 +25959,16 @@
|
|
|
25941
25959
|
"name": "classIcons",
|
|
25942
25960
|
"type": "",
|
|
25943
25961
|
"returnType": "",
|
|
25944
|
-
"line":
|
|
25962
|
+
"line": 48
|
|
25945
25963
|
}
|
|
25946
25964
|
}
|
|
25947
25965
|
}
|
|
25948
25966
|
},
|
|
25949
25967
|
{
|
|
25950
25968
|
"name": "ContextMenuDividerComponent",
|
|
25951
|
-
"id": "component-ContextMenuDividerComponent-
|
|
25969
|
+
"id": "component-ContextMenuDividerComponent-467a188687342f2c3e146c24f636e005bd52dd95e6133824f68cc08a207fbb706fefd0e6435c718b289ae81ff2c9b60492b9f7f63ce0196cb9102e7f0046a6bd",
|
|
25952
25970
|
"file": "src/context-menu/context-menu-divider.component.ts",
|
|
25971
|
+
"changeDetection": "ChangeDetectionStrategy.OnPush",
|
|
25953
25972
|
"encapsulation": [],
|
|
25954
25973
|
"entryComponents": [],
|
|
25955
25974
|
"inputs": [],
|
|
@@ -25974,7 +25993,7 @@
|
|
|
25974
25993
|
"indexKey": "",
|
|
25975
25994
|
"optional": false,
|
|
25976
25995
|
"description": "",
|
|
25977
|
-
"line":
|
|
25996
|
+
"line": 9,
|
|
25978
25997
|
"decorators": [
|
|
25979
25998
|
{
|
|
25980
25999
|
"name": "HostBinding",
|
|
@@ -25994,7 +26013,7 @@
|
|
|
25994
26013
|
"indexKey": "",
|
|
25995
26014
|
"optional": false,
|
|
25996
26015
|
"description": "",
|
|
25997
|
-
"line":
|
|
26016
|
+
"line": 10,
|
|
25998
26017
|
"decorators": [
|
|
25999
26018
|
{
|
|
26000
26019
|
"name": "HostBinding",
|
|
@@ -26015,7 +26034,7 @@
|
|
|
26015
26034
|
"defaultValue": "\"separator\"",
|
|
26016
26035
|
"deprecated": false,
|
|
26017
26036
|
"deprecationMessage": "",
|
|
26018
|
-
"line":
|
|
26037
|
+
"line": 10,
|
|
26019
26038
|
"type": "string",
|
|
26020
26039
|
"decorators": []
|
|
26021
26040
|
},
|
|
@@ -26024,7 +26043,7 @@
|
|
|
26024
26043
|
"defaultValue": "true",
|
|
26025
26044
|
"deprecated": false,
|
|
26026
26045
|
"deprecationMessage": "",
|
|
26027
|
-
"line":
|
|
26046
|
+
"line": 9,
|
|
26028
26047
|
"type": "boolean",
|
|
26029
26048
|
"decorators": []
|
|
26030
26049
|
}
|
|
@@ -26035,7 +26054,7 @@
|
|
|
26035
26054
|
"description": "",
|
|
26036
26055
|
"rawdescription": "\n",
|
|
26037
26056
|
"type": "component",
|
|
26038
|
-
"sourceCode": "import { Component, HostBinding } from \"@angular/core\";\n\n@Component({\n\tselector: \"cds-context-menu-divider, ibm-context-menu-divider\",\n\ttemplate: \"\"\n})\nexport class ContextMenuDividerComponent {\n\t@HostBinding(\"class.cds--menu-item-divider\") dividerClass = true;\n\t@HostBinding(\"attr.role\") role = \"separator\";\n}\n",
|
|
26057
|
+
"sourceCode": "import { ChangeDetectionStrategy, Component, HostBinding } from \"@angular/core\";\n\n@Component({\n\tselector: \"cds-context-menu-divider, ibm-context-menu-divider\",\n\ttemplate: \"\",\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ContextMenuDividerComponent {\n\t@HostBinding(\"class.cds--menu-item-divider\") dividerClass = true;\n\t@HostBinding(\"attr.role\") role = \"separator\";\n}\n",
|
|
26039
26058
|
"assetsDirs": [],
|
|
26040
26059
|
"styleUrlsData": "",
|
|
26041
26060
|
"stylesData": "",
|
|
@@ -26043,8 +26062,9 @@
|
|
|
26043
26062
|
},
|
|
26044
26063
|
{
|
|
26045
26064
|
"name": "ContextMenuGroupComponent",
|
|
26046
|
-
"id": "component-ContextMenuGroupComponent-
|
|
26065
|
+
"id": "component-ContextMenuGroupComponent-da2b699f10153703afa0c59f8e2f26a38f3ca925361f35e1c9779ef72871683081efa39eb7e7105ea8f372835d4bc2969f41aba671f2488bb1960c53227ec116",
|
|
26047
26066
|
"file": "src/context-menu/context-menu-group.component.ts",
|
|
26067
|
+
"changeDetection": "ChangeDetectionStrategy.OnPush",
|
|
26048
26068
|
"encapsulation": [],
|
|
26049
26069
|
"entryComponents": [],
|
|
26050
26070
|
"inputs": [],
|
|
@@ -26068,7 +26088,7 @@
|
|
|
26068
26088
|
"defaultValue": "null",
|
|
26069
26089
|
"deprecated": false,
|
|
26070
26090
|
"deprecationMessage": "",
|
|
26071
|
-
"line":
|
|
26091
|
+
"line": 29,
|
|
26072
26092
|
"type": "any",
|
|
26073
26093
|
"decorators": []
|
|
26074
26094
|
},
|
|
@@ -26077,7 +26097,7 @@
|
|
|
26077
26097
|
"defaultValue": "null",
|
|
26078
26098
|
"deprecated": false,
|
|
26079
26099
|
"deprecationMessage": "",
|
|
26080
|
-
"line":
|
|
26100
|
+
"line": 31,
|
|
26081
26101
|
"type": "null | \"radio\" | \"checkbox\"",
|
|
26082
26102
|
"decorators": []
|
|
26083
26103
|
},
|
|
@@ -26086,7 +26106,7 @@
|
|
|
26086
26106
|
"defaultValue": "[]",
|
|
26087
26107
|
"deprecated": false,
|
|
26088
26108
|
"deprecationMessage": "",
|
|
26089
|
-
"line":
|
|
26109
|
+
"line": 30,
|
|
26090
26110
|
"type": "any[]",
|
|
26091
26111
|
"decorators": []
|
|
26092
26112
|
}
|
|
@@ -26097,7 +26117,7 @@
|
|
|
26097
26117
|
"defaultValue": "new EventEmitter<any[]>()",
|
|
26098
26118
|
"deprecated": false,
|
|
26099
26119
|
"deprecationMessage": "",
|
|
26100
|
-
"line":
|
|
26120
|
+
"line": 32,
|
|
26101
26121
|
"type": "EventEmitter"
|
|
26102
26122
|
}
|
|
26103
26123
|
],
|
|
@@ -26111,7 +26131,7 @@
|
|
|
26111
26131
|
"indexKey": "",
|
|
26112
26132
|
"optional": false,
|
|
26113
26133
|
"description": "",
|
|
26114
|
-
"line":
|
|
26134
|
+
"line": 25,
|
|
26115
26135
|
"decorators": [
|
|
26116
26136
|
{
|
|
26117
26137
|
"name": "HostBinding",
|
|
@@ -26132,7 +26152,7 @@
|
|
|
26132
26152
|
"defaultValue": "\"group\"",
|
|
26133
26153
|
"deprecated": false,
|
|
26134
26154
|
"deprecationMessage": "",
|
|
26135
|
-
"line":
|
|
26155
|
+
"line": 25,
|
|
26136
26156
|
"type": "string",
|
|
26137
26157
|
"decorators": []
|
|
26138
26158
|
},
|
|
@@ -26140,7 +26160,7 @@
|
|
|
26140
26160
|
"name": "class.cds--menu-item-group",
|
|
26141
26161
|
"deprecated": false,
|
|
26142
26162
|
"deprecationMessage": "",
|
|
26143
|
-
"line":
|
|
26163
|
+
"line": 27,
|
|
26144
26164
|
"type": "boolean",
|
|
26145
26165
|
"decorators": []
|
|
26146
26166
|
},
|
|
@@ -26148,7 +26168,7 @@
|
|
|
26148
26168
|
"name": "class.cds--menu-item-radio-group",
|
|
26149
26169
|
"deprecated": false,
|
|
26150
26170
|
"deprecationMessage": "",
|
|
26151
|
-
"line":
|
|
26171
|
+
"line": 26,
|
|
26152
26172
|
"type": "boolean",
|
|
26153
26173
|
"decorators": []
|
|
26154
26174
|
}
|
|
@@ -26159,7 +26179,7 @@
|
|
|
26159
26179
|
"description": "",
|
|
26160
26180
|
"rawdescription": "\n",
|
|
26161
26181
|
"type": "component",
|
|
26162
|
-
"sourceCode": "import {\n\tComponent,\n\tEventEmitter,\n\tHostBinding,\n\tInput,\n\tOnChanges,\n\tOnDestroy,\n\tOnInit,\n\tOutput,\n\tSimpleChanges\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { ContextMenuSelectionService } from \"./context-menu-selection.service\";\n\n@Component({\n\tselector: \"cds-context-menu-group, ibm-context-menu-group\",\n\ttemplate: `\n\t\t<ng-content />\n\t`,\n\tproviders: [ContextMenuSelectionService]\n})\nexport class ContextMenuGroupComponent implements OnInit, OnChanges, OnDestroy {\n\t@HostBinding(\"attr.role\") role = \"group\";\n\t@HostBinding(\"class.cds--menu-item-radio-group\") get radioGroup() { return this.type === \"radio\"; }\n\t@HostBinding(\"class.cds--menu-item-group\") get group() { return this.type === \"checkbox\"; }\n\n\t@HostBinding(\"attr.aria-label\") @Input() label = null;\n\t@Input() value: any[] = [];\n\t@Input() type: null | \"radio\" | \"checkbox\" = null;\n\t@Output() valueChange = new EventEmitter<any[]>();\n\n\tprivate subscription = new Subscription();\n\n\tconstructor(protected contextMenuSelectionService: ContextMenuSelectionService) { }\n\n\tngOnInit() {\n\t\tconst { selectionObservable } = this.contextMenuSelectionService;\n\t\tconst subscription = selectionObservable.subscribe(value => {\n\t\t\tthis.valueChange.emit(value);\n\t\t});\n\t\tthis.subscription.add(subscription);\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (changes.value) {\n\t\t\tif (this.type === \"radio\") {\n\t\t\t\tthis.contextMenuSelectionService.selectRadio(changes.value.currentValue);\n\t\t\t}\n\n\t\t\tif (this.type === \"checkbox\") {\n\t\t\t\tthis.contextMenuSelectionService.selectCheckboxes(changes.value.currentValue);\n\t\t\t}\n\t\t}\n\t}\n\n\tngOnDestroy() {\n\t\tthis.subscription.unsubscribe();\n\t}\n}\n",
|
|
26182
|
+
"sourceCode": "import {\n\tChangeDetectionStrategy,\n\tComponent,\n\tEventEmitter,\n\tHostBinding,\n\tInput,\n\tOnChanges,\n\tOnDestroy,\n\tOnInit,\n\tOutput,\n\tSimpleChanges\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { ContextMenuSelectionService } from \"./context-menu-selection.service\";\n\n@Component({\n\tselector: \"cds-context-menu-group, ibm-context-menu-group\",\n\ttemplate: `\n\t\t<ng-content />\n\t`,\n\tproviders: [ContextMenuSelectionService],\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ContextMenuGroupComponent implements OnInit, OnChanges, OnDestroy {\n\t@HostBinding(\"attr.role\") role = \"group\";\n\t@HostBinding(\"class.cds--menu-item-radio-group\") get radioGroup() { return this.type === \"radio\"; }\n\t@HostBinding(\"class.cds--menu-item-group\") get group() { return this.type === \"checkbox\"; }\n\n\t@HostBinding(\"attr.aria-label\") @Input() label = null;\n\t@Input() value: any[] = [];\n\t@Input() type: null | \"radio\" | \"checkbox\" = null;\n\t@Output() valueChange = new EventEmitter<any[]>();\n\n\tprivate subscription = new Subscription();\n\n\tconstructor(protected contextMenuSelectionService: ContextMenuSelectionService) { }\n\n\tngOnInit() {\n\t\tconst { selectionObservable } = this.contextMenuSelectionService;\n\t\tconst subscription = selectionObservable.subscribe(value => {\n\t\t\tthis.valueChange.emit(value);\n\t\t});\n\t\tthis.subscription.add(subscription);\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (changes.value) {\n\t\t\tif (this.type === \"radio\") {\n\t\t\t\tthis.contextMenuSelectionService.selectRadio(changes.value.currentValue);\n\t\t\t}\n\n\t\t\tif (this.type === \"checkbox\") {\n\t\t\t\tthis.contextMenuSelectionService.selectCheckboxes(changes.value.currentValue);\n\t\t\t}\n\t\t}\n\t}\n\n\tngOnDestroy() {\n\t\tthis.subscription.unsubscribe();\n\t}\n}\n",
|
|
26163
26183
|
"assetsDirs": [],
|
|
26164
26184
|
"styleUrlsData": "",
|
|
26165
26185
|
"stylesData": "",
|
|
@@ -26176,7 +26196,7 @@
|
|
|
26176
26196
|
"deprecationMessage": ""
|
|
26177
26197
|
}
|
|
26178
26198
|
],
|
|
26179
|
-
"line":
|
|
26199
|
+
"line": 34,
|
|
26180
26200
|
"jsdoctags": [
|
|
26181
26201
|
{
|
|
26182
26202
|
"name": "contextMenuSelectionService",
|
|
@@ -26202,7 +26222,7 @@
|
|
|
26202
26222
|
"name": "radioGroup",
|
|
26203
26223
|
"type": "",
|
|
26204
26224
|
"returnType": "",
|
|
26205
|
-
"line":
|
|
26225
|
+
"line": 26
|
|
26206
26226
|
}
|
|
26207
26227
|
},
|
|
26208
26228
|
"group": {
|
|
@@ -26211,15 +26231,16 @@
|
|
|
26211
26231
|
"name": "group",
|
|
26212
26232
|
"type": "",
|
|
26213
26233
|
"returnType": "",
|
|
26214
|
-
"line":
|
|
26234
|
+
"line": 27
|
|
26215
26235
|
}
|
|
26216
26236
|
}
|
|
26217
26237
|
}
|
|
26218
26238
|
},
|
|
26219
26239
|
{
|
|
26220
26240
|
"name": "ContextMenuItemComponent",
|
|
26221
|
-
"id": "component-ContextMenuItemComponent-
|
|
26241
|
+
"id": "component-ContextMenuItemComponent-54e106aa5da330205a042e399a945953f1b277ebee4cf1c3771d1eb7f12dda4c268413938de8ab21311712ae6d41fc1211454ffcd064838da7b935460ca7a467",
|
|
26222
26242
|
"file": "src/context-menu/context-menu-item.component.ts",
|
|
26243
|
+
"changeDetection": "ChangeDetectionStrategy.OnPush",
|
|
26223
26244
|
"encapsulation": [],
|
|
26224
26245
|
"entryComponents": [],
|
|
26225
26246
|
"inputs": [],
|
|
@@ -26240,7 +26261,7 @@
|
|
|
26240
26261
|
"defaultValue": "false",
|
|
26241
26262
|
"deprecated": false,
|
|
26242
26263
|
"deprecationMessage": "",
|
|
26243
|
-
"line":
|
|
26264
|
+
"line": 62,
|
|
26244
26265
|
"type": "boolean",
|
|
26245
26266
|
"decorators": []
|
|
26246
26267
|
},
|
|
@@ -26249,7 +26270,7 @@
|
|
|
26249
26270
|
"defaultValue": "\"\"",
|
|
26250
26271
|
"deprecated": false,
|
|
26251
26272
|
"deprecationMessage": "",
|
|
26252
|
-
"line":
|
|
26273
|
+
"line": 63,
|
|
26253
26274
|
"type": "string",
|
|
26254
26275
|
"decorators": []
|
|
26255
26276
|
},
|
|
@@ -26258,7 +26279,7 @@
|
|
|
26258
26279
|
"defaultValue": "\"\"",
|
|
26259
26280
|
"deprecated": false,
|
|
26260
26281
|
"deprecationMessage": "",
|
|
26261
|
-
"line":
|
|
26282
|
+
"line": 60,
|
|
26262
26283
|
"type": "string",
|
|
26263
26284
|
"decorators": []
|
|
26264
26285
|
},
|
|
@@ -26267,7 +26288,7 @@
|
|
|
26267
26288
|
"defaultValue": "\"\"",
|
|
26268
26289
|
"deprecated": false,
|
|
26269
26290
|
"deprecationMessage": "",
|
|
26270
|
-
"line":
|
|
26291
|
+
"line": 59,
|
|
26271
26292
|
"type": "string",
|
|
26272
26293
|
"decorators": []
|
|
26273
26294
|
},
|
|
@@ -26276,7 +26297,7 @@
|
|
|
26276
26297
|
"defaultValue": "null",
|
|
26277
26298
|
"deprecated": false,
|
|
26278
26299
|
"deprecationMessage": "",
|
|
26279
|
-
"line":
|
|
26300
|
+
"line": 61,
|
|
26280
26301
|
"type": "null | \"checkbox\" | \"radio\"",
|
|
26281
26302
|
"decorators": []
|
|
26282
26303
|
},
|
|
@@ -26285,7 +26306,7 @@
|
|
|
26285
26306
|
"defaultValue": "\"\"",
|
|
26286
26307
|
"deprecated": false,
|
|
26287
26308
|
"deprecationMessage": "",
|
|
26288
|
-
"line":
|
|
26309
|
+
"line": 64,
|
|
26289
26310
|
"type": "string",
|
|
26290
26311
|
"decorators": []
|
|
26291
26312
|
}
|
|
@@ -26296,7 +26317,7 @@
|
|
|
26296
26317
|
"defaultValue": "new EventEmitter<boolean>()",
|
|
26297
26318
|
"deprecated": false,
|
|
26298
26319
|
"deprecationMessage": "",
|
|
26299
|
-
"line":
|
|
26320
|
+
"line": 65,
|
|
26300
26321
|
"type": "EventEmitter"
|
|
26301
26322
|
}
|
|
26302
26323
|
],
|
|
@@ -26310,7 +26331,7 @@
|
|
|
26310
26331
|
"indexKey": "",
|
|
26311
26332
|
"optional": false,
|
|
26312
26333
|
"description": "",
|
|
26313
|
-
"line":
|
|
26334
|
+
"line": 53,
|
|
26314
26335
|
"decorators": [
|
|
26315
26336
|
{
|
|
26316
26337
|
"name": "HostBinding",
|
|
@@ -26330,7 +26351,7 @@
|
|
|
26330
26351
|
"indexKey": "",
|
|
26331
26352
|
"optional": false,
|
|
26332
26353
|
"description": "",
|
|
26333
|
-
"line":
|
|
26354
|
+
"line": 52,
|
|
26334
26355
|
"decorators": [
|
|
26335
26356
|
{
|
|
26336
26357
|
"name": "HostBinding",
|
|
@@ -26349,7 +26370,7 @@
|
|
|
26349
26370
|
"indexKey": "",
|
|
26350
26371
|
"optional": false,
|
|
26351
26372
|
"description": "",
|
|
26352
|
-
"line":
|
|
26373
|
+
"line": 70,
|
|
26353
26374
|
"decorators": [
|
|
26354
26375
|
{
|
|
26355
26376
|
"name": "ContentChild",
|
|
@@ -26369,7 +26390,7 @@
|
|
|
26369
26390
|
"indexKey": "",
|
|
26370
26391
|
"optional": false,
|
|
26371
26392
|
"description": "",
|
|
26372
|
-
"line":
|
|
26393
|
+
"line": 67
|
|
26373
26394
|
},
|
|
26374
26395
|
{
|
|
26375
26396
|
"name": "optionClass",
|
|
@@ -26380,7 +26401,7 @@
|
|
|
26380
26401
|
"indexKey": "",
|
|
26381
26402
|
"optional": false,
|
|
26382
26403
|
"description": "",
|
|
26383
|
-
"line":
|
|
26404
|
+
"line": 49,
|
|
26384
26405
|
"decorators": [
|
|
26385
26406
|
{
|
|
26386
26407
|
"name": "HostBinding",
|
|
@@ -26400,7 +26421,7 @@
|
|
|
26400
26421
|
"indexKey": "",
|
|
26401
26422
|
"optional": false,
|
|
26402
26423
|
"description": "",
|
|
26403
|
-
"line":
|
|
26424
|
+
"line": 50,
|
|
26404
26425
|
"decorators": [
|
|
26405
26426
|
{
|
|
26406
26427
|
"name": "HostBinding",
|
|
@@ -26420,7 +26441,7 @@
|
|
|
26420
26441
|
"indexKey": "",
|
|
26421
26442
|
"optional": false,
|
|
26422
26443
|
"description": "",
|
|
26423
|
-
"line":
|
|
26444
|
+
"line": 68
|
|
26424
26445
|
},
|
|
26425
26446
|
{
|
|
26426
26447
|
"name": "tabindex",
|
|
@@ -26431,7 +26452,7 @@
|
|
|
26431
26452
|
"indexKey": "",
|
|
26432
26453
|
"optional": false,
|
|
26433
26454
|
"description": "",
|
|
26434
|
-
"line":
|
|
26455
|
+
"line": 51,
|
|
26435
26456
|
"decorators": [
|
|
26436
26457
|
{
|
|
26437
26458
|
"name": "HostBinding",
|
|
@@ -26450,7 +26471,7 @@
|
|
|
26450
26471
|
"optional": false,
|
|
26451
26472
|
"returnType": "void",
|
|
26452
26473
|
"typeParameters": [],
|
|
26453
|
-
"line":
|
|
26474
|
+
"line": 159,
|
|
26454
26475
|
"deprecated": false,
|
|
26455
26476
|
"deprecationMessage": ""
|
|
26456
26477
|
},
|
|
@@ -26460,7 +26481,7 @@
|
|
|
26460
26481
|
"optional": false,
|
|
26461
26482
|
"returnType": "void",
|
|
26462
26483
|
"typeParameters": [],
|
|
26463
|
-
"line":
|
|
26484
|
+
"line": 189,
|
|
26464
26485
|
"deprecated": false,
|
|
26465
26486
|
"deprecationMessage": ""
|
|
26466
26487
|
},
|
|
@@ -26470,7 +26491,7 @@
|
|
|
26470
26491
|
"optional": false,
|
|
26471
26492
|
"returnType": "void",
|
|
26472
26493
|
"typeParameters": [],
|
|
26473
|
-
"line":
|
|
26494
|
+
"line": 185,
|
|
26474
26495
|
"deprecated": false,
|
|
26475
26496
|
"deprecationMessage": "",
|
|
26476
26497
|
"decorators": [
|
|
@@ -26496,7 +26517,7 @@
|
|
|
26496
26517
|
"optional": false,
|
|
26497
26518
|
"returnType": "void",
|
|
26498
26519
|
"typeParameters": [],
|
|
26499
|
-
"line":
|
|
26520
|
+
"line": 121,
|
|
26500
26521
|
"deprecated": false,
|
|
26501
26522
|
"deprecationMessage": "",
|
|
26502
26523
|
"decorators": [
|
|
@@ -26536,7 +26557,7 @@
|
|
|
26536
26557
|
"optional": false,
|
|
26537
26558
|
"returnType": "void",
|
|
26538
26559
|
"typeParameters": [],
|
|
26539
|
-
"line":
|
|
26560
|
+
"line": 177,
|
|
26540
26561
|
"deprecated": false,
|
|
26541
26562
|
"deprecationMessage": "",
|
|
26542
26563
|
"decorators": [
|
|
@@ -26555,7 +26576,7 @@
|
|
|
26555
26576
|
"optional": false,
|
|
26556
26577
|
"returnType": "void",
|
|
26557
26578
|
"typeParameters": [],
|
|
26558
|
-
"line":
|
|
26579
|
+
"line": 172,
|
|
26559
26580
|
"deprecated": false,
|
|
26560
26581
|
"deprecationMessage": "",
|
|
26561
26582
|
"decorators": [
|
|
@@ -26574,7 +26595,7 @@
|
|
|
26574
26595
|
"optional": false,
|
|
26575
26596
|
"returnType": "void",
|
|
26576
26597
|
"typeParameters": [],
|
|
26577
|
-
"line":
|
|
26598
|
+
"line": 167,
|
|
26578
26599
|
"deprecated": false,
|
|
26579
26600
|
"deprecationMessage": "",
|
|
26580
26601
|
"decorators": [
|
|
@@ -26600,7 +26621,7 @@
|
|
|
26600
26621
|
"optional": false,
|
|
26601
26622
|
"returnType": "void",
|
|
26602
26623
|
"typeParameters": [],
|
|
26603
|
-
"line":
|
|
26624
|
+
"line": 143,
|
|
26604
26625
|
"deprecated": false,
|
|
26605
26626
|
"deprecationMessage": "",
|
|
26606
26627
|
"jsdoctags": [
|
|
@@ -26621,7 +26642,7 @@
|
|
|
26621
26642
|
"optional": false,
|
|
26622
26643
|
"returnType": "void",
|
|
26623
26644
|
"typeParameters": [],
|
|
26624
|
-
"line":
|
|
26645
|
+
"line": 148,
|
|
26625
26646
|
"deprecated": false,
|
|
26626
26647
|
"deprecationMessage": ""
|
|
26627
26648
|
}
|
|
@@ -26633,7 +26654,7 @@
|
|
|
26633
26654
|
"name": "attr.aria-checked",
|
|
26634
26655
|
"deprecated": false,
|
|
26635
26656
|
"deprecationMessage": "",
|
|
26636
|
-
"line":
|
|
26657
|
+
"line": 54,
|
|
26637
26658
|
"type": "boolean",
|
|
26638
26659
|
"decorators": []
|
|
26639
26660
|
},
|
|
@@ -26642,7 +26663,7 @@
|
|
|
26642
26663
|
"defaultValue": "null",
|
|
26643
26664
|
"deprecated": false,
|
|
26644
26665
|
"deprecationMessage": "",
|
|
26645
|
-
"line":
|
|
26666
|
+
"line": 53,
|
|
26646
26667
|
"type": "any",
|
|
26647
26668
|
"decorators": []
|
|
26648
26669
|
},
|
|
@@ -26651,7 +26672,7 @@
|
|
|
26651
26672
|
"defaultValue": "null",
|
|
26652
26673
|
"deprecated": false,
|
|
26653
26674
|
"deprecationMessage": "",
|
|
26654
|
-
"line":
|
|
26675
|
+
"line": 52,
|
|
26655
26676
|
"type": "any",
|
|
26656
26677
|
"decorators": []
|
|
26657
26678
|
},
|
|
@@ -26660,7 +26681,7 @@
|
|
|
26660
26681
|
"defaultValue": "\"menuitem\"",
|
|
26661
26682
|
"deprecated": false,
|
|
26662
26683
|
"deprecationMessage": "",
|
|
26663
|
-
"line":
|
|
26684
|
+
"line": 50,
|
|
26664
26685
|
"type": "string",
|
|
26665
26686
|
"decorators": []
|
|
26666
26687
|
},
|
|
@@ -26669,7 +26690,7 @@
|
|
|
26669
26690
|
"defaultValue": "-1",
|
|
26670
26691
|
"deprecated": false,
|
|
26671
26692
|
"deprecationMessage": "",
|
|
26672
|
-
"line":
|
|
26693
|
+
"line": 51,
|
|
26673
26694
|
"type": "number",
|
|
26674
26695
|
"decorators": []
|
|
26675
26696
|
},
|
|
@@ -26678,7 +26699,7 @@
|
|
|
26678
26699
|
"defaultValue": "true",
|
|
26679
26700
|
"deprecated": false,
|
|
26680
26701
|
"deprecationMessage": "",
|
|
26681
|
-
"line":
|
|
26702
|
+
"line": 49,
|
|
26682
26703
|
"type": "boolean",
|
|
26683
26704
|
"decorators": []
|
|
26684
26705
|
}
|
|
@@ -26690,7 +26711,7 @@
|
|
|
26690
26711
|
"argsDecorator": [],
|
|
26691
26712
|
"deprecated": false,
|
|
26692
26713
|
"deprecationMessage": "",
|
|
26693
|
-
"line":
|
|
26714
|
+
"line": 185
|
|
26694
26715
|
},
|
|
26695
26716
|
{
|
|
26696
26717
|
"name": "click",
|
|
@@ -26707,7 +26728,7 @@
|
|
|
26707
26728
|
],
|
|
26708
26729
|
"deprecated": false,
|
|
26709
26730
|
"deprecationMessage": "",
|
|
26710
|
-
"line":
|
|
26731
|
+
"line": 121
|
|
26711
26732
|
},
|
|
26712
26733
|
{
|
|
26713
26734
|
"name": "focus",
|
|
@@ -26715,7 +26736,7 @@
|
|
|
26715
26736
|
"argsDecorator": [],
|
|
26716
26737
|
"deprecated": false,
|
|
26717
26738
|
"deprecationMessage": "",
|
|
26718
|
-
"line":
|
|
26739
|
+
"line": 177
|
|
26719
26740
|
},
|
|
26720
26741
|
{
|
|
26721
26742
|
"name": "keydown.enter",
|
|
@@ -26732,7 +26753,7 @@
|
|
|
26732
26753
|
],
|
|
26733
26754
|
"deprecated": false,
|
|
26734
26755
|
"deprecationMessage": "",
|
|
26735
|
-
"line":
|
|
26756
|
+
"line": 121
|
|
26736
26757
|
},
|
|
26737
26758
|
{
|
|
26738
26759
|
"name": "keydown.space",
|
|
@@ -26749,7 +26770,7 @@
|
|
|
26749
26770
|
],
|
|
26750
26771
|
"deprecated": false,
|
|
26751
26772
|
"deprecationMessage": "",
|
|
26752
|
-
"line":
|
|
26773
|
+
"line": 121
|
|
26753
26774
|
},
|
|
26754
26775
|
{
|
|
26755
26776
|
"name": "mouseout",
|
|
@@ -26757,7 +26778,7 @@
|
|
|
26757
26778
|
"argsDecorator": [],
|
|
26758
26779
|
"deprecated": false,
|
|
26759
26780
|
"deprecationMessage": "",
|
|
26760
|
-
"line":
|
|
26781
|
+
"line": 172
|
|
26761
26782
|
},
|
|
26762
26783
|
{
|
|
26763
26784
|
"name": "mouseover",
|
|
@@ -26765,7 +26786,7 @@
|
|
|
26765
26786
|
"argsDecorator": [],
|
|
26766
26787
|
"deprecated": false,
|
|
26767
26788
|
"deprecationMessage": "",
|
|
26768
|
-
"line":
|
|
26789
|
+
"line": 167
|
|
26769
26790
|
}
|
|
26770
26791
|
],
|
|
26771
26792
|
"standalone": false,
|
|
@@ -26773,7 +26794,7 @@
|
|
|
26773
26794
|
"description": "",
|
|
26774
26795
|
"rawdescription": "\n",
|
|
26775
26796
|
"type": "component",
|
|
26776
|
-
"sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tHostListener,\n\tContentChild,\n\tOptional,\n\tOnInit,\n\tAfterContentInit,\n\tOnDestroy\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { ContextMenuSelectionService } from \"./context-menu-selection.service\";\nimport { ContextMenuComponent } from \"./context-menu.component\";\n\n@Component({\n\tselector: \"cds-context-menu-item, ibm-context-menu-item\",\n\ttemplate: `\n\t\t<div class=\"cds--menu-item__icon\">\n\t\t\t@if (selectable && checked) {\n\t\t\t\t<svg cdsIcon=\"checkmark\" size=\"16\"></svg>\n\t\t\t} @else if (!selectable && icon) {\n\t\t\t\t<svg [cdsIcon]=\"icon\" size=\"16\"></svg>\n\t\t\t}\n\t\t</div>\n\t\t<div class=\"cds--menu-item__label\" [title]=\"label\">{{label}}</div>\n\t\t<div class=\"cds--menu-item__shortcut\">\n\t\t\t@if (info) {\n\t\t\t\t{{info}}\n\t\t\t}\n\t\t\t@if (hasChildren) {\n\t\t\t\t<svg cdsIcon=\"caret--right\" size=\"16\"></svg>\n\t\t\t}\n\t\t</div>\n\t\t<ng-content />\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tgrid-template-columns: 1rem 1fr max-content;\n\t\t}\n\t`]\n})\nexport class ContextMenuItemComponent implements OnInit, AfterContentInit, OnDestroy {\n\t@HostBinding(\"class.cds--menu-item\") optionClass = true;\n\t@HostBinding(\"attr.role\") role = \"menuitem\";\n\t@HostBinding(\"attr.tabindex\") tabindex = -1;\n\t@HostBinding(\"attr.aria-haspopup\") ariaHasPopup = null;\n\t@HostBinding(\"attr.aria-expanded\") ariaExpanded = null;\n\t@HostBinding(\"attr.aria-checked\") get ariaChecked() {\n\t\treturn this.type === \"checkbox\" ?\n\t\t\t(this.checked ? true : false) : null;\n\t}\n\n\t@Input() label = \"\";\n\t@Input() info = \"\";\n\t@Input() type: null | \"checkbox\" | \"radio\" = null;\n\t@Input() checked = false;\n\t@Input() icon = \"\";\n\t@Input() value = \"\";\n\t@Output() checkedChange = new EventEmitter<boolean>();\n\n\thasChildren = false;\n\tselectable = false;\n\n\t@ContentChild(ContextMenuComponent, { static: true }) childContextMenu: ContextMenuComponent;\n\tprivate subscriptions = new Subscription();\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\t@Optional() protected contextMenuSelectionService: ContextMenuSelectionService\n\t) { }\n\n\tngOnInit() {\n\t\tswitch (this.type) {\n\t\t\tcase \"checkbox\": {\n\t\t\t\tthis.role = \"menuitemcheckbox\";\n\t\t\t\tthis.selectable = true;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"radio\": {\n\t\t\t\tthis.role = \"menuitemradio\";\n\t\t\t\tthis.selectable = true;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tdefault: {\n\t\t\t\tthis.role = \"menuitem\";\n\t\t\t}\n\t\t}\n\n\t\tif (this.type && this.contextMenuSelectionService && this.value) {\n\t\t\tconst { selectionObservable } = this.contextMenuSelectionService;\n\t\t\tconst subscription = selectionObservable.subscribe((value) => {\n\t\t\t\tif (this.type === \"radio\") {\n\t\t\t\t\tthis.handleSelection(value === this.value);\n\t\t\t\t}\n\n\t\t\t\tif (this.type === \"checkbox\") {\n\t\t\t\t\tthis.handleSelection(value.includes(this.value));\n\t\t\t\t}\n\t\t\t});\n\t\t\tthis.subscriptions.add(subscription);\n\t\t}\n\t}\n\n\tngAfterContentInit() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.hasChildren = true;\n\t\t\tthis.ariaHasPopup = true;\n\t\t\tthis.ariaExpanded = false;\n\t\t}\n\t}\n\n\t@HostListener(\"keydown.enter\", [\"$event\"])\n\t@HostListener(\"keydown.space\", [\"$event\"])\n\t@HostListener(\"click\", [\"$event\"])\n\thandleClick(event: MouseEvent & KeyboardEvent) {\n\t\tevent.stopPropagation();\n\t\tif (this.hasChildren) {\n\t\t\tthis.openSubMenu();\n\t\t\tthis.childContextMenu.focusMenu();\n\t\t}\n\n\t\tif (this.type) {\n\t\t\tthis.handleSelection(!this.checked);\n\t\t}\n\n\t\tif (this.contextMenuSelectionService) {\n\t\t\tif (this.type === \"radio\") {\n\t\t\t\tthis.contextMenuSelectionService.selectRadio(this.value);\n\t\t\t}\n\n\t\t\tif (this.type === \"checkbox\") {\n\t\t\t\tthis.contextMenuSelectionService.selectCheckbox(this.value);\n\t\t\t}\n\t\t}\n\t}\n\n\thandleSelection(selected: boolean) {\n\t\tthis.checked = selected;\n\t\tthis.checkedChange.emit(this.checked);\n\t}\n\n\topenSubMenu() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.childContextMenu.open = true;\n\t\t\tthis.ariaExpanded = true;\n\t\t\tconst dimensions = this.elementRef.nativeElement.getBoundingClientRect();\n\t\t\tthis.childContextMenu.position.left = dimensions.left + dimensions.width;\n\t\t\t// subtract 4px to account for margins\n\t\t\tthis.childContextMenu.position.top = dimensions.top - 4;\n\t\t}\n\t}\n\n\tcloseSubMenu() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.childContextMenu.open = false;\n\t\t\tthis.ariaExpanded = false;\n\t\t}\n\t}\n\n\t@HostListener(\"mouseover\")\n\thandleMouseOver() {\n\t\tthis.openSubMenu();\n\t}\n\n\t@HostListener(\"mouseout\")\n\thandleMouseOut() {\n\t\tthis.closeSubMenu();\n\t}\n\n\t@HostListener(\"focus\")\n\thandleFocus() {\n\t\tthis.tabindex = 0;\n\t\tif (this.hasChildren && this.ariaExpanded) {\n\t\t\tthis.closeSubMenu();\n\t\t}\n\t}\n\n\t@HostListener(\"blur\")\n\thandleBlur() {\n\t\tthis.tabindex = -1;\n\t}\n\n\tfocusItem() {\n\t\tthis.elementRef.nativeElement.focus();\n\t}\n\n\tngOnDestroy() {\n\t\tthis.subscriptions.unsubscribe();\n\t}\n}\n",
|
|
26797
|
+
"sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tHostListener,\n\tContentChild,\n\tOptional,\n\tOnInit,\n\tAfterContentInit,\n\tOnDestroy,\n\tChangeDetectionStrategy\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { ContextMenuSelectionService } from \"./context-menu-selection.service\";\nimport { ContextMenuComponent } from \"./context-menu.component\";\n\n@Component({\n\tselector: \"cds-context-menu-item, ibm-context-menu-item\",\n\ttemplate: `\n\t\t<div class=\"cds--menu-item__icon\">\n\t\t\t@if (selectable && checked) {\n\t\t\t\t<svg cdsIcon=\"checkmark\" size=\"16\"></svg>\n\t\t\t} @else if (!selectable && icon) {\n\t\t\t\t<svg [cdsIcon]=\"icon\" size=\"16\"></svg>\n\t\t\t}\n\t\t</div>\n\t\t<div class=\"cds--menu-item__label\" [title]=\"label\">{{label}}</div>\n\t\t<div class=\"cds--menu-item__shortcut\">\n\t\t\t@if (info) {\n\t\t\t\t{{info}}\n\t\t\t}\n\t\t\t@if (hasChildren) {\n\t\t\t\t<svg cdsIcon=\"caret--right\" size=\"16\"></svg>\n\t\t\t}\n\t\t</div>\n\t\t<ng-content />\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tgrid-template-columns: 1rem 1fr max-content;\n\t\t}\n\t`],\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ContextMenuItemComponent implements OnInit, AfterContentInit, OnDestroy {\n\t@HostBinding(\"class.cds--menu-item\") optionClass = true;\n\t@HostBinding(\"attr.role\") role = \"menuitem\";\n\t@HostBinding(\"attr.tabindex\") tabindex = -1;\n\t@HostBinding(\"attr.aria-haspopup\") ariaHasPopup = null;\n\t@HostBinding(\"attr.aria-expanded\") ariaExpanded = null;\n\t@HostBinding(\"attr.aria-checked\") get ariaChecked() {\n\t\treturn this.type === \"checkbox\" ?\n\t\t\t(this.checked ? true : false) : null;\n\t}\n\n\t@Input() label = \"\";\n\t@Input() info = \"\";\n\t@Input() type: null | \"checkbox\" | \"radio\" = null;\n\t@Input() checked = false;\n\t@Input() icon = \"\";\n\t@Input() value = \"\";\n\t@Output() checkedChange = new EventEmitter<boolean>();\n\n\thasChildren = false;\n\tselectable = false;\n\n\t@ContentChild(ContextMenuComponent, { static: true }) childContextMenu: ContextMenuComponent;\n\tprivate subscriptions = new Subscription();\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\t@Optional() protected contextMenuSelectionService: ContextMenuSelectionService\n\t) { }\n\n\tngOnInit() {\n\t\tswitch (this.type) {\n\t\t\tcase \"checkbox\": {\n\t\t\t\tthis.role = \"menuitemcheckbox\";\n\t\t\t\tthis.selectable = true;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"radio\": {\n\t\t\t\tthis.role = \"menuitemradio\";\n\t\t\t\tthis.selectable = true;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tdefault: {\n\t\t\t\tthis.role = \"menuitem\";\n\t\t\t}\n\t\t}\n\n\t\tif (this.type && this.contextMenuSelectionService && this.value) {\n\t\t\tconst { selectionObservable } = this.contextMenuSelectionService;\n\t\t\tconst subscription = selectionObservable.subscribe((value) => {\n\t\t\t\tif (this.type === \"radio\") {\n\t\t\t\t\tthis.handleSelection(value === this.value);\n\t\t\t\t}\n\n\t\t\t\tif (this.type === \"checkbox\") {\n\t\t\t\t\tthis.handleSelection(value.includes(this.value));\n\t\t\t\t}\n\t\t\t});\n\t\t\tthis.subscriptions.add(subscription);\n\t\t}\n\t}\n\n\tngAfterContentInit() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.hasChildren = true;\n\t\t\tthis.ariaHasPopup = true;\n\t\t\tthis.ariaExpanded = false;\n\t\t}\n\t}\n\n\t@HostListener(\"keydown.enter\", [\"$event\"])\n\t@HostListener(\"keydown.space\", [\"$event\"])\n\t@HostListener(\"click\", [\"$event\"])\n\thandleClick(event: MouseEvent & KeyboardEvent) {\n\t\tevent.stopPropagation();\n\t\tif (this.hasChildren) {\n\t\t\tthis.openSubMenu();\n\t\t\tthis.childContextMenu.focusMenu();\n\t\t}\n\n\t\tif (this.type) {\n\t\t\tthis.handleSelection(!this.checked);\n\t\t}\n\n\t\tif (this.contextMenuSelectionService) {\n\t\t\tif (this.type === \"radio\") {\n\t\t\t\tthis.contextMenuSelectionService.selectRadio(this.value);\n\t\t\t}\n\n\t\t\tif (this.type === \"checkbox\") {\n\t\t\t\tthis.contextMenuSelectionService.selectCheckbox(this.value);\n\t\t\t}\n\t\t}\n\t}\n\n\thandleSelection(selected: boolean) {\n\t\tthis.checked = selected;\n\t\tthis.checkedChange.emit(this.checked);\n\t}\n\n\topenSubMenu() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.childContextMenu.open = true;\n\t\t\tthis.ariaExpanded = true;\n\t\t\tconst dimensions = this.elementRef.nativeElement.getBoundingClientRect();\n\t\t\tthis.childContextMenu.position.left = dimensions.left + dimensions.width;\n\t\t\t// subtract 4px to account for margins\n\t\t\tthis.childContextMenu.position.top = dimensions.top - 4;\n\t\t}\n\t}\n\n\tcloseSubMenu() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.childContextMenu.open = false;\n\t\t\tthis.ariaExpanded = false;\n\t\t}\n\t}\n\n\t@HostListener(\"mouseover\")\n\thandleMouseOver() {\n\t\tthis.openSubMenu();\n\t}\n\n\t@HostListener(\"mouseout\")\n\thandleMouseOut() {\n\t\tthis.closeSubMenu();\n\t}\n\n\t@HostListener(\"focus\")\n\thandleFocus() {\n\t\tthis.tabindex = 0;\n\t\tif (this.hasChildren && this.ariaExpanded) {\n\t\t\tthis.closeSubMenu();\n\t\t}\n\t}\n\n\t@HostListener(\"blur\")\n\thandleBlur() {\n\t\tthis.tabindex = -1;\n\t}\n\n\tfocusItem() {\n\t\tthis.elementRef.nativeElement.focus();\n\t}\n\n\tngOnDestroy() {\n\t\tthis.subscriptions.unsubscribe();\n\t}\n}\n",
|
|
26777
26798
|
"assetsDirs": [],
|
|
26778
26799
|
"styleUrlsData": "",
|
|
26779
26800
|
"stylesData": "\n\t\t:host {\n\t\t\tgrid-template-columns: 1rem 1fr max-content;\n\t\t}\n\t\n",
|
|
@@ -26796,7 +26817,7 @@
|
|
|
26796
26817
|
"deprecationMessage": ""
|
|
26797
26818
|
}
|
|
26798
26819
|
],
|
|
26799
|
-
"line":
|
|
26820
|
+
"line": 71,
|
|
26800
26821
|
"jsdoctags": [
|
|
26801
26822
|
{
|
|
26802
26823
|
"name": "elementRef",
|
|
@@ -26831,7 +26852,7 @@
|
|
|
26831
26852
|
"name": "ariaChecked",
|
|
26832
26853
|
"type": "",
|
|
26833
26854
|
"returnType": "",
|
|
26834
|
-
"line":
|
|
26855
|
+
"line": 54
|
|
26835
26856
|
}
|
|
26836
26857
|
}
|
|
26837
26858
|
}
|
|
@@ -26932,8 +26953,9 @@
|
|
|
26932
26953
|
},
|
|
26933
26954
|
{
|
|
26934
26955
|
"name": "DatePicker",
|
|
26935
|
-
"id": "component-DatePicker-
|
|
26956
|
+
"id": "component-DatePicker-69b4c4ad390afd67c20541972e372891be766bd202bc8e4e58ff7532aa5263bac753b9e0a33031020114bf8f3a81cc717ec92bd8718f79e668ac47609f4834c7",
|
|
26936
26957
|
"file": "src/datepicker/datepicker.component.ts",
|
|
26958
|
+
"changeDetection": "ChangeDetectionStrategy.OnPush",
|
|
26937
26959
|
"encapsulation": [
|
|
26938
26960
|
"ViewEncapsulation.None"
|
|
26939
26961
|
],
|
|
@@ -26960,7 +26982,7 @@
|
|
|
26960
26982
|
"deprecationMessage": "",
|
|
26961
26983
|
"rawdescription": "\n\nAria label added to datepicker's calendar container.\n",
|
|
26962
26984
|
"description": "<p>Aria label added to datepicker's calendar container.</p>\n",
|
|
26963
|
-
"line":
|
|
26985
|
+
"line": 165,
|
|
26964
26986
|
"type": "string",
|
|
26965
26987
|
"decorators": []
|
|
26966
26988
|
},
|
|
@@ -26971,7 +26993,7 @@
|
|
|
26971
26993
|
"deprecationMessage": "",
|
|
26972
26994
|
"rawdescription": "\n\nFormat of date\n\nFor reference: https://flatpickr.js.org/formatting/\n",
|
|
26973
26995
|
"description": "<p>Format of date</p>\n<p>For reference: <a href=\"https://flatpickr.js.org/formatting/\">https://flatpickr.js.org/formatting/</a></p>\n",
|
|
26974
|
-
"line":
|
|
26996
|
+
"line": 145,
|
|
26975
26997
|
"type": "string",
|
|
26976
26998
|
"decorators": []
|
|
26977
26999
|
},
|
|
@@ -26980,7 +27002,7 @@
|
|
|
26980
27002
|
"defaultValue": "false",
|
|
26981
27003
|
"deprecated": false,
|
|
26982
27004
|
"deprecationMessage": "",
|
|
26983
|
-
"line":
|
|
27005
|
+
"line": 191,
|
|
26984
27006
|
"type": "boolean",
|
|
26985
27007
|
"decorators": []
|
|
26986
27008
|
},
|
|
@@ -26988,7 +27010,7 @@
|
|
|
26988
27010
|
"name": "flatpickrOptions",
|
|
26989
27011
|
"deprecated": false,
|
|
26990
27012
|
"deprecationMessage": "",
|
|
26991
|
-
"line":
|
|
27013
|
+
"line": 234,
|
|
26992
27014
|
"type": "Partial<Options>",
|
|
26993
27015
|
"decorators": []
|
|
26994
27016
|
},
|
|
@@ -26996,7 +27018,7 @@
|
|
|
26996
27018
|
"name": "helperText",
|
|
26997
27019
|
"deprecated": false,
|
|
26998
27020
|
"deprecationMessage": "",
|
|
26999
|
-
"line":
|
|
27021
|
+
"line": 156,
|
|
27000
27022
|
"type": "string | TemplateRef<any>",
|
|
27001
27023
|
"decorators": []
|
|
27002
27024
|
},
|
|
@@ -27005,7 +27027,7 @@
|
|
|
27005
27027
|
"defaultValue": "`datepicker-${DatePicker.datePickerCount++}`",
|
|
27006
27028
|
"deprecated": false,
|
|
27007
27029
|
"deprecationMessage": "",
|
|
27008
|
-
"line":
|
|
27030
|
+
"line": 172,
|
|
27009
27031
|
"type": "string",
|
|
27010
27032
|
"decorators": []
|
|
27011
27033
|
},
|
|
@@ -27016,7 +27038,7 @@
|
|
|
27016
27038
|
"deprecationMessage": "",
|
|
27017
27039
|
"rawdescription": "\n\nThe pattern for the underlying input element\n",
|
|
27018
27040
|
"description": "<p>The pattern for the underlying input element</p>\n",
|
|
27019
|
-
"line":
|
|
27041
|
+
"line": 170,
|
|
27020
27042
|
"type": "string",
|
|
27021
27043
|
"decorators": []
|
|
27022
27044
|
},
|
|
@@ -27027,7 +27049,7 @@
|
|
|
27027
27049
|
"deprecationMessage": "",
|
|
27028
27050
|
"rawdescription": "\n\nSet to `true` to display the invalid state.\n",
|
|
27029
27051
|
"description": "<p>Set to <code>true</code> to display the invalid state.</p>\n",
|
|
27030
|
-
"line":
|
|
27052
|
+
"line": 197,
|
|
27031
27053
|
"type": "boolean",
|
|
27032
27054
|
"decorators": []
|
|
27033
27055
|
},
|
|
@@ -27037,7 +27059,7 @@
|
|
|
27037
27059
|
"deprecationMessage": "",
|
|
27038
27060
|
"rawdescription": "\n\nValue displayed if datepicker is in an invalid state.\n",
|
|
27039
27061
|
"description": "<p>Value displayed if datepicker is in an invalid state.</p>\n",
|
|
27040
|
-
"line":
|
|
27062
|
+
"line": 201,
|
|
27041
27063
|
"type": "string | TemplateRef<any>",
|
|
27042
27064
|
"decorators": []
|
|
27043
27065
|
},
|
|
@@ -27045,7 +27067,7 @@
|
|
|
27045
27067
|
"name": "label",
|
|
27046
27068
|
"deprecated": false,
|
|
27047
27069
|
"deprecationMessage": "",
|
|
27048
|
-
"line":
|
|
27070
|
+
"line": 155,
|
|
27049
27071
|
"type": "string | TemplateRef<any>",
|
|
27050
27072
|
"decorators": []
|
|
27051
27073
|
},
|
|
@@ -27056,7 +27078,7 @@
|
|
|
27056
27078
|
"deprecationMessage": "",
|
|
27057
27079
|
"rawdescription": "\n\nLanguage of the flatpickr calendar.\n\nFor reference of the possible locales:\nhttps://github.com/flatpickr/flatpickr/blob/master/src/l10n/index.ts\n",
|
|
27058
27080
|
"description": "<p>Language of the flatpickr calendar.</p>\n<p>For reference of the possible locales:\n<a href=\"https://github.com/flatpickr/flatpickr/blob/master/src/l10n/index.ts\">https://github.com/flatpickr/flatpickr/blob/master/src/l10n/index.ts</a></p>\n",
|
|
27059
|
-
"line":
|
|
27081
|
+
"line": 153,
|
|
27060
27082
|
"type": "string",
|
|
27061
27083
|
"decorators": []
|
|
27062
27084
|
},
|
|
@@ -27065,7 +27087,7 @@
|
|
|
27065
27087
|
"defaultValue": "\"mm/dd/yyyy\"",
|
|
27066
27088
|
"deprecated": false,
|
|
27067
27089
|
"deprecationMessage": "",
|
|
27068
|
-
"line":
|
|
27090
|
+
"line": 160,
|
|
27069
27091
|
"type": "string",
|
|
27070
27092
|
"decorators": []
|
|
27071
27093
|
},
|
|
@@ -27074,7 +27096,7 @@
|
|
|
27074
27096
|
"defaultValue": "[]",
|
|
27075
27097
|
"deprecated": false,
|
|
27076
27098
|
"deprecationMessage": "",
|
|
27077
|
-
"line":
|
|
27099
|
+
"line": 231,
|
|
27078
27100
|
"type": "{}",
|
|
27079
27101
|
"decorators": []
|
|
27080
27102
|
},
|
|
@@ -27085,7 +27107,7 @@
|
|
|
27085
27107
|
"deprecationMessage": "",
|
|
27086
27108
|
"rawdescription": "\n\nSelect calendar range mode\n",
|
|
27087
27109
|
"description": "<p>Select calendar range mode</p>\n",
|
|
27088
|
-
"line":
|
|
27110
|
+
"line": 138,
|
|
27089
27111
|
"type": "boolean",
|
|
27090
27112
|
"decorators": []
|
|
27091
27113
|
},
|
|
@@ -27093,7 +27115,7 @@
|
|
|
27093
27115
|
"name": "rangeHelperText",
|
|
27094
27116
|
"deprecated": false,
|
|
27095
27117
|
"deprecationMessage": "",
|
|
27096
|
-
"line":
|
|
27118
|
+
"line": 157,
|
|
27097
27119
|
"type": "string | TemplateRef<any>",
|
|
27098
27120
|
"decorators": []
|
|
27099
27121
|
},
|
|
@@ -27104,7 +27126,7 @@
|
|
|
27104
27126
|
"deprecationMessage": "",
|
|
27105
27127
|
"rawdescription": "\n\nSet to `true` to display the invalid state for the second datepicker input.\n",
|
|
27106
27128
|
"description": "<p>Set to <code>true</code> to display the invalid state for the second datepicker input.</p>\n",
|
|
27107
|
-
"line":
|
|
27129
|
+
"line": 215,
|
|
27108
27130
|
"type": "boolean",
|
|
27109
27131
|
"decorators": []
|
|
27110
27132
|
},
|
|
@@ -27114,7 +27136,7 @@
|
|
|
27114
27136
|
"deprecationMessage": "",
|
|
27115
27137
|
"rawdescription": "\n\nValue displayed if the second datepicker input is in an invalid state.\n",
|
|
27116
27138
|
"description": "<p>Value displayed if the second datepicker input is in an invalid state.</p>\n",
|
|
27117
|
-
"line":
|
|
27139
|
+
"line": 219,
|
|
27118
27140
|
"type": "string | TemplateRef<any>",
|
|
27119
27141
|
"decorators": []
|
|
27120
27142
|
},
|
|
@@ -27122,7 +27144,7 @@
|
|
|
27122
27144
|
"name": "rangeLabel",
|
|
27123
27145
|
"deprecated": false,
|
|
27124
27146
|
"deprecationMessage": "",
|
|
27125
|
-
"line":
|
|
27147
|
+
"line": 158,
|
|
27126
27148
|
"type": "string",
|
|
27127
27149
|
"decorators": []
|
|
27128
27150
|
},
|
|
@@ -27133,7 +27155,7 @@
|
|
|
27133
27155
|
"deprecationMessage": "",
|
|
27134
27156
|
"rawdescription": "\n\nSet to `true` to show a warning in the second datepicker input (contents set by rangeWarningText)\n",
|
|
27135
27157
|
"description": "<p>Set to <code>true</code> to show a warning in the second datepicker input (contents set by rangeWarningText)</p>\n",
|
|
27136
|
-
"line":
|
|
27158
|
+
"line": 223,
|
|
27137
27159
|
"type": "boolean",
|
|
27138
27160
|
"decorators": []
|
|
27139
27161
|
},
|
|
@@ -27143,7 +27165,7 @@
|
|
|
27143
27165
|
"deprecationMessage": "",
|
|
27144
27166
|
"rawdescription": "\n\nSets the warning text for the second datepicker input\n",
|
|
27145
27167
|
"description": "<p>Sets the warning text for the second datepicker input</p>\n",
|
|
27146
|
-
"line":
|
|
27168
|
+
"line": 227,
|
|
27147
27169
|
"type": "string | TemplateRef<any>",
|
|
27148
27170
|
"decorators": []
|
|
27149
27171
|
},
|
|
@@ -27152,7 +27174,7 @@
|
|
|
27152
27174
|
"defaultValue": "false",
|
|
27153
27175
|
"deprecated": false,
|
|
27154
27176
|
"deprecationMessage": "",
|
|
27155
|
-
"line":
|
|
27177
|
+
"line": 193,
|
|
27156
27178
|
"type": "boolean",
|
|
27157
27179
|
"decorators": []
|
|
27158
27180
|
},
|
|
@@ -27161,7 +27183,7 @@
|
|
|
27161
27183
|
"defaultValue": "\"md\"",
|
|
27162
27184
|
"deprecated": false,
|
|
27163
27185
|
"deprecationMessage": "",
|
|
27164
|
-
"line":
|
|
27186
|
+
"line": 211,
|
|
27165
27187
|
"type": "\"sm\" | \"md\" | \"lg\"",
|
|
27166
27188
|
"decorators": []
|
|
27167
27189
|
},
|
|
@@ -27170,7 +27192,7 @@
|
|
|
27170
27192
|
"defaultValue": "false",
|
|
27171
27193
|
"deprecated": false,
|
|
27172
27194
|
"deprecationMessage": "",
|
|
27173
|
-
"line":
|
|
27195
|
+
"line": 229,
|
|
27174
27196
|
"type": "boolean",
|
|
27175
27197
|
"decorators": []
|
|
27176
27198
|
},
|
|
@@ -27181,16 +27203,16 @@
|
|
|
27181
27203
|
"deprecationMessage": "since v5 - Use `cdsLayer` directive instead\nSet to `\"light\"` to apply the light style",
|
|
27182
27204
|
"jsdoctags": [
|
|
27183
27205
|
{
|
|
27184
|
-
"pos":
|
|
27185
|
-
"end":
|
|
27206
|
+
"pos": 4743,
|
|
27207
|
+
"end": 4847,
|
|
27186
27208
|
"kind": 331,
|
|
27187
27209
|
"id": 0,
|
|
27188
27210
|
"flags": 16842752,
|
|
27189
27211
|
"modifierFlagsCache": 0,
|
|
27190
27212
|
"transformFlags": 0,
|
|
27191
27213
|
"tagName": {
|
|
27192
|
-
"pos":
|
|
27193
|
-
"end":
|
|
27214
|
+
"pos": 4744,
|
|
27215
|
+
"end": 4754,
|
|
27194
27216
|
"kind": 80,
|
|
27195
27217
|
"id": 0,
|
|
27196
27218
|
"flags": 16842752,
|
|
@@ -27200,7 +27222,7 @@
|
|
|
27200
27222
|
"comment": "<p>since v5 - Use <code>cdsLayer</code> directive instead\nSet to <code>"light"</code> to apply the light style</p>\n"
|
|
27201
27223
|
}
|
|
27202
27224
|
],
|
|
27203
|
-
"line":
|
|
27225
|
+
"line": 189,
|
|
27204
27226
|
"type": "\"light\" | \"dark\"",
|
|
27205
27227
|
"decorators": []
|
|
27206
27228
|
},
|
|
@@ -27208,7 +27230,7 @@
|
|
|
27208
27230
|
"name": "value",
|
|
27209
27231
|
"deprecated": false,
|
|
27210
27232
|
"deprecationMessage": "",
|
|
27211
|
-
"line":
|
|
27233
|
+
"line": 174,
|
|
27212
27234
|
"type": "[]",
|
|
27213
27235
|
"decorators": []
|
|
27214
27236
|
},
|
|
@@ -27219,7 +27241,7 @@
|
|
|
27219
27241
|
"deprecationMessage": "",
|
|
27220
27242
|
"rawdescription": "\n\nSet to `true` to show a warning (contents set by warningText)\n",
|
|
27221
27243
|
"description": "<p>Set to <code>true</code> to show a warning (contents set by warningText)</p>\n",
|
|
27222
|
-
"line":
|
|
27244
|
+
"line": 205,
|
|
27223
27245
|
"type": "boolean",
|
|
27224
27246
|
"decorators": []
|
|
27225
27247
|
},
|
|
@@ -27229,7 +27251,7 @@
|
|
|
27229
27251
|
"deprecationMessage": "",
|
|
27230
27252
|
"rawdescription": "\n\nSets the warning text\n",
|
|
27231
27253
|
"description": "<p>Sets the warning text</p>\n",
|
|
27232
|
-
"line":
|
|
27254
|
+
"line": 209,
|
|
27233
27255
|
"type": "string | TemplateRef<any>",
|
|
27234
27256
|
"decorators": []
|
|
27235
27257
|
}
|
|
@@ -27242,7 +27264,7 @@
|
|
|
27242
27264
|
"deprecationMessage": "",
|
|
27243
27265
|
"rawdescription": "\n\nWe are overriding onClose event even if users pass it via flatpickr options\nEmits an event when date picker closes\n",
|
|
27244
27266
|
"description": "<p>We are overriding onClose event even if users pass it via flatpickr options\nEmits an event when date picker closes</p>\n",
|
|
27245
|
-
"line":
|
|
27267
|
+
"line": 263,
|
|
27246
27268
|
"type": "EventEmitter<any>"
|
|
27247
27269
|
},
|
|
27248
27270
|
{
|
|
@@ -27250,7 +27272,7 @@
|
|
|
27250
27272
|
"defaultValue": "new EventEmitter()",
|
|
27251
27273
|
"deprecated": false,
|
|
27252
27274
|
"deprecationMessage": "",
|
|
27253
|
-
"line":
|
|
27275
|
+
"line": 257,
|
|
27254
27276
|
"type": "EventEmitter<any>"
|
|
27255
27277
|
}
|
|
27256
27278
|
],
|
|
@@ -27263,7 +27285,7 @@
|
|
|
27263
27285
|
"indexKey": "",
|
|
27264
27286
|
"optional": false,
|
|
27265
27287
|
"description": "",
|
|
27266
|
-
"line":
|
|
27288
|
+
"line": 254,
|
|
27267
27289
|
"decorators": [
|
|
27268
27290
|
{
|
|
27269
27291
|
"name": "ViewChild",
|
|
@@ -27283,7 +27305,7 @@
|
|
|
27283
27305
|
"indexKey": "",
|
|
27284
27306
|
"optional": false,
|
|
27285
27307
|
"description": "",
|
|
27286
|
-
"line":
|
|
27308
|
+
"line": 418
|
|
27287
27309
|
},
|
|
27288
27310
|
{
|
|
27289
27311
|
"name": "propagateChange",
|
|
@@ -27294,7 +27316,7 @@
|
|
|
27294
27316
|
"indexKey": "",
|
|
27295
27317
|
"optional": false,
|
|
27296
27318
|
"description": "",
|
|
27297
|
-
"line":
|
|
27319
|
+
"line": 420
|
|
27298
27320
|
},
|
|
27299
27321
|
{
|
|
27300
27322
|
"name": "rangeInput",
|
|
@@ -27304,7 +27326,7 @@
|
|
|
27304
27326
|
"indexKey": "",
|
|
27305
27327
|
"optional": false,
|
|
27306
27328
|
"description": "",
|
|
27307
|
-
"line":
|
|
27329
|
+
"line": 255,
|
|
27308
27330
|
"decorators": [
|
|
27309
27331
|
{
|
|
27310
27332
|
"name": "ViewChild",
|
|
@@ -27323,7 +27345,7 @@
|
|
|
27323
27345
|
"optional": false,
|
|
27324
27346
|
"returnType": "void",
|
|
27325
27347
|
"typeParameters": [],
|
|
27326
|
-
"line":
|
|
27348
|
+
"line": 367,
|
|
27327
27349
|
"deprecated": false,
|
|
27328
27350
|
"deprecationMessage": "",
|
|
27329
27351
|
"decorators": [
|
|
@@ -27342,7 +27364,7 @@
|
|
|
27342
27364
|
"optional": false,
|
|
27343
27365
|
"returnType": "void",
|
|
27344
27366
|
"typeParameters": [],
|
|
27345
|
-
"line":
|
|
27367
|
+
"line": 382,
|
|
27346
27368
|
"deprecated": false,
|
|
27347
27369
|
"deprecationMessage": "",
|
|
27348
27370
|
"decorators": [
|
|
@@ -27368,7 +27390,7 @@
|
|
|
27368
27390
|
"optional": false,
|
|
27369
27391
|
"returnType": "void",
|
|
27370
27392
|
"typeParameters": [],
|
|
27371
|
-
"line":
|
|
27393
|
+
"line": 448,
|
|
27372
27394
|
"deprecated": false,
|
|
27373
27395
|
"deprecationMessage": "",
|
|
27374
27396
|
"rawdescription": "\n\nHandles the `valueChange` event from the range input\n",
|
|
@@ -27398,7 +27420,7 @@
|
|
|
27398
27420
|
"optional": false,
|
|
27399
27421
|
"returnType": "void",
|
|
27400
27422
|
"typeParameters": [],
|
|
27401
|
-
"line":
|
|
27423
|
+
"line": 433,
|
|
27402
27424
|
"deprecated": false,
|
|
27403
27425
|
"deprecationMessage": "",
|
|
27404
27426
|
"rawdescription": "\n\nHandles the `valueChange` event from the primary/single input\n",
|
|
@@ -27428,7 +27450,7 @@
|
|
|
27428
27450
|
"optional": false,
|
|
27429
27451
|
"returnType": "void",
|
|
27430
27452
|
"typeParameters": [],
|
|
27431
|
-
"line":
|
|
27453
|
+
"line": 459,
|
|
27432
27454
|
"deprecated": false,
|
|
27433
27455
|
"deprecationMessage": "",
|
|
27434
27456
|
"rawdescription": "\n\nHandles opening the calendar \"properly\" when the calendar icon is clicked.\n",
|
|
@@ -27458,7 +27480,7 @@
|
|
|
27458
27480
|
"optional": false,
|
|
27459
27481
|
"returnType": "void",
|
|
27460
27482
|
"typeParameters": [],
|
|
27461
|
-
"line":
|
|
27483
|
+
"line": 410,
|
|
27462
27484
|
"deprecated": false,
|
|
27463
27485
|
"deprecationMessage": "",
|
|
27464
27486
|
"jsdoctags": [
|
|
@@ -27486,7 +27508,7 @@
|
|
|
27486
27508
|
"optional": false,
|
|
27487
27509
|
"returnType": "void",
|
|
27488
27510
|
"typeParameters": [],
|
|
27489
|
-
"line":
|
|
27511
|
+
"line": 414,
|
|
27490
27512
|
"deprecated": false,
|
|
27491
27513
|
"deprecationMessage": "",
|
|
27492
27514
|
"jsdoctags": [
|
|
@@ -27514,7 +27536,7 @@
|
|
|
27514
27536
|
"optional": false,
|
|
27515
27537
|
"returnType": "void",
|
|
27516
27538
|
"typeParameters": [],
|
|
27517
|
-
"line":
|
|
27539
|
+
"line": 406,
|
|
27518
27540
|
"deprecated": false,
|
|
27519
27541
|
"deprecationMessage": "",
|
|
27520
27542
|
"rawdescription": "\n\n`ControlValueAccessor` method to programmatically disable the DatePicker.\n\nex: `this.formGroup.get(\"myDatePicker\").disable();`\n\n",
|
|
@@ -27522,8 +27544,8 @@
|
|
|
27522
27544
|
"jsdoctags": [
|
|
27523
27545
|
{
|
|
27524
27546
|
"name": {
|
|
27525
|
-
"pos":
|
|
27526
|
-
"end":
|
|
27547
|
+
"pos": 11542,
|
|
27548
|
+
"end": 11552,
|
|
27527
27549
|
"kind": 80,
|
|
27528
27550
|
"id": 0,
|
|
27529
27551
|
"flags": 16842752,
|
|
@@ -27534,8 +27556,8 @@
|
|
|
27534
27556
|
"deprecated": false,
|
|
27535
27557
|
"deprecationMessage": "",
|
|
27536
27558
|
"tagName": {
|
|
27537
|
-
"pos":
|
|
27538
|
-
"end":
|
|
27559
|
+
"pos": 11536,
|
|
27560
|
+
"end": 11541,
|
|
27539
27561
|
"kind": 80,
|
|
27540
27562
|
"id": 0,
|
|
27541
27563
|
"flags": 16842752,
|
|
@@ -27559,7 +27581,7 @@
|
|
|
27559
27581
|
"optional": false,
|
|
27560
27582
|
"returnType": "void",
|
|
27561
27583
|
"typeParameters": [],
|
|
27562
|
-
"line":
|
|
27584
|
+
"line": 390,
|
|
27563
27585
|
"deprecated": false,
|
|
27564
27586
|
"deprecationMessage": "",
|
|
27565
27587
|
"rawdescription": "\n\nWrites a value from the model to the component. Expects the value to be `null` or `(Date | string)[]`\n",
|
|
@@ -27567,8 +27589,8 @@
|
|
|
27567
27589
|
"jsdoctags": [
|
|
27568
27590
|
{
|
|
27569
27591
|
"name": {
|
|
27570
|
-
"pos":
|
|
27571
|
-
"end":
|
|
27592
|
+
"pos": 11141,
|
|
27593
|
+
"end": 11146,
|
|
27572
27594
|
"kind": 80,
|
|
27573
27595
|
"id": 0,
|
|
27574
27596
|
"flags": 16842752,
|
|
@@ -27579,8 +27601,8 @@
|
|
|
27579
27601
|
"deprecated": false,
|
|
27580
27602
|
"deprecationMessage": "",
|
|
27581
27603
|
"tagName": {
|
|
27582
|
-
"pos":
|
|
27583
|
-
"end":
|
|
27604
|
+
"pos": 11135,
|
|
27605
|
+
"end": 11140,
|
|
27584
27606
|
"kind": 80,
|
|
27585
27607
|
"id": 0,
|
|
27586
27608
|
"flags": 16842752,
|
|
@@ -27602,7 +27624,7 @@
|
|
|
27602
27624
|
"argsDecorator": [],
|
|
27603
27625
|
"deprecated": false,
|
|
27604
27626
|
"deprecationMessage": "",
|
|
27605
|
-
"line":
|
|
27627
|
+
"line": 367
|
|
27606
27628
|
},
|
|
27607
27629
|
{
|
|
27608
27630
|
"name": "focusout",
|
|
@@ -27610,7 +27632,7 @@
|
|
|
27610
27632
|
"argsDecorator": [],
|
|
27611
27633
|
"deprecated": false,
|
|
27612
27634
|
"deprecationMessage": "",
|
|
27613
|
-
"line":
|
|
27635
|
+
"line": 382
|
|
27614
27636
|
}
|
|
27615
27637
|
],
|
|
27616
27638
|
"standalone": false,
|
|
@@ -27618,7 +27640,7 @@
|
|
|
27618
27640
|
"description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { DatePickerModule } from 'carbon-components-angular';</code></pre></div><p><a href=\"../../?path=/story/components-date-picker--single\">See demo</a></p>\n",
|
|
27619
27641
|
"rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { DatePickerModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-date-picker--single)\n",
|
|
27620
27642
|
"type": "component",
|
|
27621
|
-
"sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tViewEncapsulation,\n\tElementRef,\n\tOnDestroy,\n\tHostListener,\n\tTemplateRef,\n\tOnChanges,\n\tSimpleChanges,\n\tAfterViewChecked,\n\tAfterViewInit,\n\tViewChild,\n\tOnInit,\n\tSimpleChange\n} from \"@angular/core\";\nimport rangePlugin from \"flatpickr/dist/plugins/rangePlugin\";\nimport flatpickr from \"flatpickr\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { carbonFlatpickrMonthSelectPlugin } from \"./carbon-flatpickr-month-select\";\nimport * as languages from \"flatpickr/dist/l10n/index\";\nimport { Options } from \"flatpickr/dist/types/options\";\nimport { DatePickerInput } from \"carbon-components-angular/datepicker-input\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * Due to type error, we have to use square brackets property accessor\n * There is a webpack issue when attempting to access exported languages from flatpickr l10n Angular 14+ apps\n * languages.default[locale] fails in app consuming CCA library but passes in test\n * languages.default.default[locale] fails in test but works in app consuming CCA library.\n *\n * To please both scenarios, we are adding a condition to prevent tests from failing\n */\nif (languages.default?.default[\"en\"]?.weekdays) {\n\t(languages.default.default[\"en\"].weekdays.shorthand as string[]) = languages.default.default[\"en\"].weekdays.longhand.map(day => {\n\t\tif (day === \"Thursday\") {\n\t\t\treturn \"Th\";\n\t\t}\n\t\treturn day.charAt(0);\n\t});\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { DatePickerModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-date-picker--single)\n */\n@Component({\n\tselector: \"cds-date-picker, ibm-date-picker\",\n\ttemplate: `\n\t<div class=\"cds--form-item\">\n\t\t<div\n\t\t\tclass=\"cds--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--date-picker--range' : range,\n\t\t\t\t'cds--date-picker--single' : !range,\n\t\t\t\t'cds--date-picker--light' : theme === 'light',\n\t\t\t\t'cds--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"cds--date-picker-container\">\n\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t#input\n\t\t\t\t\t[label]=\"label\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t[pattern]=\"inputPattern\"\n\t\t\t\t\t[id]=\"id + '-input'\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t[hasIcon]=\"(range ? false : true)\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t[warn]=\"warn\"\n\t\t\t\t\t[warnText]=\"warnText\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t\t(valueChange)=\"onValueChange($event)\"\n\t\t\t\t\t(click)=\"openCalendar(input)\">\n\t\t\t\t</cds-date-picker-input>\n\t\t\t</div>\n\n\t\t\t@if (range) {\n\t\t\t\t<div class=\"cds--date-picker-container\">\n\t\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t\t#rangeInput\n\t\t\t\t\t\t[label]=\"rangeLabel\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[pattern]=\"inputPattern\"\n\t\t\t\t\t\t[id]=\"id + '-rangeInput'\"\n\t\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t\t[hasIcon]=\"(range ? true : null)\"\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[invalid]=\"rangeInvalid\"\n\t\t\t\t\t\t[invalidText]=\"rangeInvalidText\"\n\t\t\t\t\t\t[warn]=\"rangeWarn\"\n\t\t\t\t\t\t[warnText]=\"rangeWarnText\"\n\t\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t\t[helperText]=\"rangeHelperText\"\n\t\t\t\t\t\t(valueChange)=\"onRangeValueChange($event)\"\n\t\t\t\t\t\t(click)=\"openCalendar(rangeInput)\">\n\t\t\t\t\t</cds-date-picker-input>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: DatePicker,\n\t\t\tmulti: true\n\t\t}\n\t],\n\tencapsulation: ViewEncapsulation.None\n})\nexport class DatePicker implements\n\tOnInit,\n\tOnDestroy,\n\tOnChanges,\n\tAfterViewChecked,\n\tAfterViewInit {\n\tprivate static datePickerCount = 0;\n\n\t/**\n\t * Select calendar range mode\n\t */\n\t@Input() range = false;\n\n\t/**\n\t * Format of date\n\t *\n\t * For reference: https://flatpickr.js.org/formatting/\n\t */\n\t@Input() dateFormat = \"m/d/Y\";\n\n\t/**\n\t * Language of the flatpickr calendar.\n\t *\n\t * For reference of the possible locales:\n\t * https://github.com/flatpickr/flatpickr/blob/master/src/l10n/index.ts\n\t */\n\t@Input() language = \"en\";\n\n\t@Input() label: string | TemplateRef<any>;\n\t@Input() helperText: string | TemplateRef<any>;\n\t@Input() rangeHelperText: string | TemplateRef<any>;\n\t@Input() rangeLabel: string;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t/**\n\t * Aria label added to datepicker's calendar container.\n\t */\n\t@Input() ariaLabel = \"calendar container\";\n\n\t/**\n\t * The pattern for the underlying input element\n\t */\n\t@Input() inputPattern = \"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\";\n\n\t@Input() id = `datepicker-${DatePicker.datePickerCount++}`;\n\n\t@Input() set value(v: (Date | string)[]) {\n\t\tif (!v) {\n\t\t\tv = [];\n\t\t}\n\t\tthis._value = v;\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() disabled = false;\n\n\t@Input() readonly = false;\n\t/**\n\t * Set to `true` to display the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if datepicker 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 warningText)\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\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Set to `true` to display the invalid state for the second datepicker input.\n\t */\n\t@Input() rangeInvalid = false;\n\t/**\n\t * Value displayed if the second datepicker input is in an invalid state.\n\t */\n\t@Input() rangeInvalidText: string | TemplateRef<any>;\n\t/**\n\t * Set to `true` to show a warning in the second datepicker input (contents set by rangeWarningText)\n\t */\n\t@Input() rangeWarn = false;\n\t/**\n\t * Sets the warning text for the second datepicker input\n\t */\n\t@Input() rangeWarnText: string | TemplateRef<any>;\n\n\t@Input() skeleton = false;\n\n\t@Input() plugins = [];\n\n\t@Input()\n\tset flatpickrOptions(options: Partial<Options>) {\n\t\tthis._flatpickrOptions = Object.assign({}, this._flatpickrOptions, options);\n\t}\n\tget flatpickrOptions(): Partial<Options> {\n\t\tconst plugins = [...this.plugins, carbonFlatpickrMonthSelectPlugin];\n\t\tif (this.range) {\n\t\t\tplugins.push(rangePlugin({ input: `#${this.id}-rangeInput`, position: \"left\" }));\n\t\t}\n\t\treturn Object.assign({}, this._flatpickrOptions, this.flatpickrBaseOptions, {\n\t\t\tmode: this.range ? \"range\" : \"single\",\n\t\t\tplugins,\n\t\t\tdateFormat: this.dateFormat,\n\t\t\tlocale: languages.default?.default[this.language] || languages.default[this.language],\n\t\t\t// Little trick force \"readonly mode\" on datepicker input.\n\t\t\t// Docs: Whether clicking on the input should open the picker.\n\t\t\t// You could disable this if you wish to open the calendar manually with.open().\n\t\t\tclickOpens: !this.readonly\n\t\t});\n\t}\n\n\t@ViewChild(\"input\", { static: true }) input: DatePickerInput;\n\t@ViewChild(\"rangeInput\") rangeInput: DatePickerInput;\n\n\t@Output() valueChange: EventEmitter<any> = new EventEmitter();\n\n\t/**\n\t * We are overriding onClose event even if users pass it via flatpickr options\n\t * Emits an event when date picker closes\n\t */\n\t@Output() onClose: EventEmitter<any> = new EventEmitter();\n\n\tprotected _value = [];\n\n\tprotected _flatpickrOptions: Partial<Options> = {\n\t\tallowInput: true\n\t};\n\n\tprotected flatpickrBaseOptions = {\n\t\tmode: \"single\",\n\t\tdateFormat: \"m/d/Y\",\n\t\tplugins: this.plugins,\n\t\tonOpen: () => {\n\t\t\tthis.updateClassNames();\n\t\t\tthis.updateAttributes();\n\t\t\tthis.updateCalendarListeners();\n\t\t},\n\t\tonClose: (date) => {\n\t\t\t// This makes sure that the `flatpickrInstance selectedDates` are in sync with the values of\n\t\t\t// the inputs when the calendar closes.\n\t\t\tif (this.range && this.flatpickrInstance) {\n\t\t\t\tconst inputValue = this.input.input.nativeElement.value;\n\t\t\t\tconst rangeInputValue = this.rangeInput.input.nativeElement.value;\n\t\t\t\tif (inputValue || rangeInputValue) {\n\t\t\t\t\tconst parseDate = (date: string) => this.flatpickrInstance.parseDate(date, this.dateFormat);\n\t\t\t\t\tthis.setDateValues([parseDate(inputValue), parseDate(rangeInputValue || inputValue)]);\n\t\t\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.onClose.emit(date);\n\t\t},\n\t\tonDayCreate: (_dObj, _dStr, _fp, dayElem) => {\n\t\t\tdayElem.classList.add(\"cds--date-picker__day\");\n\t\t},\n\t\tnextArrow: this.rightArrowHTML(),\n\t\tprevArrow: this.leftArrowHTML(),\n\t\tvalue: this.value\n\t};\n\n\tprotected flatpickrInstance = null;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected i18n: I18n\n\t) { }\n\n\tngOnInit() {\n\t\t// if i18n is set to anything other than en we'll want to change the language\n\t\t// otherwise we'll just use the local setting\n\t\tif (this.i18n.getLocale() !== \"en\") {\n\t\t\tthis.i18n.getLocaleObservable().subscribe(locale => {\n\t\t\t\tthis.language = locale;\n\t\t\t\tthis.resetFlatpickrInstance();\n\t\t\t});\n\t\t}\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\t// Reset the flatpickr instance on input changes that affect flatpickr.\n\t\tconst flatpickrChangeKeys = [\n\t\t\t\"range\",\n\t\t\t\"dateFormat\",\n\t\t\t\"language\",\n\t\t\t\"id\",\n\t\t\t\"value\",\n\t\t\t\"plugins\",\n\t\t\t\"flatpickrOptions\",\n\t\t\t\"readonly\"\n\t\t];\n\t\tconst changeKeys = Object.keys(changes);\n\t\tif (changeKeys.some(key => flatpickrChangeKeys.includes(key))) {\n\t\t\tthis.resetFlatpickrInstance(changes.value);\n\t\t}\n\t}\n\n\tngAfterViewInit() {\n\t\tif (!this.skeleton) {\n\t\t\tthis.input.input.nativeElement.value = this._value[0] ?? \"\";\n\t\t\tif (this.range) {\n\t\t\t\tthis.rangeInput.input.nativeElement.value = this._value[1] ?? \"\";\n\t\t\t}\n\t\t}\n\t\tsetTimeout(() => {\n\t\t\tthis.addInputListeners();\n\t\t}, 0);\n\t}\n\n\t// because the actual view may be delayed in loading (think projection into a tab pane)\n\t// and because we rely on a library that operates outside the Angular view of the world\n\t// we need to keep trying to load the library, until the relevant DOM is actually live\n\tngAfterViewChecked() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\t// if (and only if) the initialization succeeded, we can set the date values\n\t\t\tif (this.isFlatpickrLoaded()) {\n\t\t\t\tif (this.value.length > 0) {\n\t\t\t\t\tthis.setDateValues(this.value);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusin\")\n\tonFocus() {\n\t\t// Updates the month manually when calendar mode is range because month\n\t\t// will not update properly without manually updating them on focus.\n\t\tif (this.range) {\n\t\t\tif (this.rangeInput.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[1].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t} else if (this.input.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusout\")\n\tonFocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Writes a value from the model to the component. Expects the value to be `null` or `(Date | string)[]`\n\t * @param value value received from the model\n\t */\n\twriteValue(value: (Date | string)[]) {\n\t\tthis.value = value;\n\t\tsetTimeout(() => {\n\t\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.config) {\n\t\t\t\tthis.setDateValues(this.value);\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the DatePicker.\n\t *\n\t * ex: `this.formGroup.get(\"myDatePicker\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the DatePicker\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tonTouched: () => any = () => { };\n\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Cleans up our flatpickr instance\n\t */\n\tngOnDestroy() {\n\t\tif (!this.isFlatpickrLoaded()) { return; }\n\t\tthis.flatpickrInstance.destroy();\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the primary/single input\n\t */\n\tonValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tif (this.range) {\n\t\t\t\tthis.setDateValues([date, this.flatpickrInstance.selectedDates[1]]);\n\t\t\t} else {\n\t\t\t\tthis.setDateValues([date]);\n\t\t\t}\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the range input\n\t */\n\tonRangeValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.isOpen) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tthis.setDateValues([this.flatpickrInstance.selectedDates[0], date]);\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles opening the calendar \"properly\" when the calendar icon is clicked.\n\t */\n\topenCalendar(datepickerInput: DatePickerInput) {\n\t\tif (this.readonly || this.skeleton) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.range) {\n\t\t\tdatepickerInput.input.nativeElement.click();\n\n\t\t\t// If the first input's calendar icon is clicked when calendar is in range mode, then\n\t\t\t// the month and year needs to be manually changed to the current selected month and\n\t\t\t// year otherwise the calendar view will not be updated upon opening.\n\t\t\tif (datepickerInput === this.input && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t\tthis.flatpickrInstance.currentYear = this.flatpickrInstance.selectedDates[0].getFullYear();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t} else {\n\t\t\t// Single-mode flatpickr handles mousedown but not click, so nativeElement.click() won't\n\t\t\t// work when the calendar icon is clicked. In this case we simply use flatpickr.open().\n\t\t\tthis.flatpickrInstance.open();\n\t\t}\n\t}\n\n\tprotected updateCalendarListeners() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.removeEventListener(\"click\", this.preventCalendarClose);\n\t\t\tcalendar.addEventListener(\"click\", this.preventCalendarClose);\n\t\t});\n\t}\n\n\t/**\n\t * Handles the initialization of event listeners for the datepicker input and range input fields.\n\t */\n\tprotected addInputListeners() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Allows focus transition from the datepicker input or range input field to\n\t\t// flatpickr calendar using a keyboard.\n\t\tconst addFocusCalendarListener = (element: HTMLInputElement) => {\n\t\t\telement.addEventListener(\"keydown\", (event: KeyboardEvent) => {\n\t\t\t\t// Listeners are added just once, so a check is needed here.\n\t\t\t\tif (this.readonly) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (event.key === \"Escape\") {\n\t\t\t\t\tthis.flatpickrInstance.close();\n\t\t\t\t}\n\t\t\t\tif (event.key === \"ArrowDown\") {\n\t\t\t\t\tif (!this.flatpickrInstance.isOpen) {\n\t\t\t\t\t\tthis.flatpickrInstance.open();\n\t\t\t\t\t}\n\n\t\t\t\t\tconst calendarContainer = this.flatpickrInstance.calendarContainer;\n\t\t\t\t\tconst dayElement = calendarContainer && calendarContainer.querySelector(\".flatpickr-day[tabindex]\");\n\n\t\t\t\t\tif (dayElement) {\n\t\t\t\t\t\tdayElement.focus();\n\n\t\t\t\t\t\t// If the user manually inputs a value into the date field and presses arrow down,\n\t\t\t\t\t\t// datepicker input onchange will be triggered when focus is removed from it and\n\t\t\t\t\t\t// `flatpickrInstance.setDate` and `flatpickrInstance.changeMonth` will be invoked\n\t\t\t\t\t\t// which will automatically change focus to the beginning of the document.\n\t\t\t\t\t\tif (document.activeElement !== dayElement && this.flatpickrInstance.selectedDateElem) {\n\t\t\t\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\tif (this.input && this.input.input) {\n\t\t\taddFocusCalendarListener(this.input.input.nativeElement);\n\t\t}\n\n\t\tif (this.rangeInput && this.rangeInput.input) {\n\t\t\taddFocusCalendarListener(this.rangeInput.input.nativeElement);\n\t\t}\n\t}\n\n\t/**\n\t * Resets the flatpickr instance while keeping the date values (or updating them if newDates is provided)\n\t *\n\t * Used to pick up input changes or locale changes.\n\t *\n\t * @param newDates An optional SimpleChange of date values\n\t */\n\tprotected resetFlatpickrInstance(newDates?: SimpleChange) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tlet dates = this.flatpickrInstance.selectedDates;\n\t\t\tif (newDates && this.didDateValueChange(newDates.currentValue, newDates.previousValue)) {\n\t\t\t\tdates = newDates.currentValue;\n\t\t\t}\n\t\t\t// only reset the flatpickr instance on Input changes\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\tthis.setDateValues(dates);\n\t\t}\n\t}\n\n\t/**\n\t * Carbon uses a number of specific classnames for parts of the flatpickr - this idempotent method applies them if needed.\n\t */\n\tprotected updateClassNames() {\n\t\tif (!this.elementRef) { return; }\n\t\t// get all the possible flatpickrs in the document - we need to add classes to (potentially) all of them\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tconst monthContainer = document.querySelectorAll(\".flatpickr-month\");\n\t\tconst weekdaysContainer = document.querySelectorAll(\".flatpickr-weekdays\");\n\t\tconst weekdayContainer = document.querySelectorAll(\".flatpickr-weekday\");\n\t\tconst daysContainer = document.querySelectorAll(\".flatpickr-days\");\n\t\tconst dayContainer = document.querySelectorAll(\".flatpickr-day\");\n\n\t\t// add classes to lists of elements\n\t\tconst addClassIfNotExists = (classname: string, elementList: NodeListOf<Element>) => {\n\t\t\tArray.from(elementList).forEach(element => {\n\t\t\t\tif (!element.classList.contains(classname)) {\n\t\t\t\t\telement.classList.add(classname);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\t// add classes (but only if they don't exist, small perf win)\n\t\taddClassIfNotExists(\"cds--date-picker__calendar\", calendarContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__month\", monthContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__weekdays\", weekdaysContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__days\", daysContainer);\n\n\t\t// add weekday classes and format the text\n\t\tArray.from(weekdayContainer).forEach(element => {\n\t\t\telement.innerHTML = element.innerHTML.replace(/\\s+/g, \"\");\n\t\t\telement.classList.add(\"cds--date-picker__weekday\");\n\t\t});\n\n\t\t// add day classes and special case the \"today\" element based on `this.value`\n\t\tArray.from(dayContainer).forEach(element => {\n\t\t\telement.classList.add(\"cds--date-picker__day\");\n\t\t\tif (!this.value) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (element.classList.contains(\"today\") && this.value.length > 0) {\n\t\t\t\telement.classList.add(\"no-border\");\n\t\t\t} else if (element.classList.contains(\"today\") && this.value.length === 0) {\n\t\t\t\telement.classList.remove(\"no-border\");\n\t\t\t}\n\t\t});\n\t}\n\n\tprotected updateAttributes() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.setAttribute(\"role\", \"region\");\n\t\t\tcalendar.setAttribute(\"aria-label\", this.ariaLabel);\n\t\t});\n\t}\n\n\t/**\n\t * Applies the given date value array to both the flatpickr instance and the `input`(s)\n\t * @param dates the date values to apply\n\t */\n\tprotected setDateValues(dates: (Date | string)[]) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst singleInput = this.elementRef.nativeElement.querySelector(`#${this.id}-input`);\n\t\t\tconst rangeInput = this.elementRef.nativeElement.querySelector(`#${this.id}-rangeInput`);\n\n\t\t\t// `flatpickrInstance.setDate` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.setDate` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\t// set the date on the instance\n\t\t\tthis.flatpickrInstance.setDate(dates);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\tlet singleDate = \"\";\n\t\t\t// if date is a string, parse and format\n\t\t\tif (typeof this.flatpickrInstance.selectedDates[0] === \"string\") {\n\t\t\t\tsingleDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(singleDate, this.dateFormat);\n\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t} else if (!!this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t}\n\n\t\t\tif (rangeInput) {\n\t\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\t\tlet rangeDate = \"\";\n\t\t\t\t// if date is a string, parse and format\n\t\t\t\tif (typeof this.flatpickrInstance.selectedDates[1] === \"string\") {\n\t\t\t\t\trangeDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[1].toString(), this.dateFormat);\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(rangeDate, this.dateFormat);\n\t\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t\t} else if (!!this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[1], this.dateFormat);\n\t\t\t\t}\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t// apply the values\n\t\t\t\t\trangeInput.value = rangeDate;\n\t\t\t\t\tsingleInput.value = singleDate;\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t}\n\n\tprotected preventCalendarClose = event => event.stopPropagation();\n\n\tprotected doSelect(selectedValue: (Date | string)[]) {\n\t\t// In range mode, if a date is selected from the first calendar that is from the previous month,\n\t\t// the month will not be updated on the calendar until the calendar is re-opened.\n\t\t// This will make sure the calendar is updated with the correct month.\n\t\tif (this.range && this.flatpickrInstance.selectedDates[0]) {\n\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t// `flatpickrInstance.changeMonth` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.changeMonth` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t}\n\t\tthis.valueChange.emit(selectedValue);\n\t\tthis.propagateChange(selectedValue);\n\t}\n\n\tprotected didDateValueChange(currentValue, previousValue) {\n\t\treturn currentValue[0] !== previousValue[0] || currentValue[1] !== previousValue[1];\n\t}\n\n\t/**\n\t * More advanced checking of the loaded state of flatpickr\n\t */\n\tprotected isFlatpickrLoaded() {\n\t\t// cast the instance to a boolean, and some method that has to exist for the library to be loaded in this case `setDate`\n\t\treturn !!this.flatpickrInstance && !!this.flatpickrInstance.setDate;\n\t}\n\n\t/**\n\t * Right arrow HTML passed to flatpickr\n\t */\n\tprotected rightArrowHTML() {\n\t\treturn `\n\t\t\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n\t\t\t\t<polygon points=\"11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 \"/>\n\t\t\t\t<rect width=\"16\" height=\"16\" style=\"fill:none\" />\n\t\t\t</svg>`;\n\t}\n\n\t/**\n\t * Left arrow HTML passed to flatpickr\n\t */\n\tprotected leftArrowHTML() {\n\t\treturn `\n\t\t\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n\t\t\t\t<polygon points=\"5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 \"/>\n\t\t\t\t<rect width=\"16\" height=\"16\" style=\"fill:none\" />\n\t\t\t</svg>`;\n\t}\n}\n",
|
|
27643
|
+
"sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tViewEncapsulation,\n\tElementRef,\n\tOnDestroy,\n\tHostListener,\n\tTemplateRef,\n\tOnChanges,\n\tSimpleChanges,\n\tAfterViewChecked,\n\tAfterViewInit,\n\tViewChild,\n\tOnInit,\n\tSimpleChange,\n\tChangeDetectionStrategy\n} from \"@angular/core\";\nimport rangePlugin from \"flatpickr/dist/plugins/rangePlugin\";\nimport flatpickr from \"flatpickr\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { carbonFlatpickrMonthSelectPlugin } from \"./carbon-flatpickr-month-select\";\nimport * as languages from \"flatpickr/dist/l10n/index\";\nimport { Options } from \"flatpickr/dist/types/options\";\nimport { DatePickerInput } from \"carbon-components-angular/datepicker-input\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * Due to type error, we have to use square brackets property accessor\n * There is a webpack issue when attempting to access exported languages from flatpickr l10n Angular 14+ apps\n * languages.default[locale] fails in app consuming CCA library but passes in test\n * languages.default.default[locale] fails in test but works in app consuming CCA library.\n *\n * To please both scenarios, we are adding a condition to prevent tests from failing\n */\nif (languages.default?.default[\"en\"]?.weekdays) {\n\t(languages.default.default[\"en\"].weekdays.shorthand as string[]) = languages.default.default[\"en\"].weekdays.longhand.map(day => {\n\t\tif (day === \"Thursday\") {\n\t\t\treturn \"Th\";\n\t\t}\n\t\treturn day.charAt(0);\n\t});\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { DatePickerModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-date-picker--single)\n */\n@Component({\n\tselector: \"cds-date-picker, ibm-date-picker\",\n\ttemplate: `\n\t<div class=\"cds--form-item\">\n\t\t<div\n\t\t\tclass=\"cds--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--date-picker--range' : range,\n\t\t\t\t'cds--date-picker--single' : !range,\n\t\t\t\t'cds--date-picker--light' : theme === 'light',\n\t\t\t\t'cds--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"cds--date-picker-container\">\n\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t#input\n\t\t\t\t\t[label]=\"label\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t[pattern]=\"inputPattern\"\n\t\t\t\t\t[id]=\"id + '-input'\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t[hasIcon]=\"(range ? false : true)\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t[warn]=\"warn\"\n\t\t\t\t\t[warnText]=\"warnText\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t\t(valueChange)=\"onValueChange($event)\"\n\t\t\t\t\t(click)=\"openCalendar(input)\">\n\t\t\t\t</cds-date-picker-input>\n\t\t\t</div>\n\n\t\t\t@if (range) {\n\t\t\t\t<div class=\"cds--date-picker-container\">\n\t\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t\t#rangeInput\n\t\t\t\t\t\t[label]=\"rangeLabel\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[pattern]=\"inputPattern\"\n\t\t\t\t\t\t[id]=\"id + '-rangeInput'\"\n\t\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t\t[hasIcon]=\"(range ? true : null)\"\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[invalid]=\"rangeInvalid\"\n\t\t\t\t\t\t[invalidText]=\"rangeInvalidText\"\n\t\t\t\t\t\t[warn]=\"rangeWarn\"\n\t\t\t\t\t\t[warnText]=\"rangeWarnText\"\n\t\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t\t[helperText]=\"rangeHelperText\"\n\t\t\t\t\t\t(valueChange)=\"onRangeValueChange($event)\"\n\t\t\t\t\t\t(click)=\"openCalendar(rangeInput)\">\n\t\t\t\t\t</cds-date-picker-input>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: DatePicker,\n\t\t\tmulti: true\n\t\t}\n\t],\n\tencapsulation: ViewEncapsulation.None,\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DatePicker implements\n\tOnInit,\n\tOnDestroy,\n\tOnChanges,\n\tAfterViewChecked,\n\tAfterViewInit {\n\tprivate static datePickerCount = 0;\n\n\t/**\n\t * Select calendar range mode\n\t */\n\t@Input() range = false;\n\n\t/**\n\t * Format of date\n\t *\n\t * For reference: https://flatpickr.js.org/formatting/\n\t */\n\t@Input() dateFormat = \"m/d/Y\";\n\n\t/**\n\t * Language of the flatpickr calendar.\n\t *\n\t * For reference of the possible locales:\n\t * https://github.com/flatpickr/flatpickr/blob/master/src/l10n/index.ts\n\t */\n\t@Input() language = \"en\";\n\n\t@Input() label: string | TemplateRef<any>;\n\t@Input() helperText: string | TemplateRef<any>;\n\t@Input() rangeHelperText: string | TemplateRef<any>;\n\t@Input() rangeLabel: string;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t/**\n\t * Aria label added to datepicker's calendar container.\n\t */\n\t@Input() ariaLabel = \"calendar container\";\n\n\t/**\n\t * The pattern for the underlying input element\n\t */\n\t@Input() inputPattern = \"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\";\n\n\t@Input() id = `datepicker-${DatePicker.datePickerCount++}`;\n\n\t@Input() set value(v: (Date | string)[]) {\n\t\tif (!v) {\n\t\t\tv = [];\n\t\t}\n\t\tthis._value = v;\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() disabled = false;\n\n\t@Input() readonly = false;\n\t/**\n\t * Set to `true` to display the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if datepicker 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 warningText)\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\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Set to `true` to display the invalid state for the second datepicker input.\n\t */\n\t@Input() rangeInvalid = false;\n\t/**\n\t * Value displayed if the second datepicker input is in an invalid state.\n\t */\n\t@Input() rangeInvalidText: string | TemplateRef<any>;\n\t/**\n\t * Set to `true` to show a warning in the second datepicker input (contents set by rangeWarningText)\n\t */\n\t@Input() rangeWarn = false;\n\t/**\n\t * Sets the warning text for the second datepicker input\n\t */\n\t@Input() rangeWarnText: string | TemplateRef<any>;\n\n\t@Input() skeleton = false;\n\n\t@Input() plugins = [];\n\n\t@Input()\n\tset flatpickrOptions(options: Partial<Options>) {\n\t\tthis._flatpickrOptions = Object.assign({}, this._flatpickrOptions, options);\n\t}\n\tget flatpickrOptions(): Partial<Options> {\n\t\tconst plugins = [...this.plugins, carbonFlatpickrMonthSelectPlugin];\n\t\tif (this.range) {\n\t\t\tplugins.push(rangePlugin({ input: `#${this.id}-rangeInput`, position: \"left\" }));\n\t\t}\n\t\treturn Object.assign({}, this._flatpickrOptions, this.flatpickrBaseOptions, {\n\t\t\tmode: this.range ? \"range\" : \"single\",\n\t\t\tplugins,\n\t\t\tdateFormat: this.dateFormat,\n\t\t\tlocale: languages.default?.default[this.language] || languages.default[this.language],\n\t\t\t// Little trick force \"readonly mode\" on datepicker input.\n\t\t\t// Docs: Whether clicking on the input should open the picker.\n\t\t\t// You could disable this if you wish to open the calendar manually with.open().\n\t\t\tclickOpens: !this.readonly\n\t\t});\n\t}\n\n\t@ViewChild(\"input\", { static: true }) input: DatePickerInput;\n\t@ViewChild(\"rangeInput\") rangeInput: DatePickerInput;\n\n\t@Output() valueChange: EventEmitter<any> = new EventEmitter();\n\n\t/**\n\t * We are overriding onClose event even if users pass it via flatpickr options\n\t * Emits an event when date picker closes\n\t */\n\t@Output() onClose: EventEmitter<any> = new EventEmitter();\n\n\tprotected _value = [];\n\n\tprotected _flatpickrOptions: Partial<Options> = {\n\t\tallowInput: true\n\t};\n\n\tprotected flatpickrBaseOptions = {\n\t\tmode: \"single\",\n\t\tdateFormat: \"m/d/Y\",\n\t\tplugins: this.plugins,\n\t\tonOpen: () => {\n\t\t\tthis.updateClassNames();\n\t\t\tthis.updateAttributes();\n\t\t\tthis.updateCalendarListeners();\n\t\t},\n\t\tonClose: (date) => {\n\t\t\t// This makes sure that the `flatpickrInstance selectedDates` are in sync with the values of\n\t\t\t// the inputs when the calendar closes.\n\t\t\tif (this.range && this.flatpickrInstance) {\n\t\t\t\tconst inputValue = this.input.input.nativeElement.value;\n\t\t\t\tconst rangeInputValue = this.rangeInput.input.nativeElement.value;\n\t\t\t\tif (inputValue || rangeInputValue) {\n\t\t\t\t\tconst parseDate = (date: string) => this.flatpickrInstance.parseDate(date, this.dateFormat);\n\t\t\t\t\tthis.setDateValues([parseDate(inputValue), parseDate(rangeInputValue || inputValue)]);\n\t\t\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.onClose.emit(date);\n\t\t},\n\t\tonDayCreate: (_dObj, _dStr, _fp, dayElem) => {\n\t\t\tdayElem.classList.add(\"cds--date-picker__day\");\n\t\t},\n\t\tnextArrow: this.rightArrowHTML(),\n\t\tprevArrow: this.leftArrowHTML(),\n\t\tvalue: this.value\n\t};\n\n\tprotected flatpickrInstance = null;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected i18n: I18n\n\t) { }\n\n\tngOnInit() {\n\t\t// if i18n is set to anything other than en we'll want to change the language\n\t\t// otherwise we'll just use the local setting\n\t\tif (this.i18n.getLocale() !== \"en\") {\n\t\t\tthis.i18n.getLocaleObservable().subscribe(locale => {\n\t\t\t\tthis.language = locale;\n\t\t\t\tthis.resetFlatpickrInstance();\n\t\t\t});\n\t\t}\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\t// Reset the flatpickr instance on input changes that affect flatpickr.\n\t\tconst flatpickrChangeKeys = [\n\t\t\t\"range\",\n\t\t\t\"dateFormat\",\n\t\t\t\"language\",\n\t\t\t\"id\",\n\t\t\t\"value\",\n\t\t\t\"plugins\",\n\t\t\t\"flatpickrOptions\",\n\t\t\t\"readonly\"\n\t\t];\n\t\tconst changeKeys = Object.keys(changes);\n\t\tif (changeKeys.some(key => flatpickrChangeKeys.includes(key))) {\n\t\t\tthis.resetFlatpickrInstance(changes.value);\n\t\t}\n\t}\n\n\tngAfterViewInit() {\n\t\tif (!this.skeleton) {\n\t\t\tthis.input.input.nativeElement.value = this._value[0] ?? \"\";\n\t\t\tif (this.range) {\n\t\t\t\tthis.rangeInput.input.nativeElement.value = this._value[1] ?? \"\";\n\t\t\t}\n\t\t}\n\t\tsetTimeout(() => {\n\t\t\tthis.addInputListeners();\n\t\t}, 0);\n\t}\n\n\t// because the actual view may be delayed in loading (think projection into a tab pane)\n\t// and because we rely on a library that operates outside the Angular view of the world\n\t// we need to keep trying to load the library, until the relevant DOM is actually live\n\tngAfterViewChecked() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\t// if (and only if) the initialization succeeded, we can set the date values\n\t\t\tif (this.isFlatpickrLoaded()) {\n\t\t\t\tif (this.value.length > 0) {\n\t\t\t\t\tthis.setDateValues(this.value);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusin\")\n\tonFocus() {\n\t\t// Updates the month manually when calendar mode is range because month\n\t\t// will not update properly without manually updating them on focus.\n\t\tif (this.range) {\n\t\t\tif (this.rangeInput.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[1].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t} else if (this.input.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusout\")\n\tonFocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Writes a value from the model to the component. Expects the value to be `null` or `(Date | string)[]`\n\t * @param value value received from the model\n\t */\n\twriteValue(value: (Date | string)[]) {\n\t\tthis.value = value;\n\t\tsetTimeout(() => {\n\t\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.config) {\n\t\t\t\tthis.setDateValues(this.value);\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the DatePicker.\n\t *\n\t * ex: `this.formGroup.get(\"myDatePicker\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the DatePicker\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tonTouched: () => any = () => { };\n\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Cleans up our flatpickr instance\n\t */\n\tngOnDestroy() {\n\t\tif (!this.isFlatpickrLoaded()) { return; }\n\t\tthis.flatpickrInstance.destroy();\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the primary/single input\n\t */\n\tonValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tif (this.range) {\n\t\t\t\tthis.setDateValues([date, this.flatpickrInstance.selectedDates[1]]);\n\t\t\t} else {\n\t\t\t\tthis.setDateValues([date]);\n\t\t\t}\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the range input\n\t */\n\tonRangeValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.isOpen) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tthis.setDateValues([this.flatpickrInstance.selectedDates[0], date]);\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles opening the calendar \"properly\" when the calendar icon is clicked.\n\t */\n\topenCalendar(datepickerInput: DatePickerInput) {\n\t\tif (this.readonly || this.skeleton) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.range) {\n\t\t\tdatepickerInput.input.nativeElement.click();\n\n\t\t\t// If the first input's calendar icon is clicked when calendar is in range mode, then\n\t\t\t// the month and year needs to be manually changed to the current selected month and\n\t\t\t// year otherwise the calendar view will not be updated upon opening.\n\t\t\tif (datepickerInput === this.input && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t\tthis.flatpickrInstance.currentYear = this.flatpickrInstance.selectedDates[0].getFullYear();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t} else {\n\t\t\t// Single-mode flatpickr handles mousedown but not click, so nativeElement.click() won't\n\t\t\t// work when the calendar icon is clicked. In this case we simply use flatpickr.open().\n\t\t\tthis.flatpickrInstance.open();\n\t\t}\n\t}\n\n\tprotected updateCalendarListeners() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.removeEventListener(\"click\", this.preventCalendarClose);\n\t\t\tcalendar.addEventListener(\"click\", this.preventCalendarClose);\n\t\t});\n\t}\n\n\t/**\n\t * Handles the initialization of event listeners for the datepicker input and range input fields.\n\t */\n\tprotected addInputListeners() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Allows focus transition from the datepicker input or range input field to\n\t\t// flatpickr calendar using a keyboard.\n\t\tconst addFocusCalendarListener = (element: HTMLInputElement) => {\n\t\t\telement.addEventListener(\"keydown\", (event: KeyboardEvent) => {\n\t\t\t\t// Listeners are added just once, so a check is needed here.\n\t\t\t\tif (this.readonly) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (event.key === \"Escape\") {\n\t\t\t\t\tthis.flatpickrInstance.close();\n\t\t\t\t}\n\t\t\t\tif (event.key === \"ArrowDown\") {\n\t\t\t\t\tif (!this.flatpickrInstance.isOpen) {\n\t\t\t\t\t\tthis.flatpickrInstance.open();\n\t\t\t\t\t}\n\n\t\t\t\t\tconst calendarContainer = this.flatpickrInstance.calendarContainer;\n\t\t\t\t\tconst dayElement = calendarContainer && calendarContainer.querySelector(\".flatpickr-day[tabindex]\");\n\n\t\t\t\t\tif (dayElement) {\n\t\t\t\t\t\tdayElement.focus();\n\n\t\t\t\t\t\t// If the user manually inputs a value into the date field and presses arrow down,\n\t\t\t\t\t\t// datepicker input onchange will be triggered when focus is removed from it and\n\t\t\t\t\t\t// `flatpickrInstance.setDate` and `flatpickrInstance.changeMonth` will be invoked\n\t\t\t\t\t\t// which will automatically change focus to the beginning of the document.\n\t\t\t\t\t\tif (document.activeElement !== dayElement && this.flatpickrInstance.selectedDateElem) {\n\t\t\t\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\tif (this.input && this.input.input) {\n\t\t\taddFocusCalendarListener(this.input.input.nativeElement);\n\t\t}\n\n\t\tif (this.rangeInput && this.rangeInput.input) {\n\t\t\taddFocusCalendarListener(this.rangeInput.input.nativeElement);\n\t\t}\n\t}\n\n\t/**\n\t * Resets the flatpickr instance while keeping the date values (or updating them if newDates is provided)\n\t *\n\t * Used to pick up input changes or locale changes.\n\t *\n\t * @param newDates An optional SimpleChange of date values\n\t */\n\tprotected resetFlatpickrInstance(newDates?: SimpleChange) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tlet dates = this.flatpickrInstance.selectedDates;\n\t\t\tif (newDates && this.didDateValueChange(newDates.currentValue, newDates.previousValue)) {\n\t\t\t\tdates = newDates.currentValue;\n\t\t\t}\n\t\t\t// only reset the flatpickr instance on Input changes\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\tthis.setDateValues(dates);\n\t\t}\n\t}\n\n\t/**\n\t * Carbon uses a number of specific classnames for parts of the flatpickr - this idempotent method applies them if needed.\n\t */\n\tprotected updateClassNames() {\n\t\tif (!this.elementRef) { return; }\n\t\t// get all the possible flatpickrs in the document - we need to add classes to (potentially) all of them\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tconst monthContainer = document.querySelectorAll(\".flatpickr-month\");\n\t\tconst weekdaysContainer = document.querySelectorAll(\".flatpickr-weekdays\");\n\t\tconst weekdayContainer = document.querySelectorAll(\".flatpickr-weekday\");\n\t\tconst daysContainer = document.querySelectorAll(\".flatpickr-days\");\n\t\tconst dayContainer = document.querySelectorAll(\".flatpickr-day\");\n\n\t\t// add classes to lists of elements\n\t\tconst addClassIfNotExists = (classname: string, elementList: NodeListOf<Element>) => {\n\t\t\tArray.from(elementList).forEach(element => {\n\t\t\t\tif (!element.classList.contains(classname)) {\n\t\t\t\t\telement.classList.add(classname);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\t// add classes (but only if they don't exist, small perf win)\n\t\taddClassIfNotExists(\"cds--date-picker__calendar\", calendarContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__month\", monthContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__weekdays\", weekdaysContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__days\", daysContainer);\n\n\t\t// add weekday classes and format the text\n\t\tArray.from(weekdayContainer).forEach(element => {\n\t\t\telement.innerHTML = element.innerHTML.replace(/\\s+/g, \"\");\n\t\t\telement.classList.add(\"cds--date-picker__weekday\");\n\t\t});\n\n\t\t// add day classes and special case the \"today\" element based on `this.value`\n\t\tArray.from(dayContainer).forEach(element => {\n\t\t\telement.classList.add(\"cds--date-picker__day\");\n\t\t\tif (!this.value) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (element.classList.contains(\"today\") && this.value.length > 0) {\n\t\t\t\telement.classList.add(\"no-border\");\n\t\t\t} else if (element.classList.contains(\"today\") && this.value.length === 0) {\n\t\t\t\telement.classList.remove(\"no-border\");\n\t\t\t}\n\t\t});\n\t}\n\n\tprotected updateAttributes() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.setAttribute(\"role\", \"region\");\n\t\t\tcalendar.setAttribute(\"aria-label\", this.ariaLabel);\n\t\t});\n\t}\n\n\t/**\n\t * Applies the given date value array to both the flatpickr instance and the `input`(s)\n\t * @param dates the date values to apply\n\t */\n\tprotected setDateValues(dates: (Date | string)[]) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst singleInput = this.elementRef.nativeElement.querySelector(`#${this.id}-input`);\n\t\t\tconst rangeInput = this.elementRef.nativeElement.querySelector(`#${this.id}-rangeInput`);\n\n\t\t\t// `flatpickrInstance.setDate` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.setDate` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\t// set the date on the instance\n\t\t\tthis.flatpickrInstance.setDate(dates);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\tlet singleDate = \"\";\n\t\t\t// if date is a string, parse and format\n\t\t\tif (typeof this.flatpickrInstance.selectedDates[0] === \"string\") {\n\t\t\t\tsingleDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(singleDate, this.dateFormat);\n\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t} else if (!!this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t}\n\n\t\t\tif (rangeInput) {\n\t\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\t\tlet rangeDate = \"\";\n\t\t\t\t// if date is a string, parse and format\n\t\t\t\tif (typeof this.flatpickrInstance.selectedDates[1] === \"string\") {\n\t\t\t\t\trangeDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[1].toString(), this.dateFormat);\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(rangeDate, this.dateFormat);\n\t\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t\t} else if (!!this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[1], this.dateFormat);\n\t\t\t\t}\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t// apply the values\n\t\t\t\t\trangeInput.value = rangeDate;\n\t\t\t\t\tsingleInput.value = singleDate;\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t}\n\n\tprotected preventCalendarClose = event => event.stopPropagation();\n\n\tprotected doSelect(selectedValue: (Date | string)[]) {\n\t\t// In range mode, if a date is selected from the first calendar that is from the previous month,\n\t\t// the month will not be updated on the calendar until the calendar is re-opened.\n\t\t// This will make sure the calendar is updated with the correct month.\n\t\tif (this.range && this.flatpickrInstance.selectedDates[0]) {\n\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t// `flatpickrInstance.changeMonth` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.changeMonth` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t}\n\t\tthis.valueChange.emit(selectedValue);\n\t\tthis.propagateChange(selectedValue);\n\t}\n\n\tprotected didDateValueChange(currentValue, previousValue) {\n\t\treturn currentValue[0] !== previousValue[0] || currentValue[1] !== previousValue[1];\n\t}\n\n\t/**\n\t * More advanced checking of the loaded state of flatpickr\n\t */\n\tprotected isFlatpickrLoaded() {\n\t\t// cast the instance to a boolean, and some method that has to exist for the library to be loaded in this case `setDate`\n\t\treturn !!this.flatpickrInstance && !!this.flatpickrInstance.setDate;\n\t}\n\n\t/**\n\t * Right arrow HTML passed to flatpickr\n\t */\n\tprotected rightArrowHTML() {\n\t\treturn `\n\t\t\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n\t\t\t\t<polygon points=\"11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 \"/>\n\t\t\t\t<rect width=\"16\" height=\"16\" style=\"fill:none\" />\n\t\t\t</svg>`;\n\t}\n\n\t/**\n\t * Left arrow HTML passed to flatpickr\n\t */\n\tprotected leftArrowHTML() {\n\t\treturn `\n\t\t\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n\t\t\t\t<polygon points=\"5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 \"/>\n\t\t\t\t<rect width=\"16\" height=\"16\" style=\"fill:none\" />\n\t\t\t</svg>`;\n\t}\n}\n",
|
|
27622
27644
|
"assetsDirs": [],
|
|
27623
27645
|
"styleUrlsData": "",
|
|
27624
27646
|
"stylesData": "",
|
|
@@ -27641,7 +27663,7 @@
|
|
|
27641
27663
|
"deprecationMessage": ""
|
|
27642
27664
|
}
|
|
27643
27665
|
],
|
|
27644
|
-
"line":
|
|
27666
|
+
"line": 302,
|
|
27645
27667
|
"jsdoctags": [
|
|
27646
27668
|
{
|
|
27647
27669
|
"name": "elementRef",
|
|
@@ -27688,7 +27710,7 @@
|
|
|
27688
27710
|
}
|
|
27689
27711
|
],
|
|
27690
27712
|
"returnType": "void",
|
|
27691
|
-
"line":
|
|
27713
|
+
"line": 174,
|
|
27692
27714
|
"jsdoctags": [
|
|
27693
27715
|
{
|
|
27694
27716
|
"name": "v",
|
|
@@ -27705,7 +27727,7 @@
|
|
|
27705
27727
|
"name": "value",
|
|
27706
27728
|
"type": "",
|
|
27707
27729
|
"returnType": "",
|
|
27708
|
-
"line":
|
|
27730
|
+
"line": 181
|
|
27709
27731
|
}
|
|
27710
27732
|
},
|
|
27711
27733
|
"flatpickrOptions": {
|
|
@@ -27724,7 +27746,7 @@
|
|
|
27724
27746
|
}
|
|
27725
27747
|
],
|
|
27726
27748
|
"returnType": "void",
|
|
27727
|
-
"line":
|
|
27749
|
+
"line": 234,
|
|
27728
27750
|
"jsdoctags": [
|
|
27729
27751
|
{
|
|
27730
27752
|
"name": "options",
|
|
@@ -27741,15 +27763,16 @@
|
|
|
27741
27763
|
"name": "flatpickrOptions",
|
|
27742
27764
|
"type": "",
|
|
27743
27765
|
"returnType": "Partial<Options>",
|
|
27744
|
-
"line":
|
|
27766
|
+
"line": 237
|
|
27745
27767
|
}
|
|
27746
27768
|
}
|
|
27747
27769
|
}
|
|
27748
27770
|
},
|
|
27749
27771
|
{
|
|
27750
27772
|
"name": "DatePickerInput",
|
|
27751
|
-
"id": "component-DatePickerInput-
|
|
27773
|
+
"id": "component-DatePickerInput-4781fe8b5a5227a8d08595298402edcfe37a8b853ce2f15af48a67b9af6fe3636c6930625e030a313cf235921885ffc18d4ed4fb4b116dd7777c3c7ea179f034",
|
|
27752
27774
|
"file": "src/datepicker-input/datepicker-input.component.ts",
|
|
27775
|
+
"changeDetection": "ChangeDetectionStrategy.OnPush",
|
|
27753
27776
|
"encapsulation": [],
|
|
27754
27777
|
"entryComponents": [],
|
|
27755
27778
|
"inputs": [],
|
|
@@ -27772,7 +27795,7 @@
|
|
|
27772
27795
|
"defaultValue": "false",
|
|
27773
27796
|
"deprecated": false,
|
|
27774
27797
|
"deprecationMessage": "",
|
|
27775
|
-
"line":
|
|
27798
|
+
"line": 157,
|
|
27776
27799
|
"type": "boolean",
|
|
27777
27800
|
"decorators": []
|
|
27778
27801
|
},
|
|
@@ -27781,7 +27804,7 @@
|
|
|
27781
27804
|
"defaultValue": "false",
|
|
27782
27805
|
"deprecated": false,
|
|
27783
27806
|
"deprecationMessage": "",
|
|
27784
|
-
"line":
|
|
27807
|
+
"line": 141,
|
|
27785
27808
|
"type": "boolean",
|
|
27786
27809
|
"decorators": []
|
|
27787
27810
|
},
|
|
@@ -27791,7 +27814,7 @@
|
|
|
27791
27814
|
"deprecationMessage": "",
|
|
27792
27815
|
"rawdescription": "\n\nSets the optional helper text.\n",
|
|
27793
27816
|
"description": "<p>Sets the optional helper text.</p>\n",
|
|
27794
|
-
"line":
|
|
27817
|
+
"line": 180,
|
|
27795
27818
|
"type": "string | TemplateRef<any>",
|
|
27796
27819
|
"decorators": []
|
|
27797
27820
|
},
|
|
@@ -27800,7 +27823,7 @@
|
|
|
27800
27823
|
"defaultValue": "`datepicker-${DatePickerInput.datePickerCount++}`",
|
|
27801
27824
|
"deprecated": false,
|
|
27802
27825
|
"deprecationMessage": "",
|
|
27803
|
-
"line":
|
|
27826
|
+
"line": 139,
|
|
27804
27827
|
"type": "string",
|
|
27805
27828
|
"decorators": []
|
|
27806
27829
|
},
|
|
@@ -27811,7 +27834,7 @@
|
|
|
27811
27834
|
"deprecationMessage": "",
|
|
27812
27835
|
"rawdescription": "\n\nSet to `true` for invalid state.\n",
|
|
27813
27836
|
"description": "<p>Set to <code>true</code> for invalid state.</p>\n",
|
|
27814
|
-
"line":
|
|
27837
|
+
"line": 163,
|
|
27815
27838
|
"type": "boolean",
|
|
27816
27839
|
"decorators": []
|
|
27817
27840
|
},
|
|
@@ -27821,7 +27844,7 @@
|
|
|
27821
27844
|
"deprecationMessage": "",
|
|
27822
27845
|
"rawdescription": "\n\nValue displayed if dropdown is in invalid state.\n",
|
|
27823
27846
|
"description": "<p>Value displayed if dropdown is in invalid state.</p>\n",
|
|
27824
|
-
"line":
|
|
27847
|
+
"line": 167,
|
|
27825
27848
|
"type": "string | TemplateRef<any>",
|
|
27826
27849
|
"decorators": []
|
|
27827
27850
|
},
|
|
@@ -27829,7 +27852,7 @@
|
|
|
27829
27852
|
"name": "label",
|
|
27830
27853
|
"deprecated": false,
|
|
27831
27854
|
"deprecationMessage": "",
|
|
27832
|
-
"line":
|
|
27855
|
+
"line": 143,
|
|
27833
27856
|
"type": "string | TemplateRef<any>",
|
|
27834
27857
|
"decorators": []
|
|
27835
27858
|
},
|
|
@@ -27838,7 +27861,7 @@
|
|
|
27838
27861
|
"defaultValue": "\"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\"",
|
|
27839
27862
|
"deprecated": false,
|
|
27840
27863
|
"deprecationMessage": "",
|
|
27841
|
-
"line":
|
|
27864
|
+
"line": 147,
|
|
27842
27865
|
"type": "string",
|
|
27843
27866
|
"decorators": []
|
|
27844
27867
|
},
|
|
@@ -27847,7 +27870,7 @@
|
|
|
27847
27870
|
"defaultValue": "\"mm/dd/yyyy\"",
|
|
27848
27871
|
"deprecated": false,
|
|
27849
27872
|
"deprecationMessage": "",
|
|
27850
|
-
"line":
|
|
27873
|
+
"line": 145,
|
|
27851
27874
|
"type": "string",
|
|
27852
27875
|
"decorators": []
|
|
27853
27876
|
},
|
|
@@ -27856,7 +27879,7 @@
|
|
|
27856
27879
|
"defaultValue": "false",
|
|
27857
27880
|
"deprecated": false,
|
|
27858
27881
|
"deprecationMessage": "",
|
|
27859
|
-
"line":
|
|
27882
|
+
"line": 159,
|
|
27860
27883
|
"type": "boolean",
|
|
27861
27884
|
"decorators": []
|
|
27862
27885
|
},
|
|
@@ -27865,7 +27888,7 @@
|
|
|
27865
27888
|
"defaultValue": "\"md\"",
|
|
27866
27889
|
"deprecated": false,
|
|
27867
27890
|
"deprecationMessage": "",
|
|
27868
|
-
"line":
|
|
27891
|
+
"line": 186,
|
|
27869
27892
|
"type": "\"sm\" | \"md\" | \"lg\"",
|
|
27870
27893
|
"decorators": []
|
|
27871
27894
|
},
|
|
@@ -27874,7 +27897,7 @@
|
|
|
27874
27897
|
"defaultValue": "false",
|
|
27875
27898
|
"deprecated": false,
|
|
27876
27899
|
"deprecationMessage": "",
|
|
27877
|
-
"line":
|
|
27900
|
+
"line": 182,
|
|
27878
27901
|
"type": "boolean",
|
|
27879
27902
|
"decorators": []
|
|
27880
27903
|
},
|
|
@@ -27885,16 +27908,16 @@
|
|
|
27885
27908
|
"deprecationMessage": "since v5 - Use `cdsLayer` directive instead\nSet to `\"light\"` to apply the light style",
|
|
27886
27909
|
"jsdoctags": [
|
|
27887
27910
|
{
|
|
27888
|
-
"pos":
|
|
27889
|
-
"end":
|
|
27911
|
+
"pos": 4018,
|
|
27912
|
+
"end": 4122,
|
|
27890
27913
|
"kind": 331,
|
|
27891
27914
|
"id": 0,
|
|
27892
27915
|
"flags": 16842752,
|
|
27893
27916
|
"modifierFlagsCache": 0,
|
|
27894
27917
|
"transformFlags": 0,
|
|
27895
27918
|
"tagName": {
|
|
27896
|
-
"pos":
|
|
27897
|
-
"end":
|
|
27919
|
+
"pos": 4019,
|
|
27920
|
+
"end": 4029,
|
|
27898
27921
|
"kind": 80,
|
|
27899
27922
|
"id": 0,
|
|
27900
27923
|
"flags": 16842752,
|
|
@@ -27904,7 +27927,7 @@
|
|
|
27904
27927
|
"comment": "<p>since v5 - Use <code>cdsLayer</code> directive instead\nSet to <code>"light"</code> to apply the light style</p>\n"
|
|
27905
27928
|
}
|
|
27906
27929
|
],
|
|
27907
|
-
"line":
|
|
27930
|
+
"line": 155,
|
|
27908
27931
|
"type": "\"light\" | \"dark\"",
|
|
27909
27932
|
"decorators": []
|
|
27910
27933
|
},
|
|
@@ -27915,7 +27938,7 @@
|
|
|
27915
27938
|
"deprecationMessage": "",
|
|
27916
27939
|
"rawdescription": "\n\nSelect a calendar type for the `model`.\nInternal purposes only.\n",
|
|
27917
27940
|
"description": "<p>Select a calendar type for the <code>model</code>.\nInternal purposes only.</p>\n",
|
|
27918
|
-
"line":
|
|
27941
|
+
"line": 137,
|
|
27919
27942
|
"type": "\"simple\" | \"single\" | \"range\"",
|
|
27920
27943
|
"decorators": []
|
|
27921
27944
|
},
|
|
@@ -27924,7 +27947,7 @@
|
|
|
27924
27947
|
"defaultValue": "\"\"",
|
|
27925
27948
|
"deprecated": false,
|
|
27926
27949
|
"deprecationMessage": "",
|
|
27927
|
-
"line":
|
|
27950
|
+
"line": 184,
|
|
27928
27951
|
"type": "string",
|
|
27929
27952
|
"decorators": []
|
|
27930
27953
|
},
|
|
@@ -27935,7 +27958,7 @@
|
|
|
27935
27958
|
"deprecationMessage": "",
|
|
27936
27959
|
"rawdescription": "\n\nSet to `true` to show a warning (contents set by warnText)\n",
|
|
27937
27960
|
"description": "<p>Set to <code>true</code> to show a warning (contents set by warnText)</p>\n",
|
|
27938
|
-
"line":
|
|
27961
|
+
"line": 171,
|
|
27939
27962
|
"type": "boolean",
|
|
27940
27963
|
"decorators": []
|
|
27941
27964
|
},
|
|
@@ -27945,7 +27968,7 @@
|
|
|
27945
27968
|
"deprecationMessage": "",
|
|
27946
27969
|
"rawdescription": "\n\nSets the warning text\n",
|
|
27947
27970
|
"description": "<p>Sets the warning text</p>\n",
|
|
27948
|
-
"line":
|
|
27971
|
+
"line": 175,
|
|
27949
27972
|
"type": "string | TemplateRef<any>",
|
|
27950
27973
|
"decorators": []
|
|
27951
27974
|
}
|
|
@@ -27956,7 +27979,7 @@
|
|
|
27956
27979
|
"defaultValue": "new EventEmitter()",
|
|
27957
27980
|
"deprecated": false,
|
|
27958
27981
|
"deprecationMessage": "",
|
|
27959
|
-
"line":
|
|
27982
|
+
"line": 149,
|
|
27960
27983
|
"type": "EventEmitter<string>"
|
|
27961
27984
|
}
|
|
27962
27985
|
],
|
|
@@ -27969,7 +27992,7 @@
|
|
|
27969
27992
|
"indexKey": "",
|
|
27970
27993
|
"optional": false,
|
|
27971
27994
|
"description": "",
|
|
27972
|
-
"line":
|
|
27995
|
+
"line": 188,
|
|
27973
27996
|
"decorators": [
|
|
27974
27997
|
{
|
|
27975
27998
|
"name": "ViewChild",
|
|
@@ -27989,7 +28012,7 @@
|
|
|
27989
28012
|
"indexKey": "",
|
|
27990
28013
|
"optional": false,
|
|
27991
28014
|
"description": "",
|
|
27992
|
-
"line":
|
|
28015
|
+
"line": 211
|
|
27993
28016
|
},
|
|
27994
28017
|
{
|
|
27995
28018
|
"name": "propagateChange",
|
|
@@ -28000,7 +28023,7 @@
|
|
|
28000
28023
|
"indexKey": "",
|
|
28001
28024
|
"optional": false,
|
|
28002
28025
|
"description": "",
|
|
28003
|
-
"line":
|
|
28026
|
+
"line": 213
|
|
28004
28027
|
}
|
|
28005
28028
|
],
|
|
28006
28029
|
"methodsClass": [
|
|
@@ -28017,7 +28040,7 @@
|
|
|
28017
28040
|
"optional": false,
|
|
28018
28041
|
"returnType": "boolean",
|
|
28019
28042
|
"typeParameters": [],
|
|
28020
|
-
"line":
|
|
28043
|
+
"line": 215,
|
|
28021
28044
|
"deprecated": false,
|
|
28022
28045
|
"deprecationMessage": "",
|
|
28023
28046
|
"modifierKind": [
|
|
@@ -28048,7 +28071,7 @@
|
|
|
28048
28071
|
"optional": false,
|
|
28049
28072
|
"returnType": "void",
|
|
28050
28073
|
"typeParameters": [],
|
|
28051
|
-
"line":
|
|
28074
|
+
"line": 192,
|
|
28052
28075
|
"deprecated": false,
|
|
28053
28076
|
"deprecationMessage": "",
|
|
28054
28077
|
"jsdoctags": [
|
|
@@ -28076,7 +28099,7 @@
|
|
|
28076
28099
|
"optional": false,
|
|
28077
28100
|
"returnType": "void",
|
|
28078
28101
|
"typeParameters": [],
|
|
28079
|
-
"line":
|
|
28102
|
+
"line": 203,
|
|
28080
28103
|
"deprecated": false,
|
|
28081
28104
|
"deprecationMessage": "",
|
|
28082
28105
|
"modifierKind": [
|
|
@@ -28107,7 +28130,7 @@
|
|
|
28107
28130
|
"optional": false,
|
|
28108
28131
|
"returnType": "void",
|
|
28109
28132
|
"typeParameters": [],
|
|
28110
|
-
"line":
|
|
28133
|
+
"line": 207,
|
|
28111
28134
|
"deprecated": false,
|
|
28112
28135
|
"deprecationMessage": "",
|
|
28113
28136
|
"modifierKind": [
|
|
@@ -28138,7 +28161,7 @@
|
|
|
28138
28161
|
"optional": false,
|
|
28139
28162
|
"returnType": "void",
|
|
28140
28163
|
"typeParameters": [],
|
|
28141
|
-
"line":
|
|
28164
|
+
"line": 199,
|
|
28142
28165
|
"deprecated": false,
|
|
28143
28166
|
"deprecationMessage": "",
|
|
28144
28167
|
"modifierKind": [
|
|
@@ -28166,7 +28189,7 @@
|
|
|
28166
28189
|
"description": "",
|
|
28167
28190
|
"rawdescription": "\n",
|
|
28168
28191
|
"type": "component",
|
|
28169
|
-
"sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tTemplateRef,\n\tViewChild\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\n@Component({\n\tselector: \"cds-date-picker-input, ibm-date-picker-input\",\n\ttemplate: `\n\t\t<div class=\"cds--form-item\">\n\t\t\t<div class=\"cds--date-picker\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--date-picker--simple' : type === 'simple',\n\t\t\t\t\t'cds--date-picker--single' : type === 'single',\n\t\t\t\t\t'cds--date-picker--range' : type === 'range',\n\t\t\t\t\t'cds--date-picker--light' : theme === 'light',\n\t\t\t\t\t'cds--skeleton' : skeleton\n\t\t\t\t}\">\n\t\t\t\t<div class=\"cds--date-picker-container\">\n\t\t\t\t\t<!-- Skeleton structure -->\n\t\t\t\t\t@if (skeleton) {\n\t\t\t\t\t\t<span class=\"cds--label cds--skeleton\"></span>\n\t\t\t\t\t\t<div class=\"cds--date-picker__input cds--skeleton\"></div>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t@if (label) {\n\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t\t[for]=\"id\"\n\t\t\t\t\t\t\t\tclass=\"cds--label\"\n\t\t\t\t\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t\t\t\t\t@if (isTemplate(label)) {\n\t\t\t\t\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"label\" />\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t{{label}}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<div class=\"cds--date-picker-input__wrapper\"\n\t\t\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t\t\t'cds--date-picker-input__wrapper--invalid': invalid,\n\t\t\t\t\t\t\t\t'cds--date-picker-input__wrapper--warn': warn\n\t\t\t\t\t\t\t}\">\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t#input\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\tclass=\"cds--date-picker__input\"\n\t\t\t\t\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t\t\t\t\t'cds--date-picker__input--sm': size === 'sm',\n\t\t\t\t\t\t\t\t\t\t'cds--date-picker__input--md': size === 'md',\n\t\t\t\t\t\t\t\t\t\t'cds--date-picker__input--lg': size === 'lg'\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\t[attr.data-invalid]=\"invalid ? true : undefined\"\n\t\t\t\t\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t\t\t\t[id]= \"id\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t\t\t\t\t(change)=\"onChange($event)\"/>\n\t\t\t\t\t\t\t\t\t@if (type !== 'simple' && !warn && !invalid) {\n\t\t\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\t\t\tcdsIcon=\"calendar\"\n\t\t\t\t\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon\">\n\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t@if (invalid) {\n\t\t\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon cds--date-picker__icon--invalid\"\n\t\t\t\t\t\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t} @else if (warn) {\n\t\t\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon cds--date-picker__icon--warn\">\n\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\n\t\t\t\t\t@if (invalid) {\n\t\t\t\t\t\t<div class=\"cds--form-requirement\">\n\t\t\t\t\t\t\t@if (isTemplate(invalidText)) {\n\t\t\t\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"invalidText\" />\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t{{invalidText}}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t} @else if (warn) {\n\t\t\t\t\t\t<div class=\"cds--form-requirement\">\n\t\t\t\t\t\t\t@if (isTemplate(warnText)) {\n\t\t\t\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"warnText\" />\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t{{warnText}}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t} @else if(helperText) {\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t\t\t\t@if (isTemplate(helperText)) {\n\t\t\t\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"helperText\" />\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t{{helperText}}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\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: DatePickerInput,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class DatePickerInput {\n\tprivate static datePickerCount = 0;\n\t/**\n\t * Select a calendar type for the `model`.\n\t * Internal purposes only.\n\t */\n\t@Input() type: \"simple\" | \"single\" | \"range\" = \"simple\";\n\n\t@Input() id = `datepicker-${DatePickerInput.datePickerCount++}`;\n\n\t@Input() hasIcon = false;\n\n\t@Input() label: string | TemplateRef<any>;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t@Input() pattern = \"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\";\n\n\t@Output() valueChange: EventEmitter<string> = new EventEmitter();\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() disabled = false;\n\n\t@Input() readonly = false;\n\t/**\n\t * Set to `true` for invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if dropdown is in 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\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\n\t@Input() skeleton = false;\n\n\t@Input() value = \"\";\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t@ViewChild(\"input\") input: ElementRef;\n\n\tconstructor(protected elementRef: ElementRef) { }\n\n\tonChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.valueChange.emit(this.value);\n\t\tthis.propagateChange(this.value);\n\t\tthis.onTouched();\n\t}\n\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tonTouched: () => any = () => { };\n\n\tpropagateChange = (_: any) => { };\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
|
|
28192
|
+
"sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tTemplateRef,\n\tViewChild,\n\tChangeDetectionStrategy\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\n@Component({\n\tselector: \"cds-date-picker-input, ibm-date-picker-input\",\n\ttemplate: `\n\t\t<div class=\"cds--form-item\">\n\t\t\t<div class=\"cds--date-picker\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--date-picker--simple' : type === 'simple',\n\t\t\t\t\t'cds--date-picker--single' : type === 'single',\n\t\t\t\t\t'cds--date-picker--range' : type === 'range',\n\t\t\t\t\t'cds--date-picker--light' : theme === 'light',\n\t\t\t\t\t'cds--skeleton' : skeleton\n\t\t\t\t}\">\n\t\t\t\t<div class=\"cds--date-picker-container\">\n\t\t\t\t\t<!-- Skeleton structure -->\n\t\t\t\t\t@if (skeleton) {\n\t\t\t\t\t\t<span class=\"cds--label cds--skeleton\"></span>\n\t\t\t\t\t\t<div class=\"cds--date-picker__input cds--skeleton\"></div>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t@if (label) {\n\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t\t[for]=\"id\"\n\t\t\t\t\t\t\t\tclass=\"cds--label\"\n\t\t\t\t\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t\t\t\t\t@if (isTemplate(label)) {\n\t\t\t\t\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"label\" />\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t{{label}}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<div class=\"cds--date-picker-input__wrapper\"\n\t\t\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t\t\t'cds--date-picker-input__wrapper--invalid': invalid,\n\t\t\t\t\t\t\t\t'cds--date-picker-input__wrapper--warn': warn\n\t\t\t\t\t\t\t}\">\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t#input\n\t\t\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\tclass=\"cds--date-picker__input\"\n\t\t\t\t\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t\t\t\t\t'cds--date-picker__input--sm': size === 'sm',\n\t\t\t\t\t\t\t\t\t\t'cds--date-picker__input--md': size === 'md',\n\t\t\t\t\t\t\t\t\t\t'cds--date-picker__input--lg': size === 'lg'\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\t[attr.data-invalid]=\"invalid ? true : undefined\"\n\t\t\t\t\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t\t\t\t[id]= \"id\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t\t\t\t\t(change)=\"onChange($event)\"/>\n\t\t\t\t\t\t\t\t\t@if (type !== 'simple' && !warn && !invalid) {\n\t\t\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\t\t\tcdsIcon=\"calendar\"\n\t\t\t\t\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon\">\n\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t@if (invalid) {\n\t\t\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon cds--date-picker__icon--invalid\"\n\t\t\t\t\t\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t} @else if (warn) {\n\t\t\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon cds--date-picker__icon--warn\">\n\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\n\t\t\t\t\t@if (invalid) {\n\t\t\t\t\t\t<div class=\"cds--form-requirement\">\n\t\t\t\t\t\t\t@if (isTemplate(invalidText)) {\n\t\t\t\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"invalidText\" />\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t{{invalidText}}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t} @else if (warn) {\n\t\t\t\t\t\t<div class=\"cds--form-requirement\">\n\t\t\t\t\t\t\t@if (isTemplate(warnText)) {\n\t\t\t\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"warnText\" />\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t{{warnText}}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t} @else if(helperText) {\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t\t\t\t@if (isTemplate(helperText)) {\n\t\t\t\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"helperText\" />\n\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t{{helperText}}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\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: DatePickerInput,\n\t\t\tmulti: true\n\t\t}\n\t],\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DatePickerInput {\n\tprivate static datePickerCount = 0;\n\t/**\n\t * Select a calendar type for the `model`.\n\t * Internal purposes only.\n\t */\n\t@Input() type: \"simple\" | \"single\" | \"range\" = \"simple\";\n\n\t@Input() id = `datepicker-${DatePickerInput.datePickerCount++}`;\n\n\t@Input() hasIcon = false;\n\n\t@Input() label: string | TemplateRef<any>;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t@Input() pattern = \"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\";\n\n\t@Output() valueChange: EventEmitter<string> = new EventEmitter();\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() disabled = false;\n\n\t@Input() readonly = false;\n\t/**\n\t * Set to `true` for invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if dropdown is in 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\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\n\t@Input() skeleton = false;\n\n\t@Input() value = \"\";\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t@ViewChild(\"input\") input: ElementRef;\n\n\tconstructor(protected elementRef: ElementRef) { }\n\n\tonChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.valueChange.emit(this.value);\n\t\tthis.propagateChange(this.value);\n\t\tthis.onTouched();\n\t}\n\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tonTouched: () => any = () => { };\n\n\tpropagateChange = (_: any) => { };\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
|
|
28170
28193
|
"assetsDirs": [],
|
|
28171
28194
|
"styleUrlsData": "",
|
|
28172
28195
|
"stylesData": "",
|
|
@@ -28183,7 +28206,7 @@
|
|
|
28183
28206
|
"deprecationMessage": ""
|
|
28184
28207
|
}
|
|
28185
28208
|
],
|
|
28186
|
-
"line":
|
|
28209
|
+
"line": 188,
|
|
28187
28210
|
"jsdoctags": [
|
|
28188
28211
|
{
|
|
28189
28212
|
"name": "elementRef",
|
|
@@ -28966,7 +28989,7 @@
|
|
|
28966
28989
|
},
|
|
28967
28990
|
{
|
|
28968
28991
|
"name": "Dropdown",
|
|
28969
|
-
"id": "component-Dropdown-
|
|
28992
|
+
"id": "component-Dropdown-61c17821e0b4a4e2826885e775c6e26298b286460af6dd1c5aef41a63a0978c67136f4ab0c0cdc090f428cd5d831698ce2ae8b48dbee58600e79162362b505fe",
|
|
28970
28993
|
"file": "src/dropdown/dropdown.component.ts",
|
|
28971
28994
|
"encapsulation": [],
|
|
28972
28995
|
"entryComponents": [],
|
|
@@ -28992,7 +29015,7 @@
|
|
|
28992
29015
|
"deprecationMessage": "",
|
|
28993
29016
|
"rawdescription": "\n\nset to `true` to place the dropdown view inline with the component\n",
|
|
28994
29017
|
"description": "<p>set to <code>true</code> to place the dropdown view inline with the component</p>\n",
|
|
28995
|
-
"line":
|
|
29018
|
+
"line": 312,
|
|
28996
29019
|
"type": "boolean",
|
|
28997
29020
|
"decorators": []
|
|
28998
29021
|
},
|
|
@@ -29003,7 +29026,7 @@
|
|
|
29003
29026
|
"deprecationMessage": "",
|
|
29004
29027
|
"rawdescription": "\n\nSets the optional clear button tooltip text.\n",
|
|
29005
29028
|
"description": "<p>Sets the optional clear button tooltip text.</p>\n",
|
|
29006
|
-
"line":
|
|
29029
|
+
"line": 258,
|
|
29007
29030
|
"type": "string",
|
|
29008
29031
|
"decorators": []
|
|
29009
29032
|
},
|
|
@@ -29014,7 +29037,7 @@
|
|
|
29014
29037
|
"deprecationMessage": "",
|
|
29015
29038
|
"rawdescription": "\n\nSet to `true` for a dropdown without arrow key activation.\n",
|
|
29016
29039
|
"description": "<p>Set to <code>true</code> for a dropdown without arrow key activation.</p>\n",
|
|
29017
|
-
"line":
|
|
29040
|
+
"line": 292,
|
|
29018
29041
|
"type": "boolean",
|
|
29019
29042
|
"decorators": []
|
|
29020
29043
|
},
|
|
@@ -29025,7 +29048,7 @@
|
|
|
29025
29048
|
"deprecationMessage": "",
|
|
29026
29049
|
"rawdescription": "\n\nSet to `true` to disable the dropdown.\n",
|
|
29027
29050
|
"description": "<p>Set to <code>true</code> to disable the dropdown.</p>\n",
|
|
29028
|
-
"line":
|
|
29051
|
+
"line": 276,
|
|
29029
29052
|
"type": "boolean",
|
|
29030
29053
|
"decorators": []
|
|
29031
29054
|
},
|
|
@@ -29036,7 +29059,7 @@
|
|
|
29036
29059
|
"deprecationMessage": "",
|
|
29037
29060
|
"rawdescription": "\n\nThe selected value from the `Dropdown`. Can be a string or template.\n",
|
|
29038
29061
|
"description": "<p>The selected value from the <code>Dropdown</code>. Can be a string or template.</p>\n",
|
|
29039
|
-
"line":
|
|
29062
|
+
"line": 254,
|
|
29040
29063
|
"type": "string | TemplateRef<any>",
|
|
29041
29064
|
"decorators": []
|
|
29042
29065
|
},
|
|
@@ -29046,7 +29069,7 @@
|
|
|
29046
29069
|
"deprecationMessage": "",
|
|
29047
29070
|
"rawdescription": "\n\nOverrides the automatic dropUp.\n",
|
|
29048
29071
|
"description": "<p>Overrides the automatic dropUp.</p>\n",
|
|
29049
|
-
"line":
|
|
29072
|
+
"line": 342,
|
|
29050
29073
|
"type": "boolean",
|
|
29051
29074
|
"decorators": []
|
|
29052
29075
|
},
|
|
@@ -29057,7 +29080,7 @@
|
|
|
29057
29080
|
"deprecationMessage": "",
|
|
29058
29081
|
"rawdescription": "\n\nExperimental: enable fluid state\n",
|
|
29059
29082
|
"description": "<p>Experimental: enable fluid state</p>\n",
|
|
29060
|
-
"line":
|
|
29083
|
+
"line": 375,
|
|
29061
29084
|
"type": "boolean",
|
|
29062
29085
|
"decorators": []
|
|
29063
29086
|
},
|
|
@@ -29067,7 +29090,7 @@
|
|
|
29067
29090
|
"deprecationMessage": "",
|
|
29068
29091
|
"rawdescription": "\n\nSets the optional helper text.\n",
|
|
29069
29092
|
"description": "<p>Sets the optional helper text.</p>\n",
|
|
29070
|
-
"line":
|
|
29093
|
+
"line": 246,
|
|
29071
29094
|
"type": "string | TemplateRef<any>",
|
|
29072
29095
|
"decorators": []
|
|
29073
29096
|
},
|
|
@@ -29078,7 +29101,7 @@
|
|
|
29078
29101
|
"deprecationMessage": "",
|
|
29079
29102
|
"rawdescription": "\n\nHide label while keeping it accessible for screen readers\n",
|
|
29080
29103
|
"description": "<p>Hide label while keeping it accessible for screen readers</p>\n",
|
|
29081
|
-
"line":
|
|
29104
|
+
"line": 242,
|
|
29082
29105
|
"type": "boolean",
|
|
29083
29106
|
"decorators": []
|
|
29084
29107
|
},
|
|
@@ -29087,7 +29110,7 @@
|
|
|
29087
29110
|
"defaultValue": "`dropdown-${Dropdown.dropdownCount++}`",
|
|
29088
29111
|
"deprecated": false,
|
|
29089
29112
|
"deprecationMessage": "",
|
|
29090
|
-
"line":
|
|
29113
|
+
"line": 234,
|
|
29091
29114
|
"type": "string",
|
|
29092
29115
|
"decorators": []
|
|
29093
29116
|
},
|
|
@@ -29098,7 +29121,7 @@
|
|
|
29098
29121
|
"deprecationMessage": "",
|
|
29099
29122
|
"rawdescription": "\n\nSet to `true` for an inline dropdown.\n",
|
|
29100
29123
|
"description": "<p>Set to <code>true</code> for an inline dropdown.</p>\n",
|
|
29101
|
-
"line":
|
|
29124
|
+
"line": 288,
|
|
29102
29125
|
"type": "boolean",
|
|
29103
29126
|
"decorators": []
|
|
29104
29127
|
},
|
|
@@ -29109,7 +29132,7 @@
|
|
|
29109
29132
|
"deprecationMessage": "",
|
|
29110
29133
|
"rawdescription": "\n\nSet to `true` for invalid state.\n",
|
|
29111
29134
|
"description": "<p>Set to <code>true</code> for invalid state.</p>\n",
|
|
29112
|
-
"line":
|
|
29135
|
+
"line": 296,
|
|
29113
29136
|
"type": "boolean",
|
|
29114
29137
|
"decorators": []
|
|
29115
29138
|
},
|
|
@@ -29119,7 +29142,7 @@
|
|
|
29119
29142
|
"deprecationMessage": "",
|
|
29120
29143
|
"rawdescription": "\n\nValue displayed if dropdown is in invalid state.\n",
|
|
29121
29144
|
"description": "<p>Value displayed if dropdown is in invalid state.</p>\n",
|
|
29122
|
-
"line":
|
|
29145
|
+
"line": 300,
|
|
29123
29146
|
"type": "string | TemplateRef<any>",
|
|
29124
29147
|
"decorators": []
|
|
29125
29148
|
},
|
|
@@ -29129,7 +29152,7 @@
|
|
|
29129
29152
|
"deprecationMessage": "",
|
|
29130
29153
|
"rawdescription": "\n\nSpecifies the property to be used as the return value to `ngModel`\n",
|
|
29131
29154
|
"description": "<p>Specifies the property to be used as the return value to <code>ngModel</code></p>\n",
|
|
29132
|
-
"line":
|
|
29155
|
+
"line": 321,
|
|
29133
29156
|
"type": "string",
|
|
29134
29157
|
"decorators": []
|
|
29135
29158
|
},
|
|
@@ -29139,7 +29162,7 @@
|
|
|
29139
29162
|
"deprecationMessage": "",
|
|
29140
29163
|
"rawdescription": "\n\nLabel for the dropdown.\n",
|
|
29141
29164
|
"description": "<p>Label for the dropdown.</p>\n",
|
|
29142
|
-
"line":
|
|
29165
|
+
"line": 238,
|
|
29143
29166
|
"type": "string | TemplateRef<any>",
|
|
29144
29167
|
"decorators": []
|
|
29145
29168
|
},
|
|
@@ -29150,7 +29173,7 @@
|
|
|
29150
29173
|
"deprecationMessage": "",
|
|
29151
29174
|
"rawdescription": "\n\nAccessible label for the button that opens the dropdown list.\nDefaults to the `DROPDOWN.OPEN` value from the i18n service.\n",
|
|
29152
29175
|
"description": "<p>Accessible label for the button that opens the dropdown list.\nDefaults to the <code>DROPDOWN.OPEN</code> value from the i18n service.</p>\n",
|
|
29153
|
-
"line":
|
|
29176
|
+
"line": 333,
|
|
29154
29177
|
"type": "any",
|
|
29155
29178
|
"decorators": []
|
|
29156
29179
|
},
|
|
@@ -29161,7 +29184,7 @@
|
|
|
29161
29184
|
"deprecationMessage": "",
|
|
29162
29185
|
"rawdescription": "\n\nValue displayed if no item is selected.\n",
|
|
29163
29186
|
"description": "<p>Value displayed if no item is selected.</p>\n",
|
|
29164
|
-
"line":
|
|
29187
|
+
"line": 250,
|
|
29165
29188
|
"type": "string",
|
|
29166
29189
|
"decorators": []
|
|
29167
29190
|
},
|
|
@@ -29172,7 +29195,7 @@
|
|
|
29172
29195
|
"deprecationMessage": "",
|
|
29173
29196
|
"rawdescription": "\n\nSet to `true` for a readonly state.\n",
|
|
29174
29197
|
"description": "<p>Set to <code>true</code> for a readonly state.</p>\n",
|
|
29175
|
-
"line":
|
|
29198
|
+
"line": 280,
|
|
29176
29199
|
"type": "boolean",
|
|
29177
29200
|
"decorators": []
|
|
29178
29201
|
},
|
|
@@ -29182,7 +29205,7 @@
|
|
|
29182
29205
|
"deprecationMessage": "",
|
|
29183
29206
|
"rawdescription": "\n\nQuery string for the element that contains the `Dropdown`.\nUsed to trigger closing the dropdown if it scrolls outside of the viewport of the `scrollableContainer`.\n",
|
|
29184
29207
|
"description": "<p>Query string for the element that contains the <code>Dropdown</code>.\nUsed to trigger closing the dropdown if it scrolls outside of the viewport of the <code>scrollableContainer</code>.</p>\n",
|
|
29185
|
-
"line":
|
|
29208
|
+
"line": 317,
|
|
29186
29209
|
"type": "string",
|
|
29187
29210
|
"decorators": []
|
|
29188
29211
|
},
|
|
@@ -29193,7 +29216,7 @@
|
|
|
29193
29216
|
"deprecationMessage": "",
|
|
29194
29217
|
"rawdescription": "\n\nProvides the label for the \"# selected\" text.\nDefaults to the `DROPDOWN.SELECTED` value from the i18n service.\n",
|
|
29195
29218
|
"description": "<p>Provides the label for the "# selected" text.\nDefaults to the <code>DROPDOWN.SELECTED</code> value from the i18n service.</p>\n",
|
|
29196
|
-
"line":
|
|
29219
|
+
"line": 338,
|
|
29197
29220
|
"type": "any",
|
|
29198
29221
|
"decorators": []
|
|
29199
29222
|
},
|
|
@@ -29204,7 +29227,7 @@
|
|
|
29204
29227
|
"deprecationMessage": "",
|
|
29205
29228
|
"rawdescription": "\n\nSpecify feedback (mode) of the selection.\n`top`: selected item jumps to top\n`fixed`: selected item stays at it's position\n`top-after-reopen`: selected item jump to top after reopen dropdown\n",
|
|
29206
29229
|
"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 it's position\n<code>top-after-reopen</code>: selected item jump to top after reopen dropdown</p>\n",
|
|
29207
|
-
"line":
|
|
29230
|
+
"line": 328,
|
|
29208
29231
|
"type": "\"top\" | \"fixed\" | \"top-after-reopen\"",
|
|
29209
29232
|
"decorators": []
|
|
29210
29233
|
},
|
|
@@ -29215,7 +29238,7 @@
|
|
|
29215
29238
|
"deprecationMessage": "",
|
|
29216
29239
|
"rawdescription": "\n\nSize to render the dropdown field.\n",
|
|
29217
29240
|
"description": "<p>Size to render the dropdown field.</p>\n",
|
|
29218
|
-
"line":
|
|
29241
|
+
"line": 262,
|
|
29219
29242
|
"type": "\"sm\" | \"md\" | \"lg\"",
|
|
29220
29243
|
"decorators": []
|
|
29221
29244
|
},
|
|
@@ -29226,7 +29249,7 @@
|
|
|
29226
29249
|
"deprecationMessage": "",
|
|
29227
29250
|
"rawdescription": "\n\nSet to `true` for a loading dropdown.\n",
|
|
29228
29251
|
"description": "<p>Set to <code>true</code> for a loading dropdown.</p>\n",
|
|
29229
|
-
"line":
|
|
29252
|
+
"line": 284,
|
|
29230
29253
|
"type": "boolean",
|
|
29231
29254
|
"decorators": []
|
|
29232
29255
|
},
|
|
@@ -29237,16 +29260,16 @@
|
|
|
29237
29260
|
"deprecationMessage": "since v5 - Use `cdsLayer` directive instead\n`light` or `dark` dropdown theme",
|
|
29238
29261
|
"jsdoctags": [
|
|
29239
29262
|
{
|
|
29240
|
-
"pos":
|
|
29241
|
-
"end":
|
|
29263
|
+
"pos": 7692,
|
|
29264
|
+
"end": 7787,
|
|
29242
29265
|
"kind": 331,
|
|
29243
29266
|
"id": 0,
|
|
29244
29267
|
"flags": 16842752,
|
|
29245
29268
|
"modifierFlagsCache": 0,
|
|
29246
29269
|
"transformFlags": 0,
|
|
29247
29270
|
"tagName": {
|
|
29248
|
-
"pos":
|
|
29249
|
-
"end":
|
|
29271
|
+
"pos": 7693,
|
|
29272
|
+
"end": 7703,
|
|
29250
29273
|
"kind": 80,
|
|
29251
29274
|
"id": 0,
|
|
29252
29275
|
"flags": 16842752,
|
|
@@ -29256,7 +29279,7 @@
|
|
|
29256
29279
|
"comment": "<p>since v5 - Use <code>cdsLayer</code> directive instead\n<code>light</code> or <code>dark</code> dropdown theme</p>\n"
|
|
29257
29280
|
}
|
|
29258
29281
|
],
|
|
29259
|
-
"line":
|
|
29282
|
+
"line": 272,
|
|
29260
29283
|
"type": "\"light\" | \"dark\"",
|
|
29261
29284
|
"decorators": []
|
|
29262
29285
|
},
|
|
@@ -29267,7 +29290,7 @@
|
|
|
29267
29290
|
"deprecationMessage": "",
|
|
29268
29291
|
"rawdescription": "\n\nDefines whether or not the `Dropdown` supports selecting multiple items as opposed to single\nitem selection.\n",
|
|
29269
29292
|
"description": "<p>Defines whether or not the <code>Dropdown</code> supports selecting multiple items as opposed to single\nitem selection.</p>\n",
|
|
29270
|
-
"line":
|
|
29293
|
+
"line": 267,
|
|
29271
29294
|
"type": "\"single\" | \"multi\"",
|
|
29272
29295
|
"decorators": []
|
|
29273
29296
|
},
|
|
@@ -29278,7 +29301,7 @@
|
|
|
29278
29301
|
"deprecationMessage": "",
|
|
29279
29302
|
"rawdescription": "\n\nSet to `true` to show a warning (contents set by warningText)\n",
|
|
29280
29303
|
"description": "<p>Set to <code>true</code> to show a warning (contents set by warningText)</p>\n",
|
|
29281
|
-
"line":
|
|
29304
|
+
"line": 304,
|
|
29282
29305
|
"type": "boolean",
|
|
29283
29306
|
"decorators": []
|
|
29284
29307
|
},
|
|
@@ -29288,7 +29311,7 @@
|
|
|
29288
29311
|
"deprecationMessage": "",
|
|
29289
29312
|
"rawdescription": "\n\nSets the warning text\n",
|
|
29290
29313
|
"description": "<p>Sets the warning text</p>\n",
|
|
29291
|
-
"line":
|
|
29314
|
+
"line": 308,
|
|
29292
29315
|
"type": "string | TemplateRef<any>",
|
|
29293
29316
|
"decorators": []
|
|
29294
29317
|
}
|
|
@@ -29301,7 +29324,7 @@
|
|
|
29301
29324
|
"deprecationMessage": "",
|
|
29302
29325
|
"rawdescription": "\n\nEmits event notifying to other classes that the `Dropdown` has been closed (collapsed).\n",
|
|
29303
29326
|
"description": "<p>Emits event notifying to other classes that the <code>Dropdown</code> has been closed (collapsed).</p>\n",
|
|
29304
|
-
"line":
|
|
29327
|
+
"line": 354,
|
|
29305
29328
|
"type": "EventEmitter<any>"
|
|
29306
29329
|
},
|
|
29307
29330
|
{
|
|
@@ -29311,7 +29334,7 @@
|
|
|
29311
29334
|
"deprecationMessage": "",
|
|
29312
29335
|
"rawdescription": "\n\nEmits event notifying to other classes that the `Dropdown` has been closed (collapsed).\n",
|
|
29313
29336
|
"description": "<p>Emits event notifying to other classes that the <code>Dropdown</code> has been closed (collapsed).</p>\n",
|
|
29314
|
-
"line":
|
|
29337
|
+
"line": 350,
|
|
29315
29338
|
"type": "EventEmitter<any>"
|
|
29316
29339
|
},
|
|
29317
29340
|
{
|
|
@@ -29321,7 +29344,7 @@
|
|
|
29321
29344
|
"deprecationMessage": "",
|
|
29322
29345
|
"rawdescription": "\n\nEmits selection events.\n",
|
|
29323
29346
|
"description": "<p>Emits selection events.</p>\n",
|
|
29324
|
-
"line":
|
|
29347
|
+
"line": 346,
|
|
29325
29348
|
"type": "EventEmitter<Object>"
|
|
29326
29349
|
}
|
|
29327
29350
|
],
|
|
@@ -29335,7 +29358,7 @@
|
|
|
29335
29358
|
"indexKey": "",
|
|
29336
29359
|
"optional": false,
|
|
29337
29360
|
"description": "<p>controls whether the <code>drop-up</code> class is applied</p>\n",
|
|
29338
|
-
"line":
|
|
29361
|
+
"line": 385,
|
|
29339
29362
|
"rawdescription": "\n\ncontrols whether the `drop-up` class is applied\n"
|
|
29340
29363
|
},
|
|
29341
29364
|
{
|
|
@@ -29346,7 +29369,7 @@
|
|
|
29346
29369
|
"indexKey": "",
|
|
29347
29370
|
"optional": false,
|
|
29348
29371
|
"description": "<p>Maintains a reference to the view DOM element of the <code>Dropdown</code> button.</p>\n",
|
|
29349
|
-
"line":
|
|
29372
|
+
"line": 363,
|
|
29350
29373
|
"rawdescription": "\n\nMaintains a reference to the view DOM element of the `Dropdown` button.\n",
|
|
29351
29374
|
"decorators": [
|
|
29352
29375
|
{
|
|
@@ -29367,7 +29390,7 @@
|
|
|
29367
29390
|
"indexKey": "",
|
|
29368
29391
|
"optional": false,
|
|
29369
29392
|
"description": "",
|
|
29370
|
-
"line":
|
|
29393
|
+
"line": 214,
|
|
29371
29394
|
"modifierKind": [
|
|
29372
29395
|
126
|
|
29373
29396
|
]
|
|
@@ -29380,7 +29403,7 @@
|
|
|
29380
29403
|
"indexKey": "",
|
|
29381
29404
|
"optional": false,
|
|
29382
29405
|
"description": "<p>ViewChid of the dropdown view.</p>\n",
|
|
29383
|
-
"line":
|
|
29406
|
+
"line": 367,
|
|
29384
29407
|
"rawdescription": "\n\nViewChid of the dropdown view.\n",
|
|
29385
29408
|
"decorators": [
|
|
29386
29409
|
{
|
|
@@ -29401,7 +29424,7 @@
|
|
|
29401
29424
|
"indexKey": "",
|
|
29402
29425
|
"optional": false,
|
|
29403
29426
|
"description": "",
|
|
29404
|
-
"line":
|
|
29427
|
+
"line": 369,
|
|
29405
29428
|
"decorators": [
|
|
29406
29429
|
{
|
|
29407
29430
|
"name": "HostBinding",
|
|
@@ -29421,7 +29444,7 @@
|
|
|
29421
29444
|
"indexKey": "",
|
|
29422
29445
|
"optional": false,
|
|
29423
29446
|
"description": "",
|
|
29424
|
-
"line":
|
|
29447
|
+
"line": 371,
|
|
29425
29448
|
"decorators": [
|
|
29426
29449
|
{
|
|
29427
29450
|
"name": "HostBinding",
|
|
@@ -29441,7 +29464,7 @@
|
|
|
29441
29464
|
"indexKey": "",
|
|
29442
29465
|
"optional": false,
|
|
29443
29466
|
"description": "",
|
|
29444
|
-
"line":
|
|
29467
|
+
"line": 392
|
|
29445
29468
|
},
|
|
29446
29469
|
{
|
|
29447
29470
|
"name": "menuIsClosed",
|
|
@@ -29452,7 +29475,7 @@
|
|
|
29452
29475
|
"indexKey": "",
|
|
29453
29476
|
"optional": false,
|
|
29454
29477
|
"description": "<p>Set to <code>true</code> if the dropdown is closed (not expanded).</p>\n",
|
|
29455
|
-
"line":
|
|
29478
|
+
"line": 380,
|
|
29456
29479
|
"rawdescription": "\n\nSet to `true` if the dropdown is closed (not expanded).\n"
|
|
29457
29480
|
},
|
|
29458
29481
|
{
|
|
@@ -29464,7 +29487,7 @@
|
|
|
29464
29487
|
"indexKey": "",
|
|
29465
29488
|
"optional": false,
|
|
29466
29489
|
"description": "",
|
|
29467
|
-
"line":
|
|
29490
|
+
"line": 389
|
|
29468
29491
|
},
|
|
29469
29492
|
{
|
|
29470
29493
|
"name": "outsideClick",
|
|
@@ -29475,7 +29498,7 @@
|
|
|
29475
29498
|
"indexKey": "",
|
|
29476
29499
|
"optional": false,
|
|
29477
29500
|
"description": "",
|
|
29478
|
-
"line":
|
|
29501
|
+
"line": 390
|
|
29479
29502
|
},
|
|
29480
29503
|
{
|
|
29481
29504
|
"name": "outsideKey",
|
|
@@ -29486,7 +29509,7 @@
|
|
|
29486
29509
|
"indexKey": "",
|
|
29487
29510
|
"optional": false,
|
|
29488
29511
|
"description": "",
|
|
29489
|
-
"line":
|
|
29512
|
+
"line": 391
|
|
29490
29513
|
},
|
|
29491
29514
|
{
|
|
29492
29515
|
"name": "propagateChange",
|
|
@@ -29497,7 +29520,7 @@
|
|
|
29497
29520
|
"indexKey": "",
|
|
29498
29521
|
"optional": false,
|
|
29499
29522
|
"description": "<p>function passed in by <code>registerOnChange</code></p>\n",
|
|
29500
|
-
"line":
|
|
29523
|
+
"line": 553,
|
|
29501
29524
|
"rawdescription": "\n\nfunction passed in by `registerOnChange`\n"
|
|
29502
29525
|
},
|
|
29503
29526
|
{
|
|
@@ -29508,7 +29531,7 @@
|
|
|
29508
29531
|
"indexKey": "",
|
|
29509
29532
|
"optional": false,
|
|
29510
29533
|
"description": "<p>Maintains a reference to the <code>AbstractDropdownView</code> object within the content DOM.</p>\n",
|
|
29511
|
-
"line":
|
|
29534
|
+
"line": 359,
|
|
29512
29535
|
"rawdescription": "\n\nMaintains a reference to the `AbstractDropdownView` object within the content DOM.\n",
|
|
29513
29536
|
"decorators": [
|
|
29514
29537
|
{
|
|
@@ -29528,7 +29551,7 @@
|
|
|
29528
29551
|
"optional": false,
|
|
29529
29552
|
"returnType": "void",
|
|
29530
29553
|
"typeParameters": [],
|
|
29531
|
-
"line":
|
|
29554
|
+
"line": 732,
|
|
29532
29555
|
"deprecated": false,
|
|
29533
29556
|
"deprecationMessage": "",
|
|
29534
29557
|
"rawdescription": "\n\nCreates the `Dropdown` list as an element that is appended to the DOM body.\n",
|
|
@@ -29540,7 +29563,7 @@
|
|
|
29540
29563
|
"optional": false,
|
|
29541
29564
|
"returnType": "void",
|
|
29542
29565
|
"typeParameters": [],
|
|
29543
|
-
"line":
|
|
29566
|
+
"line": 724,
|
|
29544
29567
|
"deprecated": false,
|
|
29545
29568
|
"deprecationMessage": "",
|
|
29546
29569
|
"rawdescription": "\n\nCreates the `Dropdown` list appending it to the dropdown parent object instead of the body.\n",
|
|
@@ -29559,7 +29582,7 @@
|
|
|
29559
29582
|
"optional": false,
|
|
29560
29583
|
"returnType": "void",
|
|
29561
29584
|
"typeParameters": [],
|
|
29562
|
-
"line":
|
|
29585
|
+
"line": 704,
|
|
29563
29586
|
"deprecated": false,
|
|
29564
29587
|
"deprecationMessage": "",
|
|
29565
29588
|
"rawdescription": "\n\nHandles keyboard events so users are controlling the `Dropdown` instead of unintentionally controlling outside elements.\n",
|
|
@@ -29582,7 +29605,7 @@
|
|
|
29582
29605
|
"optional": false,
|
|
29583
29606
|
"returnType": "void",
|
|
29584
29607
|
"typeParameters": [],
|
|
29585
|
-
"line":
|
|
29608
|
+
"line": 684,
|
|
29586
29609
|
"deprecated": false,
|
|
29587
29610
|
"deprecationMessage": ""
|
|
29588
29611
|
},
|
|
@@ -29599,7 +29622,7 @@
|
|
|
29599
29622
|
"optional": false,
|
|
29600
29623
|
"returnType": "void",
|
|
29601
29624
|
"typeParameters": [],
|
|
29602
|
-
"line":
|
|
29625
|
+
"line": 688,
|
|
29603
29626
|
"deprecated": false,
|
|
29604
29627
|
"deprecationMessage": "",
|
|
29605
29628
|
"rawdescription": "\n\nHandles clicks outside of the `Dropdown`.\n",
|
|
@@ -29629,7 +29652,7 @@
|
|
|
29629
29652
|
"optional": false,
|
|
29630
29653
|
"returnType": "void",
|
|
29631
29654
|
"typeParameters": [],
|
|
29632
|
-
"line":
|
|
29655
|
+
"line": 696,
|
|
29633
29656
|
"deprecated": false,
|
|
29634
29657
|
"deprecationMessage": "",
|
|
29635
29658
|
"jsdoctags": [
|
|
@@ -29650,7 +29673,7 @@
|
|
|
29650
29673
|
"optional": false,
|
|
29651
29674
|
"returnType": "any",
|
|
29652
29675
|
"typeParameters": [],
|
|
29653
|
-
"line":
|
|
29676
|
+
"line": 746,
|
|
29654
29677
|
"deprecated": false,
|
|
29655
29678
|
"deprecationMessage": "",
|
|
29656
29679
|
"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",
|
|
@@ -29662,7 +29685,7 @@
|
|
|
29662
29685
|
"optional": false,
|
|
29663
29686
|
"returnType": "void",
|
|
29664
29687
|
"typeParameters": [],
|
|
29665
|
-
"line":
|
|
29688
|
+
"line": 665,
|
|
29666
29689
|
"deprecated": false,
|
|
29667
29690
|
"deprecationMessage": ""
|
|
29668
29691
|
},
|
|
@@ -29679,7 +29702,7 @@
|
|
|
29679
29702
|
"optional": false,
|
|
29680
29703
|
"returnType": "void",
|
|
29681
29704
|
"typeParameters": [],
|
|
29682
|
-
"line":
|
|
29705
|
+
"line": 605,
|
|
29683
29706
|
"deprecated": false,
|
|
29684
29707
|
"deprecationMessage": "",
|
|
29685
29708
|
"jsdoctags": [
|
|
@@ -29700,7 +29723,7 @@
|
|
|
29700
29723
|
"optional": false,
|
|
29701
29724
|
"returnType": "void",
|
|
29702
29725
|
"typeParameters": [],
|
|
29703
|
-
"line":
|
|
29726
|
+
"line": 810,
|
|
29704
29727
|
"deprecated": false,
|
|
29705
29728
|
"deprecationMessage": "",
|
|
29706
29729
|
"rawdescription": "\n\nCollapsing the dropdown menu and removing unnecessary `EventListeners`.\n",
|
|
@@ -29712,7 +29735,7 @@
|
|
|
29712
29735
|
"optional": false,
|
|
29713
29736
|
"returnType": "Observable<string>",
|
|
29714
29737
|
"typeParameters": [],
|
|
29715
|
-
"line":
|
|
29738
|
+
"line": 624,
|
|
29716
29739
|
"deprecated": false,
|
|
29717
29740
|
"deprecationMessage": "",
|
|
29718
29741
|
"rawdescription": "\n\nReturns the display value if there is a selection and displayValue is set,\nif there is just a selection the ListItem content property will be returned,\notherwise the placeholder will be returned.\n",
|
|
@@ -29724,7 +29747,7 @@
|
|
|
29724
29747
|
"optional": false,
|
|
29725
29748
|
"returnType": "{ items: any; item?: undefined; } | { item: any; items?: undefined; } | { items?: undefined; item?: undefined; }",
|
|
29726
29749
|
"typeParameters": [],
|
|
29727
|
-
"line":
|
|
29750
|
+
"line": 645,
|
|
29728
29751
|
"deprecated": false,
|
|
29729
29752
|
"deprecationMessage": ""
|
|
29730
29753
|
},
|
|
@@ -29734,7 +29757,7 @@
|
|
|
29734
29757
|
"optional": false,
|
|
29735
29758
|
"returnType": "number",
|
|
29736
29759
|
"typeParameters": [],
|
|
29737
|
-
"line":
|
|
29760
|
+
"line": 659,
|
|
29738
29761
|
"deprecated": false,
|
|
29739
29762
|
"deprecationMessage": ""
|
|
29740
29763
|
},
|
|
@@ -29751,7 +29774,7 @@
|
|
|
29751
29774
|
"optional": false,
|
|
29752
29775
|
"returnType": "void",
|
|
29753
29776
|
"typeParameters": [],
|
|
29754
|
-
"line":
|
|
29777
|
+
"line": 852,
|
|
29755
29778
|
"deprecated": false,
|
|
29756
29779
|
"deprecationMessage": "",
|
|
29757
29780
|
"jsdoctags": [
|
|
@@ -29772,7 +29795,7 @@
|
|
|
29772
29795
|
"optional": false,
|
|
29773
29796
|
"returnType": "boolean",
|
|
29774
29797
|
"typeParameters": [],
|
|
29775
|
-
"line":
|
|
29798
|
+
"line": 641,
|
|
29776
29799
|
"deprecated": false,
|
|
29777
29800
|
"deprecationMessage": ""
|
|
29778
29801
|
},
|
|
@@ -29789,7 +29812,7 @@
|
|
|
29789
29812
|
"optional": false,
|
|
29790
29813
|
"returnType": "boolean",
|
|
29791
29814
|
"typeParameters": [],
|
|
29792
|
-
"line":
|
|
29815
|
+
"line": 848,
|
|
29793
29816
|
"deprecated": false,
|
|
29794
29817
|
"deprecationMessage": "",
|
|
29795
29818
|
"modifierKind": [
|
|
@@ -29813,7 +29836,7 @@
|
|
|
29813
29836
|
"optional": false,
|
|
29814
29837
|
"returnType": "void",
|
|
29815
29838
|
"typeParameters": [],
|
|
29816
|
-
"line":
|
|
29839
|
+
"line": 535,
|
|
29817
29840
|
"deprecated": false,
|
|
29818
29841
|
"deprecationMessage": ""
|
|
29819
29842
|
},
|
|
@@ -29830,7 +29853,7 @@
|
|
|
29830
29853
|
"optional": false,
|
|
29831
29854
|
"returnType": "void",
|
|
29832
29855
|
"typeParameters": [],
|
|
29833
|
-
"line":
|
|
29856
|
+
"line": 570,
|
|
29834
29857
|
"deprecated": false,
|
|
29835
29858
|
"deprecationMessage": "",
|
|
29836
29859
|
"rawdescription": "\n\nAdds keyboard functionality for navigation, selection and closing of the `Dropdown`.\n",
|
|
@@ -29862,7 +29885,7 @@
|
|
|
29862
29885
|
"optional": false,
|
|
29863
29886
|
"returnType": "void",
|
|
29864
29887
|
"typeParameters": [],
|
|
29865
|
-
"line":
|
|
29888
|
+
"line": 766,
|
|
29866
29889
|
"deprecated": false,
|
|
29867
29890
|
"deprecationMessage": "",
|
|
29868
29891
|
"rawdescription": "\n\nExpands the dropdown menu in the view.\n",
|
|
@@ -29881,7 +29904,7 @@
|
|
|
29881
29904
|
"optional": false,
|
|
29882
29905
|
"returnType": "void",
|
|
29883
29906
|
"typeParameters": [],
|
|
29884
|
-
"line":
|
|
29907
|
+
"line": 539,
|
|
29885
29908
|
"deprecated": false,
|
|
29886
29909
|
"deprecationMessage": "",
|
|
29887
29910
|
"jsdoctags": [
|
|
@@ -29909,7 +29932,7 @@
|
|
|
29909
29932
|
"optional": false,
|
|
29910
29933
|
"returnType": "void",
|
|
29911
29934
|
"typeParameters": [],
|
|
29912
|
-
"line":
|
|
29935
|
+
"line": 546,
|
|
29913
29936
|
"deprecated": false,
|
|
29914
29937
|
"deprecationMessage": "",
|
|
29915
29938
|
"rawdescription": "\n\nRegistering the function injected to control the touch use of the `Dropdown`.\n",
|
|
@@ -29939,7 +29962,7 @@
|
|
|
29939
29962
|
"optional": false,
|
|
29940
29963
|
"returnType": "void",
|
|
29941
29964
|
"typeParameters": [],
|
|
29942
|
-
"line":
|
|
29965
|
+
"line": 562,
|
|
29943
29966
|
"deprecated": false,
|
|
29944
29967
|
"deprecationMessage": "",
|
|
29945
29968
|
"rawdescription": "\n\n`ControlValueAccessor` method to programmatically disable the dropdown.\n\nex: `this.formGroup.get(\"myDropdown\").disable();`\n\n",
|
|
@@ -29947,8 +29970,8 @@
|
|
|
29947
29970
|
"jsdoctags": [
|
|
29948
29971
|
{
|
|
29949
29972
|
"name": {
|
|
29950
|
-
"pos":
|
|
29951
|
-
"end":
|
|
29973
|
+
"pos": 16305,
|
|
29974
|
+
"end": 16315,
|
|
29952
29975
|
"kind": 80,
|
|
29953
29976
|
"id": 0,
|
|
29954
29977
|
"flags": 16842752,
|
|
@@ -29959,8 +29982,8 @@
|
|
|
29959
29982
|
"deprecated": false,
|
|
29960
29983
|
"deprecationMessage": "",
|
|
29961
29984
|
"tagName": {
|
|
29962
|
-
"pos":
|
|
29963
|
-
"end":
|
|
29985
|
+
"pos": 16299,
|
|
29986
|
+
"end": 16304,
|
|
29964
29987
|
"kind": 80,
|
|
29965
29988
|
"id": 0,
|
|
29966
29989
|
"flags": 16842752,
|
|
@@ -29977,7 +30000,7 @@
|
|
|
29977
30000
|
"optional": false,
|
|
29978
30001
|
"returnType": "void",
|
|
29979
30002
|
"typeParameters": [],
|
|
29980
|
-
"line":
|
|
30003
|
+
"line": 840,
|
|
29981
30004
|
"deprecated": false,
|
|
29982
30005
|
"deprecationMessage": "",
|
|
29983
30006
|
"rawdescription": "\n\nControls toggling menu states between open/expanded and closed/collapsed.\n",
|
|
@@ -29989,7 +30012,7 @@
|
|
|
29989
30012
|
"optional": false,
|
|
29990
30013
|
"returnType": "boolean",
|
|
29991
30014
|
"typeParameters": [],
|
|
29992
|
-
"line":
|
|
30015
|
+
"line": 679,
|
|
29993
30016
|
"deprecated": false,
|
|
29994
30017
|
"deprecationMessage": "",
|
|
29995
30018
|
"rawdescription": "\n\nReturns `true` if there is a value selected.\n",
|
|
@@ -30008,7 +30031,7 @@
|
|
|
30008
30031
|
"optional": false,
|
|
30009
30032
|
"returnType": "void",
|
|
30010
30033
|
"typeParameters": [],
|
|
30011
|
-
"line":
|
|
30034
|
+
"line": 496,
|
|
30012
30035
|
"deprecated": false,
|
|
30013
30036
|
"deprecationMessage": "",
|
|
30014
30037
|
"rawdescription": "\n\nPropagates the injected `value`.\n",
|
|
@@ -30034,7 +30057,7 @@
|
|
|
30034
30057
|
"defaultValue": "true",
|
|
30035
30058
|
"deprecated": false,
|
|
30036
30059
|
"deprecationMessage": "",
|
|
30037
|
-
"line":
|
|
30060
|
+
"line": 369,
|
|
30038
30061
|
"type": "boolean",
|
|
30039
30062
|
"decorators": []
|
|
30040
30063
|
},
|
|
@@ -30043,7 +30066,7 @@
|
|
|
30043
30066
|
"defaultValue": "true",
|
|
30044
30067
|
"deprecated": false,
|
|
30045
30068
|
"deprecationMessage": "",
|
|
30046
|
-
"line":
|
|
30069
|
+
"line": 371,
|
|
30047
30070
|
"type": "boolean",
|
|
30048
30071
|
"decorators": []
|
|
30049
30072
|
},
|
|
@@ -30051,7 +30074,7 @@
|
|
|
30051
30074
|
"name": "class.cds--list-box__wrapper--fluid--focus",
|
|
30052
30075
|
"deprecated": false,
|
|
30053
30076
|
"deprecationMessage": "",
|
|
30054
|
-
"line":
|
|
30077
|
+
"line": 219,
|
|
30055
30078
|
"type": "boolean",
|
|
30056
30079
|
"decorators": []
|
|
30057
30080
|
},
|
|
@@ -30059,7 +30082,7 @@
|
|
|
30059
30082
|
"name": "class.cds--list-box__wrapper--fluid--invalid",
|
|
30060
30083
|
"deprecated": false,
|
|
30061
30084
|
"deprecationMessage": "",
|
|
30062
|
-
"line":
|
|
30085
|
+
"line": 215,
|
|
30063
30086
|
"type": "boolean",
|
|
30064
30087
|
"decorators": []
|
|
30065
30088
|
}
|
|
@@ -30082,7 +30105,7 @@
|
|
|
30082
30105
|
"deprecationMessage": "",
|
|
30083
30106
|
"rawdescription": "\n\nAdds keyboard functionality for navigation, selection and closing of the `Dropdown`.\n",
|
|
30084
30107
|
"description": "<p>Adds keyboard functionality for navigation, selection and closing of the <code>Dropdown</code>.</p>\n",
|
|
30085
|
-
"line":
|
|
30108
|
+
"line": 570
|
|
30086
30109
|
}
|
|
30087
30110
|
],
|
|
30088
30111
|
"standalone": false,
|
|
@@ -30090,7 +30113,7 @@
|
|
|
30090
30113
|
"description": "<p>Drop-down lists enable users to select one or more items from a list.</p>\n<h4>Opening behavior/List DOM placement</h4>\n<p>By default the dropdown will try to figure out the best placement for the dropdown list.</p>\n<p>If it's not contained within any scrolling elements, it will open inline, if it <em>is</em>\ncontained within a scrolling container it will try to open in the body, or an <code>cds-placeholder</code>.</p>\n<p>To control this behavior you can use the <code>appendInline</code> input:</p>\n<ul>\n<li><code>[appendInline]="null"</code> is the default (auto detection)</li>\n<li><code>[appendInline]="false"</code> will always append to the body/<code>cds-placeholder</code></li>\n<li><code>[appendInline]="true"</code> will always append inline (next to the dropdown button)</li>\n</ul>\n<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { DropdownModule } from 'carbon-components-angular';</code></pre></div><p><a href=\"../../?path=/story/components-dropdown--basic\">See demo</a></p>\n",
|
|
30091
30114
|
"rawdescription": "\n\nDrop-down lists enable users to select one or more items from a list.\n\n#### Opening behavior/List DOM placement\nBy default the dropdown will try to figure out the best placement for the dropdown list.\n\nIf it's not contained within any scrolling elements, it will open inline, if it _is_\ncontained within a scrolling container it will try to open in the body, or an `cds-placeholder`.\n\nTo control this behavior you can use the `appendInline` input:\n- `[appendInline]=\"null\"` is the default (auto detection)\n- `[appendInline]=\"false\"` will always append to the body/`cds-placeholder`\n- `[appendInline]=\"true\"` will always append inline (next to the dropdown button)\n\nGet started with importing the module:\n\n```typescript\nimport { DropdownModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-dropdown--basic)\n",
|
|
30092
30115
|
"type": "component",
|
|
30093
|
-
"sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tContentChild,\n\tOnInit,\n\tViewChild,\n\tAfterContentInit,\n\tHostListener,\n\tOnDestroy,\n\tHostBinding,\n\tTemplateRef,\n\tAfterViewInit\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\n\n// Observable import is required here so typescript can compile correctly\nimport {\n\tObservable,\n\tof,\n\tSubscription\n} from \"rxjs\";\n\nimport { AbstractDropdownView } from \"./abstract-dropdown-view.class\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { ListItem } from \"./list-item.interface\";\nimport { DropdownService } from \"./dropdown.service\";\nimport { ElementService, getScrollableParents } from \"carbon-components-angular/utils\";\nimport { hasScrollableParents } from \"carbon-components-angular/utils\";\n\n/**\n * Drop-down lists enable users to select one or more items from a list.\n *\n * #### Opening behavior/List DOM placement\n * By default the dropdown will try to figure out the best placement for the dropdown list.\n *\n * If it's not contained within any scrolling elements, it will open inline, if it _is_\n * contained within a scrolling container it will try to open in the body, or an `cds-placeholder`.\n *\n * To control this behavior you can use the `appendInline` input:\n * - `[appendInline]=\"null\"` is the default (auto detection)\n * - `[appendInline]=\"false\"` will always append to the body/`cds-placeholder`\n * - `[appendInline]=\"true\"` will always append inline (next to the dropdown button)\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { DropdownModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-dropdown--basic)\n */\n@Component({\n\tselector: \"cds-dropdown, ibm-dropdown\",\n\ttemplate: `\n\t\t@if (label && !skeleton) {\n\t\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t}\">\n\t\t\t\t@if (isTemplate(label)) {\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"label\" />\n\t\t\t\t} @else {\n\t\t\t\t\t{{label}}\n\t\t\t\t}\n\t\t\t</label>\n\t\t}\n\t\t<div\n\t\t\tclass=\"cds--list-box\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--dropdown': type !== 'multi' && !(skeleton && fluid),\n\t\t\t\t'cds--multiselect': type === 'multi',\n\t\t\t\t'cds--multi-select--selected': type === 'multi' && getSelectedCount() > 0,\n\t\t\t\t'cds--dropdown--light': theme === 'light',\n\t\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t\t'cds--list-box--inline': inline,\n\t\t\t\t'cds--skeleton': skeleton,\n\t\t\t\t'cds--dropdown--disabled cds--list-box--disabled': disabled,\n\t\t\t\t'cds--dropdown--readonly': readonly,\n\t\t\t\t'cds--dropdown--invalid': invalid,\n\t\t\t\t'cds--dropdown--warning cds--list-box--warning': warn,\n\t\t\t\t'cds--dropdown--sm cds--list-box--sm': size === 'sm',\n\t\t\t\t'cds--dropdown--md cds--list-box--md': size === 'md',\n\t\t\t\t'cds--dropdown--lg cds--list-box--lg': size === 'lg',\n\t\t\t\t'cds--list-box--expanded': !menuIsClosed,\n\t\t\t\t'cds--list-box--invalid': invalid\n\t\t\t}\"\n\t\t\t[attr.data-invalid]=\"invalid ? true : null\">\n\t\t\t@if (skeleton && fluid) {\n\t\t\t\t<div class=\"cds--list-box__label\"></div>\n\t\t\t}\n\t\t\t<button\n\t\t\t\t#dropdownButton\n\t\t\t\t[id]=\"id\"\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"cds--list-box__field\"\n\t\t\t\t[ngClass]=\"{'a': !menuIsClosed}\"\n\t\t\t\t[attr.aria-expanded]=\"!menuIsClosed\"\n\t\t\t\t[attr.aria-disabled]=\"disabled\"\n\t\t\t\t[attr.aria-readonly]=\"readonly\"\n\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t(click)=\"disabled || readonly ? $event.stopPropagation() : toggleMenu()\"\n\t\t\t\t(focus)=\"fluid ? handleFocus($event) : null\"\n\t\t\t\t(blur)=\"fluid ? handleFocus($event) : onBlur()\"\n\t\t\t\t[attr.disabled]=\"disabled ? true : null\">\n\t\t\t\t@if (type === 'multi' && getSelectedCount() > 0) {\n\t\t\t\t\t<div\n\t\t\t\t\t\t(click)=\"clearSelected()\"\n\t\t\t\t\t\t(keydown.enter)=\"clearSelected()\"\n\n\t\t\t\t\t\tclass=\"cds--list-box__selection cds--tag--filter cds--list-box__selection--multi\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[title]=\"clearText\">\n\t\t\t\t\t\t{{getSelectedCount()}}\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\taria-hidden=\"true\">\n\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</svg>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (isRenderString()) {\n\t\t\t\t\t<span class=\"cds--list-box__label\">{{getDisplayStringValue() | async}}</span>\n\t\t\t\t} @else {\n\t\t\t\t\t<ng-template [ngTemplateOutletContext]=\"getRenderTemplateContext()\" [ngTemplateOutlet]=\"displayValue\" />\n\t\t\t\t}\n\t\t\t\t<span class=\"cds--list-box__menu-icon\">\n\t\t\t\t\t@if (!skeleton) {\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"menuButtonLabel\"\n\t\t\t\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': !menuIsClosed }\">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t}\n\t\t\t\t</span>\n\t\t\t</button>\n\t\t\t@if (invalid) {\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"cds--list-box__invalid-icon\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\">\n\t\t\t\t</svg>\n\t\t\t} @else if(warn) {\n\t\t\t\t<svg\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t\t\t</svg>\n\t\t\t}\n\t\t\t<div\n\t\t\t\t#dropdownMenu\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t\t}\">\n\t\t\t\t@if (!menuIsClosed) {\n\t\t\t\t\t<ng-content />\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t\t@if (fluid) {\n\t\t\t<hr class=\"cds--list-box__divider\" />\n\t\t}\n\t\t@if (invalid) {\n\t\t\t<div class=\"cds--form-requirement\">\n\t\t\t\t@if (isTemplate(invalidText)) {\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"invalidText\" />\n\t\t\t\t} @else {\n\t\t\t\t\t{{ invalidText }}\n\t\t\t\t}\n\t\t\t</div>\n\t\t} @else if (warn) {\n\t\t\t<div class=\"cds--form-requirement\">\n\t\t\t\t@if (isTemplate(warnText)) {\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"warnText\" />\n\t\t\t\t} @else {\n\t\t\t\t\t{{warnText}}\n\t\t\t\t}\n\t\t\t</div>\n\t\t} @else if(helperText && !fluid) {\n\t\t\t<div\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t}\">\n\t\t\t\t@if (isTemplate(helperText)) {\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"helperText\" />\n\t\t\t\t} @else {\n\t\t\t\t\t{{helperText}}\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Dropdown,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Dropdown implements OnInit, AfterContentInit, AfterViewInit, OnDestroy, ControlValueAccessor {\n\tstatic dropdownCount = 0;\n\t@HostBinding(\"class.cds--list-box__wrapper--fluid--invalid\") get fluidInvalidClass() {\n\t\treturn this.invalid && this.fluid;\n\t}\n\n\t@HostBinding(\"class.cds--list-box__wrapper--fluid--focus\") get fluidFocusClass() {\n\t\treturn this.fluid && this._isFocused && this.menuIsClosed;\n\t}\n\n\tprotected get writtenValue() {\n\t\treturn this._writtenValue;\n\t}\n\n\tprotected set writtenValue(val: any[]) {\n\t\tif (val && val.length === 0) {\n\t\t\tthis.clearSelected();\n\t\t}\n\t\tthis._writtenValue = val;\n\t}\n\n\t@Input() id = `dropdown-${Dropdown.dropdownCount++}`;\n\t/**\n\t * Label for the dropdown.\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 * Value displayed if no item is selected.\n\t */\n\t@Input() placeholder = \"\";\n\t/**\n\t * The selected value from the `Dropdown`. Can be a string or template.\n\t */\n\t@Input() displayValue: string | TemplateRef<any> = \"\";\n\t/**\n\t * Sets the optional clear button tooltip text.\n\t */\n\t@Input() clearText: string = this.i18n.get().DROPDOWN.CLEAR;\n\t/**\n\t * Size to render the dropdown field.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Defines whether or not the `Dropdown` supports selecting multiple items as opposed to single\n\t * item selection.\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` dropdown theme\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set to `true` to disable the dropdown.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a readonly state.\n\t */\n\t@Input() readonly = false;\n\t/**\n\t * Set to `true` for a loading dropdown.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an inline dropdown.\n\t */\n\t@Input() inline = false;\n\t/**\n\t * Set to `true` for a dropdown without arrow key activation.\n\t */\n\t@Input() disableArrowKeys = false;\n\t/**\n\t * Set to `true` for invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if dropdown is in 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 warningText)\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 * set to `true` to place the dropdown view inline with the component\n\t */\n\t@Input() appendInline: boolean = null;\n\t/**\n\t * Query string for the element that contains the `Dropdown`.\n\t * Used to trigger closing the dropdown if it scrolls outside of the viewport of the `scrollableContainer`.\n\t */\n\t@Input() scrollableContainer: string;\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 * Specify feedback (mode) of the selection.\n\t * `top`: selected item jumps to top\n\t * `fixed`: selected item stays at it's 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 * Accessible label for the button that opens the dropdown list.\n\t * Defaults to the `DROPDOWN.OPEN` value from the i18n service.\n\t */\n\t@Input() menuButtonLabel = this.i18n.get().DROPDOWN.OPEN;\n\t/**\n\t * Provides the label for the \"# selected\" text.\n\t * Defaults to the `DROPDOWN.SELECTED` value from the i18n service.\n\t */\n\t@Input() selectedLabel = this.i18n.get().DROPDOWN.SELECTED;\n\t/**\n\t * Overrides the automatic dropUp.\n\t */\n\t@Input() dropUp: boolean;\n\t/**\n\t * Emits selection events.\n\t */\n\t@Output() selected: EventEmitter<Object> = new EventEmitter<Object>();\n\t/**\n\t * Emits event notifying to other classes that the `Dropdown` has been closed (collapsed).\n\t */\n\t@Output() onClose: EventEmitter<any> = new EventEmitter<any>();\n\t/**\n\t * Emits event notifying to other classes that the `Dropdown` has been closed (collapsed).\n\t */\n\t@Output() close: EventEmitter<any> = new EventEmitter<any>();\n\n\t/**\n\t * Maintains a reference to the `AbstractDropdownView` object within the content DOM.\n\t */\n\t@ContentChild(AbstractDropdownView, { static: true }) view: AbstractDropdownView;\n\t/**\n\t * Maintains a reference to the view DOM element of the `Dropdown` button.\n\t */\n\t@ViewChild(\"dropdownButton\", { static: true }) dropdownButton;\n\t/**\n\t * ViewChid of the dropdown view.\n\t */\n\t@ViewChild(\"dropdownMenu\", { static: true }) dropdownMenu;\n\n\t@HostBinding(\"class.cds--dropdown__wrapper\") hostClass = true;\n\n\t@HostBinding(\"class.cds--list-box__wrapper\") hostWrapperClass = true;\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@HostBinding(\"class.cds--list-box__wrapper--fluid\") @Input() fluid = false;\n\n\t/**\n\t * Set to `true` if the dropdown is closed (not expanded).\n\t */\n\tmenuIsClosed = true;\n\n\t/**\n\t * controls whether the `drop-up` class is applied\n\t */\n\t_dropUp = false;\n\n\t// .bind creates a new function, so we declare the methods below\n\t// but .bind them up here\n\tnoop = this._noop.bind(this);\n\toutsideClick = this._outsideClick.bind(this);\n\toutsideKey = this._outsideKey.bind(this);\n\tkeyboardNav = this._keyboardNav.bind(this);\n\n\tprotected visibilitySubscription = new Subscription();\n\n\tprotected onTouchedCallback: () => void = this._noop;\n\n\tprotected _isFocused = false;\n\n\t// primarily used to capture and propagate input to `writeValue` before the content is available\n\tprivate _writtenValue: any = [];\n\n\t/**\n\t * Creates an instance of Dropdown.\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected i18n: I18n,\n\t\tprotected dropdownService: DropdownService,\n\t\tprotected elementService: ElementService) {}\n\n\t/**\n\t * Updates the `type` property in the `@ContentChild`.\n\t * The `type` property specifies whether the `Dropdown` allows single selection or multi selection.\n\t */\n\tngOnInit() {\n\t\tif (this.view) {\n\t\t\tthis.view.type = this.type;\n\t\t}\n\t}\n\n\t/**\n\t * Initializes classes and subscribes to events for single or multi selection.\n\t */\n\tngAfterContentInit() {\n\t\tif (!this.view) {\n\t\t\treturn;\n\t\t}\n\t\tif ((this.writtenValue && this.writtenValue.length) || typeof this.writtenValue === \"number\") {\n\t\t\tthis.writeValue(this.writtenValue);\n\t\t}\n\t\tthis.view.type = this.type;\n\t\tthis.view.size = this.size;\n\n\t\t// function to check if the event is organic (isUpdate === false) or programmatic\n\t\tconst isUpdate = event => event && event.isUpdate;\n\n\t\tthis.view.select.subscribe(event => {\n\t\t\tif (this.type === \"single\" && !isUpdate(event) && !Array.isArray(event)) {\n\t\t\t\tthis.closeMenu();\n\t\t\t\tif (event.item && event.item.selected) {\n\t\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t\tthis.propagateChange(event.item[this.itemValueKey]);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.propagateChange(event.item);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tthis.propagateChange(null);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (this.type === \"multi\" && !isUpdate(event)) {\n\t\t\t\t// if we have a `value` selector and selected items map them appropriately\n\t\t\t\tif (this.itemValueKey && this.view.getSelected()) {\n\t\t\t\t\tconst values = this.view.getSelected().map(item => item[this.itemValueKey]);\n\t\t\t\t\tthis.propagateChange(values);\n\t\t\t\t\t// otherwise just pass up the values from `getSelected`\n\t\t\t\t} else {\n\t\t\t\t\tthis.propagateChange(this.view.getSelected());\n\t\t\t\t}\n\t\t\t}\n\t\t\t// only emit selected for \"organic\" selections\n\t\t\tif (!isUpdate(event)) {\n\t\t\t\tthis.checkForReorder();\n\t\t\t\tthis.selected.emit(event);\n\t\t\t}\n\t\t});\n\t}\n\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\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\tthis.checkForReorder();\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 * Propagates the injected `value`.\n\t */\n\twriteValue(value: any) {\n\t\t// cache the written value so we can use it in `AfterContentInit`\n\t\tthis.writtenValue = value;\n\t\tthis.view.onItemsReady(() => {\n\t\t\t// propagate null/falsey as an array (deselect everything)\n\t\t\tif (!value) {\n\t\t\t\tthis.view.propagateSelected([value]);\n\t\t\t} else if (this.type === \"single\") {\n\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t// clone the specified item and update its state\n\t\t\t\t\tconst newValue = Object.assign({}, this.view.getListItems().find(item => item[this.itemValueKey] === value));\n\t\t\t\t\tnewValue.selected = true;\n\t\t\t\t\tthis.view.propagateSelected([newValue]);\n\t\t\t\t} else {\n\t\t\t\t\t// pass the singular value as an array of ListItem\n\t\t\t\t\tthis.view.propagateSelected([value]);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t// clone the items and update their state based on the received value array\n\t\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\t\tlet newValues = [];\n\t\t\t\t\tfor (const v of value) {\n\t\t\t\t\t\tfor (const item of this.view.getListItems()) {\n\t\t\t\t\t\t\tif (item[this.itemValueKey] === v) {\n\t\t\t\t\t\t\t\tnewValues.push(Object.assign({}, item, { selected: true }));\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tthis.view.propagateSelected(newValues);\n\t\t\t\t} else {\n\t\t\t\t\t// we can safely assume we're passing an array of `ListItem`s\n\t\t\t\t\tthis.view.propagateSelected(value);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.checkForReorder();\n\t\t});\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registering the function injected to control the touch use of the `Dropdown`.\n\t */\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\n\t/**\n\t * function passed in by `registerOnChange`\n\t */\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the dropdown.\n\t *\n\t * ex: `this.formGroup.get(\"myDropdown\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the input\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Adds keyboard functionality for navigation, selection and closing of the `Dropdown`.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\tonKeyDown(event: KeyboardEvent) {\n\t\tif (this.readonly) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ((event.key === \"Escape\") && !this.menuIsClosed) {\n\t\t\tevent.stopImmediatePropagation(); // don't unintentionally close other widgets that listen for Escape\n\t\t}\n\t\tif (event.key === \"Escape\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.closeMenu();\n\t\t\tthis.dropdownButton.nativeElement.focus();\n\t\t} else if (this.menuIsClosed && (event.key === \" \" || event.key === \"ArrowDown\" || event.key === \"ArrowUp\")) {\n\t\t\tif (this.disableArrowKeys && (event.key === \"ArrowDown\" || event.key === \"ArrowUp\")) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tevent.preventDefault();\n\t\t\tthis.openMenu();\n\t\t}\n\n\t\tif (!this.menuIsClosed && event.key === \"Tab\" && this.dropdownMenu.nativeElement.contains(event.target as Node)) {\n\t\t\tthis.closeMenu();\n\t\t}\n\n\t\tif (!this.menuIsClosed && event.key === \"Tab\" && event.shiftKey) {\n\t\t\tthis.closeMenu();\n\t\t}\n\n\t\tif (this.type === \"multi\") { return; }\n\n\t\tif (this.menuIsClosed) {\n\t\t\tthis.closedDropdownNavigation(event);\n\t\t}\n\t}\n\n\tclosedDropdownNavigation(event) {\n\t\tif (event.key === \"ArrowDown\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.view.getCurrentItem().selected = false;\n\t\t\tlet item = this.view.getNextItem();\n\t\t\tif (item) { item.selected = true; }\n\t\t} else if (event.key === \"ArrowUp\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.view.getCurrentItem().selected = false;\n\t\t\tlet item = this.view.getPrevItem();\n\t\t\tif (item) { item.selected = true; }\n\t\t}\n\t}\n\n\t/**\n\t * Returns the display value if there is a selection and displayValue is set,\n\t * if there is just a selection the ListItem content property will be returned,\n\t * otherwise the placeholder will be returned.\n\t */\n\tgetDisplayStringValue(): Observable<string> {\n\t\tif (!this.view || this.skeleton) {\n\t\t\treturn;\n\t\t}\n\t\tlet selected = this.view.getSelected();\n\t\tif (selected.length && (!this.displayValue || !this.isRenderString())) {\n\t\t\tif (this.type === \"multi\") {\n\t\t\t\treturn of(this.placeholder);\n\t\t\t} else {\n\t\t\t\treturn of(selected[0].content);\n\t\t\t}\n\t\t} else if (selected.length && this.isRenderString()) {\n\t\t\treturn of(this.displayValue as string);\n\t\t}\n\t\treturn of(this.placeholder);\n\t}\n\n\tisRenderString(): boolean {\n\t\treturn typeof this.displayValue === \"string\";\n\t}\n\n\tgetRenderTemplateContext() {\n\t\tif (!this.view) {\n\t\t\treturn;\n\t\t}\n\t\tlet selected = this.view.getSelected();\n\t\tif (this.type === \"multi\") {\n\t\t\treturn { items: selected };\n\t\t} else if (selected && selected.length > 0) {\n\t\t\treturn { item: selected[0] }; // this is to be compatible with the dropdown-list template\n\t\t} else {\n\t\t\treturn {};\n\t\t}\n\t}\n\n\tgetSelectedCount(): number {\n\t\tif (this.view.getSelected()) {\n\t\t\treturn this.view.getSelected().length;\n\t\t}\n\t}\n\n\tclearSelected() {\n\t\tif (this.disabled || this.getSelectedCount() === 0) {\n\t\t\treturn;\n\t\t}\n\t\tfor (const item of this.view.getListItems()) {\n\t\t\titem.selected = false;\n\t\t}\n\t\tthis.selected.emit([]);\n\t\tthis.propagateChange([]);\n\t}\n\n\t/**\n\t * Returns `true` if there is a value selected.\n\t */\n\tvalueSelected(): boolean {\n\t\tif (this.view.getSelected()) { return true; }\n\t\treturn false;\n\t}\n\n\t_noop() { }\n\t/**\n\t * Handles clicks outside of the `Dropdown`.\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.closeMenu();\n\t\t}\n\t}\n\t_outsideKey(event) {\n\t\tif (!this.menuIsClosed && event.key === \"Tab\" && this.dropdownMenu.nativeElement.contains(event.target as Node)) {\n\t\t\tthis.closeMenu();\n\t\t}\n\t}\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.menuIsClosed) {\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.closeMenu();\n\t\t\tthis.dropdownButton.nativeElement.focus();\n\t\t} else if (!this.menuIsClosed && 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.dropdownButton.nativeElement.focus();\n\t\t\tthis.dropdownButton.nativeElement.dispatchEvent(new KeyboardEvent(\"keydown\", { bubbles: true, cancelable: true, key: \"Tab\" }));\n\t\t\tthis.closeMenu();\n\t\t}\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 * Creates the `Dropdown` list as an element that is appended to the DOM body.\n\t */\n\t_appendToBody() {\n\t\tconst lightClass = this.theme === \"light\" ? \" cds--list-box--light\" : \"\";\n\t\tconst expandedClass = !this.menuIsClosed ? \" cds--list-box--expanded\" : \"\";\n\t\tthis.dropdownService.appendToBody(\n\t\t\tthis.dropdownButton.nativeElement,\n\t\t\tthis.dropdownMenu.nativeElement,\n\t\t\t`${this.elementRef.nativeElement.className}${lightClass}${expandedClass}`);\n\t\tthis.dropdownMenu.nativeElement.addEventListener(\"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 * Expands the dropdown menu in the view.\n\t */\n\topenMenu() {\n\t\t// prevents the dropdown from opening when list of items is empty\n\t\tif (this.view.getListItems().length === 0) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._dropUp = false;\n\t\tthis.menuIsClosed = false;\n\n\t\t// move the dropdown list to the body if we're not appending inline\n\t\t// and position it relative to the dropdown wrapper\n\t\tif (!this.appendInline) {\n\t\t\tconst target = this.dropdownButton.nativeElement;\n\t\t\tconst parent = this.elementRef.nativeElement;\n\t\t\tthis.visibilitySubscription = this.elementService\n\t\t\t\t.visibility(target, parent)\n\t\t\t\t.subscribe(value => {\n\t\t\t\t\tif (!value.visible) {\n\t\t\t\t\t\tthis.closeMenu();\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\tthis._appendToBody();\n\t\t}\n\n\t\t// set the dropdown menu to drop up if it's near the bottom of the screen\n\t\t// setTimeout lets us measure after it's 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\n\t\t// we bind noop to document.body.firstElementChild to allow safari to fire events\n\t\t// from document. Then we unbind everything later to keep things light.\n\t\tdocument.body.firstElementChild.addEventListener(\"click\", this.noop, true);\n\t\tdocument.body.firstElementChild.addEventListener(\"keydown\", this.noop, true);\n\t\tdocument.addEventListener(\"click\", this.outsideClick, true);\n\t\tdocument.addEventListener(\"keydown\", this.outsideKey, true);\n\t\tsetTimeout(() => this.view.initFocus(), 0);\n\t}\n\n\t/**\n\t * Collapsing the dropdown menu and removing unnecessary `EventListeners`.\n\t */\n\tcloseMenu() {\n\t\t// return early if the menu is already closed\n\t\tif (this.menuIsClosed) { return; }\n\t\tthis.menuIsClosed = true;\n\t\tthis.checkForReorder();\n\t\tthis.onClose.emit();\n\t\tthis.close.emit();\n\n\t\t// focus the trigger button when we close ...\n\t\tthis.dropdownButton.nativeElement.focus();\n\n\t\t// remove the conditional once this api is settled and part of abstract-dropdown-view.class\n\t\tif (this.view[\"disableScroll\"]) {\n\t\t\tthis.view[\"disableScroll\"]();\n\t\t}\n\n\t\t// move the list back in the component on close\n\t\tif (!this.appendInline) {\n\t\t\tthis.visibilitySubscription.unsubscribe();\n\t\t\tthis._appendToDropdown();\n\t\t}\n\t\tdocument.body.firstElementChild.removeEventListener(\"click\", this.noop, true);\n\t\tdocument.body.firstElementChild.removeEventListener(\"keydown\", this.noop, true);\n\t\tdocument.removeEventListener(\"click\", this.outsideClick, true);\n\t\tdocument.removeEventListener(\"keydown\", this.outsideKey, true);\n\t}\n\n\t/**\n\t * Controls toggling menu states between open/expanded and closed/collapsed.\n\t */\n\ttoggleMenu() {\n\t\tif (this.menuIsClosed) {\n\t\t\tthis.openMenu();\n\t\t} else {\n\t\t\tthis.closeMenu();\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\thandleFocus(event: FocusEvent) {\n\t\tthis._isFocused = event.type === \"focus\";\n\t\tif (event.type === \"blur\") {\n\t\t\tthis.onBlur();\n\t\t}\n\t}\n\n\t/**\n\t * Controls when it's needed to apply the selection feedback\n\t */\n\tprotected checkForReorder() {\n\t\tconst topAfterReopen = this.menuIsClosed && this.selectionFeedback === \"top-after-reopen\";\n\t\tif ((this.type === \"multi\") && (topAfterReopen || this.selectionFeedback === \"top\")) {\n\t\t\tthis.view.reorderSelected();\n\t\t}\n\t}\n}\n",
|
|
30116
|
+
"sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tContentChild,\n\tOnInit,\n\tViewChild,\n\tAfterContentInit,\n\tHostListener,\n\tOnDestroy,\n\tHostBinding,\n\tTemplateRef,\n\tAfterViewInit\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\n\n// Observable import is required here so typescript can compile correctly\nimport {\n\tObservable,\n\tof,\n\tSubscription\n} from \"rxjs\";\n\nimport { AbstractDropdownView } from \"./abstract-dropdown-view.class\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { DropdownService } from \"./dropdown.service\";\nimport { ElementService, getScrollableParents } from \"carbon-components-angular/utils\";\nimport { hasScrollableParents } from \"carbon-components-angular/utils\";\n\n/**\n * Drop-down lists enable users to select one or more items from a list.\n *\n * #### Opening behavior/List DOM placement\n * By default the dropdown will try to figure out the best placement for the dropdown list.\n *\n * If it's not contained within any scrolling elements, it will open inline, if it _is_\n * contained within a scrolling container it will try to open in the body, or an `cds-placeholder`.\n *\n * To control this behavior you can use the `appendInline` input:\n * - `[appendInline]=\"null\"` is the default (auto detection)\n * - `[appendInline]=\"false\"` will always append to the body/`cds-placeholder`\n * - `[appendInline]=\"true\"` will always append inline (next to the dropdown button)\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { DropdownModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-dropdown--basic)\n */\n@Component({\n\tselector: \"cds-dropdown, ibm-dropdown\",\n\ttemplate: `\n\t\t@if (label && !skeleton) {\n\t\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t}\">\n\t\t\t\t@if (isTemplate(label)) {\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"label\" />\n\t\t\t\t} @else {\n\t\t\t\t\t{{label}}\n\t\t\t\t}\n\t\t\t</label>\n\t\t}\n\t\t<div\n\t\t\tclass=\"cds--list-box\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--dropdown': type !== 'multi' && !(skeleton && fluid),\n\t\t\t\t'cds--multiselect': type === 'multi',\n\t\t\t\t'cds--multi-select--selected': type === 'multi' && getSelectedCount() > 0,\n\t\t\t\t'cds--dropdown--light': theme === 'light',\n\t\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t\t'cds--list-box--inline': inline,\n\t\t\t\t'cds--skeleton': skeleton,\n\t\t\t\t'cds--dropdown--disabled cds--list-box--disabled': disabled,\n\t\t\t\t'cds--dropdown--readonly': readonly,\n\t\t\t\t'cds--dropdown--invalid': invalid,\n\t\t\t\t'cds--dropdown--warning cds--list-box--warning': warn,\n\t\t\t\t'cds--dropdown--sm cds--list-box--sm': size === 'sm',\n\t\t\t\t'cds--dropdown--md cds--list-box--md': size === 'md',\n\t\t\t\t'cds--dropdown--lg cds--list-box--lg': size === 'lg',\n\t\t\t\t'cds--list-box--expanded': !menuIsClosed,\n\t\t\t\t'cds--list-box--invalid': invalid\n\t\t\t}\"\n\t\t\t[attr.data-invalid]=\"invalid ? true : null\">\n\t\t\t@if (skeleton && fluid) {\n\t\t\t\t<div class=\"cds--list-box__label\"></div>\n\t\t\t}\n\t\t\t<button\n\t\t\t\t#dropdownButton\n\t\t\t\t[id]=\"id\"\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"cds--list-box__field\"\n\t\t\t\t[ngClass]=\"{'a': !menuIsClosed}\"\n\t\t\t\t[attr.aria-expanded]=\"!menuIsClosed\"\n\t\t\t\t[attr.aria-disabled]=\"disabled\"\n\t\t\t\t[attr.aria-readonly]=\"readonly\"\n\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t(click)=\"disabled || readonly ? $event.stopPropagation() : toggleMenu()\"\n\t\t\t\t(focus)=\"fluid ? handleFocus($event) : null\"\n\t\t\t\t(blur)=\"fluid ? handleFocus($event) : onBlur()\"\n\t\t\t\t[attr.disabled]=\"disabled ? true : null\">\n\t\t\t\t@if (type === 'multi' && getSelectedCount() > 0) {\n\t\t\t\t\t<div\n\t\t\t\t\t\t(click)=\"clearSelected()\"\n\t\t\t\t\t\t(keydown.enter)=\"clearSelected()\"\n\n\t\t\t\t\t\tclass=\"cds--list-box__selection cds--tag--filter cds--list-box__selection--multi\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[title]=\"clearText\">\n\t\t\t\t\t\t{{getSelectedCount()}}\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\taria-hidden=\"true\">\n\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</svg>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t@if (isRenderString()) {\n\t\t\t\t\t<span class=\"cds--list-box__label\">{{getDisplayStringValue() | async}}</span>\n\t\t\t\t} @else {\n\t\t\t\t\t<ng-template [ngTemplateOutletContext]=\"getRenderTemplateContext()\" [ngTemplateOutlet]=\"displayValue\" />\n\t\t\t\t}\n\t\t\t\t<span class=\"cds--list-box__menu-icon\">\n\t\t\t\t\t@if (!skeleton) {\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"menuButtonLabel\"\n\t\t\t\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': !menuIsClosed }\">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t}\n\t\t\t\t</span>\n\t\t\t</button>\n\t\t\t@if (invalid) {\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"cds--list-box__invalid-icon\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\">\n\t\t\t\t</svg>\n\t\t\t} @else if(warn) {\n\t\t\t\t<svg\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t\t\t</svg>\n\t\t\t}\n\t\t\t<div\n\t\t\t\t#dropdownMenu\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t\t}\">\n\t\t\t\t@if (!menuIsClosed) {\n\t\t\t\t\t<ng-content />\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t\t@if (fluid) {\n\t\t\t<hr class=\"cds--list-box__divider\" />\n\t\t}\n\t\t@if (invalid) {\n\t\t\t<div class=\"cds--form-requirement\">\n\t\t\t\t@if (isTemplate(invalidText)) {\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"invalidText\" />\n\t\t\t\t} @else {\n\t\t\t\t\t{{ invalidText }}\n\t\t\t\t}\n\t\t\t</div>\n\t\t} @else if (warn) {\n\t\t\t<div class=\"cds--form-requirement\">\n\t\t\t\t@if (isTemplate(warnText)) {\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"warnText\" />\n\t\t\t\t} @else {\n\t\t\t\t\t{{warnText}}\n\t\t\t\t}\n\t\t\t</div>\n\t\t} @else if(helperText && !fluid) {\n\t\t\t<div\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t}\">\n\t\t\t\t@if (isTemplate(helperText)) {\n\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"helperText\" />\n\t\t\t\t} @else {\n\t\t\t\t\t{{helperText}}\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Dropdown,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Dropdown implements OnInit, AfterContentInit, AfterViewInit, OnDestroy, ControlValueAccessor {\n\tstatic dropdownCount = 0;\n\t@HostBinding(\"class.cds--list-box__wrapper--fluid--invalid\") get fluidInvalidClass() {\n\t\treturn this.invalid && this.fluid;\n\t}\n\n\t@HostBinding(\"class.cds--list-box__wrapper--fluid--focus\") get fluidFocusClass() {\n\t\treturn this.fluid && this._isFocused && this.menuIsClosed;\n\t}\n\n\tprotected get writtenValue() {\n\t\treturn this._writtenValue;\n\t}\n\n\tprotected set writtenValue(val: any[]) {\n\t\tif (val && val.length === 0) {\n\t\t\tthis.clearSelected();\n\t\t}\n\t\tthis._writtenValue = val;\n\t}\n\n\t@Input() id = `dropdown-${Dropdown.dropdownCount++}`;\n\t/**\n\t * Label for the dropdown.\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 * Value displayed if no item is selected.\n\t */\n\t@Input() placeholder = \"\";\n\t/**\n\t * The selected value from the `Dropdown`. Can be a string or template.\n\t */\n\t@Input() displayValue: string | TemplateRef<any> = \"\";\n\t/**\n\t * Sets the optional clear button tooltip text.\n\t */\n\t@Input() clearText: string = this.i18n.get().DROPDOWN.CLEAR;\n\t/**\n\t * Size to render the dropdown field.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Defines whether or not the `Dropdown` supports selecting multiple items as opposed to single\n\t * item selection.\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` dropdown theme\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set to `true` to disable the dropdown.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a readonly state.\n\t */\n\t@Input() readonly = false;\n\t/**\n\t * Set to `true` for a loading dropdown.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an inline dropdown.\n\t */\n\t@Input() inline = false;\n\t/**\n\t * Set to `true` for a dropdown without arrow key activation.\n\t */\n\t@Input() disableArrowKeys = false;\n\t/**\n\t * Set to `true` for invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if dropdown is in 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 warningText)\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 * set to `true` to place the dropdown view inline with the component\n\t */\n\t@Input() appendInline: boolean = null;\n\t/**\n\t * Query string for the element that contains the `Dropdown`.\n\t * Used to trigger closing the dropdown if it scrolls outside of the viewport of the `scrollableContainer`.\n\t */\n\t@Input() scrollableContainer: string;\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 * Specify feedback (mode) of the selection.\n\t * `top`: selected item jumps to top\n\t * `fixed`: selected item stays at it's 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 * Accessible label for the button that opens the dropdown list.\n\t * Defaults to the `DROPDOWN.OPEN` value from the i18n service.\n\t */\n\t@Input() menuButtonLabel = this.i18n.get().DROPDOWN.OPEN;\n\t/**\n\t * Provides the label for the \"# selected\" text.\n\t * Defaults to the `DROPDOWN.SELECTED` value from the i18n service.\n\t */\n\t@Input() selectedLabel = this.i18n.get().DROPDOWN.SELECTED;\n\t/**\n\t * Overrides the automatic dropUp.\n\t */\n\t@Input() dropUp: boolean;\n\t/**\n\t * Emits selection events.\n\t */\n\t@Output() selected: EventEmitter<Object> = new EventEmitter<Object>();\n\t/**\n\t * Emits event notifying to other classes that the `Dropdown` has been closed (collapsed).\n\t */\n\t@Output() onClose: EventEmitter<any> = new EventEmitter<any>();\n\t/**\n\t * Emits event notifying to other classes that the `Dropdown` has been closed (collapsed).\n\t */\n\t@Output() close: EventEmitter<any> = new EventEmitter<any>();\n\n\t/**\n\t * Maintains a reference to the `AbstractDropdownView` object within the content DOM.\n\t */\n\t@ContentChild(AbstractDropdownView, { static: true }) view: AbstractDropdownView;\n\t/**\n\t * Maintains a reference to the view DOM element of the `Dropdown` button.\n\t */\n\t@ViewChild(\"dropdownButton\", { static: true }) dropdownButton;\n\t/**\n\t * ViewChid of the dropdown view.\n\t */\n\t@ViewChild(\"dropdownMenu\", { static: true }) dropdownMenu;\n\n\t@HostBinding(\"class.cds--dropdown__wrapper\") hostClass = true;\n\n\t@HostBinding(\"class.cds--list-box__wrapper\") hostWrapperClass = true;\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@HostBinding(\"class.cds--list-box__wrapper--fluid\") @Input() fluid = false;\n\n\t/**\n\t * Set to `true` if the dropdown is closed (not expanded).\n\t */\n\tmenuIsClosed = true;\n\n\t/**\n\t * controls whether the `drop-up` class is applied\n\t */\n\t_dropUp = false;\n\n\t// .bind creates a new function, so we declare the methods below\n\t// but .bind them up here\n\tnoop = this._noop.bind(this);\n\toutsideClick = this._outsideClick.bind(this);\n\toutsideKey = this._outsideKey.bind(this);\n\tkeyboardNav = this._keyboardNav.bind(this);\n\n\tprotected visibilitySubscription = new Subscription();\n\n\tprotected onTouchedCallback: () => void = this._noop;\n\n\tprotected _isFocused = false;\n\n\t// primarily used to capture and propagate input to `writeValue` before the content is available\n\tprivate _writtenValue: any = [];\n\n\t/**\n\t * Creates an instance of Dropdown.\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected i18n: I18n,\n\t\tprotected dropdownService: DropdownService,\n\t\tprotected elementService: ElementService) {}\n\n\t/**\n\t * Updates the `type` property in the `@ContentChild`.\n\t * The `type` property specifies whether the `Dropdown` allows single selection or multi selection.\n\t */\n\tngOnInit() {\n\t\tif (this.view) {\n\t\t\tthis.view.type = this.type;\n\t\t}\n\t}\n\n\t/**\n\t * Initializes classes and subscribes to events for single or multi selection.\n\t */\n\tngAfterContentInit() {\n\t\tif (!this.view) {\n\t\t\treturn;\n\t\t}\n\t\tif ((this.writtenValue && this.writtenValue.length) || typeof this.writtenValue === \"number\") {\n\t\t\tthis.writeValue(this.writtenValue);\n\t\t}\n\t\tthis.view.type = this.type;\n\t\tthis.view.size = this.size;\n\n\t\t// function to check if the event is organic (isUpdate === false) or programmatic\n\t\tconst isUpdate = event => event && event.isUpdate;\n\n\t\tthis.view.select.subscribe(event => {\n\t\t\tif (this.type === \"single\" && !isUpdate(event) && !Array.isArray(event)) {\n\t\t\t\tthis.closeMenu();\n\t\t\t\tif (event.item && event.item.selected) {\n\t\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t\tthis.propagateChange(event.item[this.itemValueKey]);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.propagateChange(event.item);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tthis.propagateChange(null);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (this.type === \"multi\" && !isUpdate(event)) {\n\t\t\t\t// if we have a `value` selector and selected items map them appropriately\n\t\t\t\tif (this.itemValueKey && this.view.getSelected()) {\n\t\t\t\t\tconst values = this.view.getSelected().map(item => item[this.itemValueKey]);\n\t\t\t\t\tthis.propagateChange(values);\n\t\t\t\t\t// otherwise just pass up the values from `getSelected`\n\t\t\t\t} else {\n\t\t\t\t\tthis.propagateChange(this.view.getSelected());\n\t\t\t\t}\n\t\t\t}\n\t\t\t// only emit selected for \"organic\" selections\n\t\t\tif (!isUpdate(event)) {\n\t\t\t\tthis.checkForReorder();\n\t\t\t\tthis.selected.emit(event);\n\t\t\t}\n\t\t});\n\t}\n\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\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\tthis.checkForReorder();\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 * Propagates the injected `value`.\n\t */\n\twriteValue(value: any) {\n\t\t// cache the written value so we can use it in `AfterContentInit`\n\t\tthis.writtenValue = value;\n\t\tthis.view.onItemsReady(() => {\n\t\t\t// propagate null/falsey as an array (deselect everything)\n\t\t\tif (!value) {\n\t\t\t\tthis.view.propagateSelected([value]);\n\t\t\t} else if (this.type === \"single\") {\n\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t// clone the specified item and update its state\n\t\t\t\t\tconst newValue = Object.assign({}, this.view.getListItems().find(item => item[this.itemValueKey] === value));\n\t\t\t\t\tnewValue.selected = true;\n\t\t\t\t\tthis.view.propagateSelected([newValue]);\n\t\t\t\t} else {\n\t\t\t\t\t// pass the singular value as an array of ListItem\n\t\t\t\t\tthis.view.propagateSelected([value]);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t// clone the items and update their state based on the received value array\n\t\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\t\tlet newValues = [];\n\t\t\t\t\tfor (const v of value) {\n\t\t\t\t\t\tfor (const item of this.view.getListItems()) {\n\t\t\t\t\t\t\tif (item[this.itemValueKey] === v) {\n\t\t\t\t\t\t\t\tnewValues.push(Object.assign({}, item, { selected: true }));\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tthis.view.propagateSelected(newValues);\n\t\t\t\t} else {\n\t\t\t\t\t// we can safely assume we're passing an array of `ListItem`s\n\t\t\t\t\tthis.view.propagateSelected(value);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.checkForReorder();\n\t\t});\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registering the function injected to control the touch use of the `Dropdown`.\n\t */\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\n\t/**\n\t * function passed in by `registerOnChange`\n\t */\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the dropdown.\n\t *\n\t * ex: `this.formGroup.get(\"myDropdown\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the input\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Adds keyboard functionality for navigation, selection and closing of the `Dropdown`.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\tonKeyDown(event: KeyboardEvent) {\n\t\tif (this.readonly) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ((event.key === \"Escape\") && !this.menuIsClosed) {\n\t\t\tevent.stopImmediatePropagation(); // don't unintentionally close other widgets that listen for Escape\n\t\t}\n\t\tif (event.key === \"Escape\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.closeMenu();\n\t\t\tthis.dropdownButton.nativeElement.focus();\n\t\t} else if (this.menuIsClosed && (event.key === \" \" || event.key === \"ArrowDown\" || event.key === \"ArrowUp\")) {\n\t\t\tif (this.disableArrowKeys && (event.key === \"ArrowDown\" || event.key === \"ArrowUp\")) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tevent.preventDefault();\n\t\t\tthis.openMenu();\n\t\t}\n\n\t\tif (!this.menuIsClosed && event.key === \"Tab\" && this.dropdownMenu.nativeElement.contains(event.target as Node)) {\n\t\t\tthis.closeMenu();\n\t\t}\n\n\t\tif (!this.menuIsClosed && event.key === \"Tab\" && event.shiftKey) {\n\t\t\tthis.closeMenu();\n\t\t}\n\n\t\tif (this.type === \"multi\") { return; }\n\n\t\tif (this.menuIsClosed) {\n\t\t\tthis.closedDropdownNavigation(event);\n\t\t}\n\t}\n\n\tclosedDropdownNavigation(event) {\n\t\tif (event.key === \"ArrowDown\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.view.getCurrentItem().selected = false;\n\t\t\tlet item = this.view.getNextItem();\n\t\t\tif (item) { item.selected = true; }\n\t\t} else if (event.key === \"ArrowUp\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.view.getCurrentItem().selected = false;\n\t\t\tlet item = this.view.getPrevItem();\n\t\t\tif (item) { item.selected = true; }\n\t\t}\n\t}\n\n\t/**\n\t * Returns the display value if there is a selection and displayValue is set,\n\t * if there is just a selection the ListItem content property will be returned,\n\t * otherwise the placeholder will be returned.\n\t */\n\tgetDisplayStringValue(): Observable<string> {\n\t\tif (!this.view || this.skeleton) {\n\t\t\treturn;\n\t\t}\n\t\tlet selected = this.view.getSelected();\n\t\tif (selected.length && (!this.displayValue || !this.isRenderString())) {\n\t\t\tif (this.type === \"multi\") {\n\t\t\t\treturn of(this.placeholder);\n\t\t\t} else {\n\t\t\t\treturn of(selected[0].content);\n\t\t\t}\n\t\t} else if (selected.length && this.isRenderString()) {\n\t\t\treturn of(this.displayValue as string);\n\t\t}\n\t\treturn of(this.placeholder);\n\t}\n\n\tisRenderString(): boolean {\n\t\treturn typeof this.displayValue === \"string\";\n\t}\n\n\tgetRenderTemplateContext() {\n\t\tif (!this.view) {\n\t\t\treturn;\n\t\t}\n\t\tlet selected = this.view.getSelected();\n\t\tif (this.type === \"multi\") {\n\t\t\treturn { items: selected };\n\t\t} else if (selected && selected.length > 0) {\n\t\t\treturn { item: selected[0] }; // this is to be compatible with the dropdown-list template\n\t\t} else {\n\t\t\treturn {};\n\t\t}\n\t}\n\n\tgetSelectedCount(): number {\n\t\tif (this.view.getSelected()) {\n\t\t\treturn this.view.getSelected().length;\n\t\t}\n\t}\n\n\tclearSelected() {\n\t\tif (this.disabled || this.getSelectedCount() === 0) {\n\t\t\treturn;\n\t\t}\n\t\tfor (const item of this.view.getListItems()) {\n\t\t\titem.selected = false;\n\t\t}\n\t\tthis.selected.emit([]);\n\t\tthis.propagateChange([]);\n\t}\n\n\t/**\n\t * Returns `true` if there is a value selected.\n\t */\n\tvalueSelected(): boolean {\n\t\tif (this.view.getSelected()) { return true; }\n\t\treturn false;\n\t}\n\n\t_noop() { }\n\t/**\n\t * Handles clicks outside of the `Dropdown`.\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.closeMenu();\n\t\t}\n\t}\n\t_outsideKey(event) {\n\t\tif (!this.menuIsClosed && event.key === \"Tab\" && this.dropdownMenu.nativeElement.contains(event.target as Node)) {\n\t\t\tthis.closeMenu();\n\t\t}\n\t}\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.menuIsClosed) {\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.closeMenu();\n\t\t\tthis.dropdownButton.nativeElement.focus();\n\t\t} else if (!this.menuIsClosed && 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.dropdownButton.nativeElement.focus();\n\t\t\tthis.dropdownButton.nativeElement.dispatchEvent(new KeyboardEvent(\"keydown\", { bubbles: true, cancelable: true, key: \"Tab\" }));\n\t\t\tthis.closeMenu();\n\t\t}\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 * Creates the `Dropdown` list as an element that is appended to the DOM body.\n\t */\n\t_appendToBody() {\n\t\tconst lightClass = this.theme === \"light\" ? \" cds--list-box--light\" : \"\";\n\t\tconst expandedClass = !this.menuIsClosed ? \" cds--list-box--expanded\" : \"\";\n\t\tthis.dropdownService.appendToBody(\n\t\t\tthis.dropdownButton.nativeElement,\n\t\t\tthis.dropdownMenu.nativeElement,\n\t\t\t`${this.elementRef.nativeElement.className}${lightClass}${expandedClass}`);\n\t\tthis.dropdownMenu.nativeElement.addEventListener(\"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 * Expands the dropdown menu in the view.\n\t */\n\topenMenu() {\n\t\t// prevents the dropdown from opening when list of items is empty\n\t\tif (this.view.getListItems().length === 0) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._dropUp = false;\n\t\tthis.menuIsClosed = false;\n\n\t\t// move the dropdown list to the body if we're not appending inline\n\t\t// and position it relative to the dropdown wrapper\n\t\tif (!this.appendInline) {\n\t\t\tconst target = this.dropdownButton.nativeElement;\n\t\t\tconst parent = this.elementRef.nativeElement;\n\t\t\tthis.visibilitySubscription = this.elementService\n\t\t\t\t.visibility(target, parent)\n\t\t\t\t.subscribe(value => {\n\t\t\t\t\tif (!value.visible) {\n\t\t\t\t\t\tthis.closeMenu();\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\tthis._appendToBody();\n\t\t}\n\n\t\t// set the dropdown menu to drop up if it's near the bottom of the screen\n\t\t// setTimeout lets us measure after it's 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\n\t\t// we bind noop to document.body.firstElementChild to allow safari to fire events\n\t\t// from document. Then we unbind everything later to keep things light.\n\t\tdocument.body.firstElementChild.addEventListener(\"click\", this.noop, true);\n\t\tdocument.body.firstElementChild.addEventListener(\"keydown\", this.noop, true);\n\t\tdocument.addEventListener(\"click\", this.outsideClick, true);\n\t\tdocument.addEventListener(\"keydown\", this.outsideKey, true);\n\t\tsetTimeout(() => this.view.initFocus(), 0);\n\t}\n\n\t/**\n\t * Collapsing the dropdown menu and removing unnecessary `EventListeners`.\n\t */\n\tcloseMenu() {\n\t\t// return early if the menu is already closed\n\t\tif (this.menuIsClosed) { return; }\n\t\tthis.menuIsClosed = true;\n\t\tthis.checkForReorder();\n\t\tthis.onClose.emit();\n\t\tthis.close.emit();\n\n\t\t// focus the trigger button when we close ...\n\t\tthis.dropdownButton.nativeElement.focus();\n\n\t\t// remove the conditional once this api is settled and part of abstract-dropdown-view.class\n\t\tif (this.view[\"disableScroll\"]) {\n\t\t\tthis.view[\"disableScroll\"]();\n\t\t}\n\n\t\t// move the list back in the component on close\n\t\tif (!this.appendInline) {\n\t\t\tthis.visibilitySubscription.unsubscribe();\n\t\t\tthis._appendToDropdown();\n\t\t}\n\t\tdocument.body.firstElementChild.removeEventListener(\"click\", this.noop, true);\n\t\tdocument.body.firstElementChild.removeEventListener(\"keydown\", this.noop, true);\n\t\tdocument.removeEventListener(\"click\", this.outsideClick, true);\n\t\tdocument.removeEventListener(\"keydown\", this.outsideKey, true);\n\t}\n\n\t/**\n\t * Controls toggling menu states between open/expanded and closed/collapsed.\n\t */\n\ttoggleMenu() {\n\t\tif (this.menuIsClosed) {\n\t\t\tthis.openMenu();\n\t\t} else {\n\t\t\tthis.closeMenu();\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\thandleFocus(event: FocusEvent) {\n\t\tthis._isFocused = event.type === \"focus\";\n\t\tif (event.type === \"blur\") {\n\t\t\tthis.onBlur();\n\t\t}\n\t}\n\n\t/**\n\t * Controls when it's needed to apply the selection feedback\n\t */\n\tprotected checkForReorder() {\n\t\tconst topAfterReopen = this.menuIsClosed && this.selectionFeedback === \"top-after-reopen\";\n\t\tif ((this.type === \"multi\") && (topAfterReopen || this.selectionFeedback === \"top\")) {\n\t\t\tthis.view.reorderSelected();\n\t\t}\n\t}\n}\n",
|
|
30094
30117
|
"assetsDirs": [],
|
|
30095
30118
|
"styleUrlsData": "",
|
|
30096
30119
|
"stylesData": "",
|
|
@@ -30125,7 +30148,7 @@
|
|
|
30125
30148
|
"deprecationMessage": ""
|
|
30126
30149
|
}
|
|
30127
30150
|
],
|
|
30128
|
-
"line":
|
|
30151
|
+
"line": 401,
|
|
30129
30152
|
"rawdescription": "\n\nCreates an instance of Dropdown.\n",
|
|
30130
30153
|
"jsdoctags": [
|
|
30131
30154
|
{
|
|
@@ -30181,7 +30204,7 @@
|
|
|
30181
30204
|
"name": "fluidInvalidClass",
|
|
30182
30205
|
"type": "",
|
|
30183
30206
|
"returnType": "",
|
|
30184
|
-
"line":
|
|
30207
|
+
"line": 215
|
|
30185
30208
|
}
|
|
30186
30209
|
},
|
|
30187
30210
|
"fluidFocusClass": {
|
|
@@ -30190,14 +30213,14 @@
|
|
|
30190
30213
|
"name": "fluidFocusClass",
|
|
30191
30214
|
"type": "",
|
|
30192
30215
|
"returnType": "",
|
|
30193
|
-
"line":
|
|
30216
|
+
"line": 219
|
|
30194
30217
|
}
|
|
30195
30218
|
}
|
|
30196
30219
|
}
|
|
30197
30220
|
},
|
|
30198
30221
|
{
|
|
30199
30222
|
"name": "DropdownList",
|
|
30200
|
-
"id": "component-DropdownList-
|
|
30223
|
+
"id": "component-DropdownList-7e7cf13bf225cefb35945a55ae98211227f1e2302d96288979fb1a12cc45d4845245946fb9fca424ab4a82a391f6fc98a5cf3719674c2f5cf5b169c9f410ace9",
|
|
30201
30224
|
"file": "src/dropdown/list/dropdown-list.component.ts",
|
|
30202
30225
|
"encapsulation": [],
|
|
30203
30226
|
"entryComponents": [],
|
|
@@ -30221,7 +30244,7 @@
|
|
|
30221
30244
|
"defaultValue": "this.i18n.get().DROPDOWN_LIST.LABEL",
|
|
30222
30245
|
"deprecated": false,
|
|
30223
30246
|
"deprecationMessage": "",
|
|
30224
|
-
"line":
|
|
30247
|
+
"line": 124,
|
|
30225
30248
|
"type": "any",
|
|
30226
30249
|
"decorators": []
|
|
30227
30250
|
},
|
|
@@ -30231,7 +30254,7 @@
|
|
|
30231
30254
|
"deprecationMessage": "",
|
|
30232
30255
|
"rawdescription": "\n\nThe list items belonging to the `DropdownList`.\n",
|
|
30233
30256
|
"description": "<p>The list items belonging to the <code>DropdownList</code>.</p>\n",
|
|
30234
|
-
"line":
|
|
30257
|
+
"line": 128,
|
|
30235
30258
|
"type": "Array | Observable",
|
|
30236
30259
|
"decorators": []
|
|
30237
30260
|
},
|
|
@@ -30242,7 +30265,7 @@
|
|
|
30242
30265
|
"deprecationMessage": "",
|
|
30243
30266
|
"rawdescription": "\n\nTemplate to bind to items in the `DropdownList` (optional).\n",
|
|
30244
30267
|
"description": "<p>Template to bind to items in the <code>DropdownList</code> (optional).</p>\n",
|
|
30245
|
-
"line":
|
|
30268
|
+
"line": 153,
|
|
30246
30269
|
"type": "string | TemplateRef<any>",
|
|
30247
30270
|
"decorators": []
|
|
30248
30271
|
},
|
|
@@ -30253,7 +30276,7 @@
|
|
|
30253
30276
|
"deprecationMessage": "",
|
|
30254
30277
|
"rawdescription": "\n\nDefines whether to show title attribute or not\n",
|
|
30255
30278
|
"description": "<p>Defines whether to show title attribute or not</p>\n",
|
|
30256
|
-
"line":
|
|
30279
|
+
"line": 185,
|
|
30257
30280
|
"type": "boolean",
|
|
30258
30281
|
"decorators": []
|
|
30259
30282
|
},
|
|
@@ -30264,7 +30287,7 @@
|
|
|
30264
30287
|
"deprecationMessage": "",
|
|
30265
30288
|
"rawdescription": "\n\nDefines whether or not the `DropdownList` supports selecting multiple items as opposed to single\nitem selection.\n",
|
|
30266
30289
|
"description": "<p>Defines whether or not the <code>DropdownList</code> supports selecting multiple items as opposed to single\nitem selection.</p>\n",
|
|
30267
|
-
"line":
|
|
30290
|
+
"line": 180,
|
|
30268
30291
|
"type": "\"single\" | \"multi\"",
|
|
30269
30292
|
"decorators": []
|
|
30270
30293
|
}
|
|
@@ -30277,7 +30300,7 @@
|
|
|
30277
30300
|
"deprecationMessage": "",
|
|
30278
30301
|
"rawdescription": "\n\nEvent to suggest a blur on the view.\nEmits _after_ the first/last item has been focused.\nex.\nArrowUp -> focus first item\nArrowUp -> emit event\n\nWhen this event fires focus should be placed on some element outside of the list - blurring the list as a result\n",
|
|
30279
30302
|
"description": "<p>Event to suggest a blur on the view.\nEmits <em>after</em> the first/last item has been focused.\nex.\nArrowUp -> focus first item\nArrowUp -> emit event</p>\n<p>When this event fires focus should be placed on some element outside of the list - blurring the list as a result</p>\n",
|
|
30280
|
-
"line":
|
|
30303
|
+
"line": 171,
|
|
30281
30304
|
"type": "EventEmitter"
|
|
30282
30305
|
},
|
|
30283
30306
|
{
|
|
@@ -30287,7 +30310,7 @@
|
|
|
30287
30310
|
"deprecationMessage": "",
|
|
30288
30311
|
"rawdescription": "\n\nEvent to emit scroll event of a list within the `DropdownList`.\n",
|
|
30289
30312
|
"description": "<p>Event to emit scroll event of a list within the <code>DropdownList</code>.</p>\n",
|
|
30290
|
-
"line":
|
|
30313
|
+
"line": 161,
|
|
30291
30314
|
"type": "EventEmitter<ScrollCustomEvent>"
|
|
30292
30315
|
},
|
|
30293
30316
|
{
|
|
@@ -30297,7 +30320,7 @@
|
|
|
30297
30320
|
"deprecationMessage": "",
|
|
30298
30321
|
"rawdescription": "\n\nEvent to emit selection of a list item within the `DropdownList`.\n",
|
|
30299
30322
|
"description": "<p>Event to emit selection of a list item within the <code>DropdownList</code>.</p>\n",
|
|
30300
|
-
"line":
|
|
30323
|
+
"line": 157,
|
|
30301
30324
|
"type": "EventEmitter<literal type | []>"
|
|
30302
30325
|
}
|
|
30303
30326
|
],
|
|
@@ -30311,7 +30334,7 @@
|
|
|
30311
30334
|
"indexKey": "",
|
|
30312
30335
|
"optional": false,
|
|
30313
30336
|
"description": "<p>Holds the list of items that will be displayed in the <code>DropdownList</code>.\nIt differs from the the complete set of items when filtering is used (but\nit is always a subset of the total items in <code>DropdownList</code>).</p>\n",
|
|
30314
|
-
"line":
|
|
30337
|
+
"line": 198,
|
|
30315
30338
|
"rawdescription": "\n\nHolds the list of items that will be displayed in the `DropdownList`.\nIt differs from the the complete set of items when filtering is used (but\nit is always a subset of the total items in `DropdownList`).\n",
|
|
30316
30339
|
"modifierKind": [
|
|
30317
30340
|
125
|
|
@@ -30325,7 +30348,7 @@
|
|
|
30325
30348
|
"indexKey": "",
|
|
30326
30349
|
"optional": false,
|
|
30327
30350
|
"description": "",
|
|
30328
|
-
"line":
|
|
30351
|
+
"line": 231,
|
|
30329
30352
|
"modifierKind": [
|
|
30330
30353
|
125
|
|
30331
30354
|
]
|
|
@@ -30339,7 +30362,7 @@
|
|
|
30339
30362
|
"indexKey": "",
|
|
30340
30363
|
"optional": false,
|
|
30341
30364
|
"description": "",
|
|
30342
|
-
"line":
|
|
30365
|
+
"line": 192,
|
|
30343
30366
|
"modifierKind": [
|
|
30344
30367
|
125
|
|
30345
30368
|
]
|
|
@@ -30352,7 +30375,7 @@
|
|
|
30352
30375
|
"indexKey": "",
|
|
30353
30376
|
"optional": false,
|
|
30354
30377
|
"description": "<p>Maintains a reference to the view DOM element for the unordered list of items within the <code>DropdownList</code>.</p>\n",
|
|
30355
|
-
"line":
|
|
30378
|
+
"line": 175,
|
|
30356
30379
|
"rawdescription": "\n\nMaintains a reference to the view DOM element for the unordered list of items within the `DropdownList`.\n",
|
|
30357
30380
|
"decorators": [
|
|
30358
30381
|
{
|
|
@@ -30373,7 +30396,7 @@
|
|
|
30373
30396
|
"indexKey": "",
|
|
30374
30397
|
"optional": false,
|
|
30375
30398
|
"description": "",
|
|
30376
|
-
"line":
|
|
30399
|
+
"line": 123,
|
|
30377
30400
|
"modifierKind": [
|
|
30378
30401
|
126
|
|
30379
30402
|
]
|
|
@@ -30387,7 +30410,7 @@
|
|
|
30387
30410
|
"indexKey": "",
|
|
30388
30411
|
"optional": false,
|
|
30389
30412
|
"description": "",
|
|
30390
|
-
"line":
|
|
30413
|
+
"line": 191,
|
|
30391
30414
|
"modifierKind": [
|
|
30392
30415
|
125
|
|
30393
30416
|
]
|
|
@@ -30401,7 +30424,7 @@
|
|
|
30401
30424
|
"indexKey": "",
|
|
30402
30425
|
"optional": false,
|
|
30403
30426
|
"description": "<p>Defines the rendering size of the <code>DropdownList</code> input component.</p>\n",
|
|
30404
|
-
"line":
|
|
30427
|
+
"line": 190,
|
|
30405
30428
|
"rawdescription": "\n\nDefines the rendering size of the `DropdownList` input component.\n",
|
|
30406
30429
|
"modifierKind": [
|
|
30407
30430
|
125
|
|
@@ -30428,7 +30451,7 @@
|
|
|
30428
30451
|
"optional": false,
|
|
30429
30452
|
"returnType": "void",
|
|
30430
30453
|
"typeParameters": [],
|
|
30431
|
-
"line":
|
|
30454
|
+
"line": 555,
|
|
30432
30455
|
"deprecated": false,
|
|
30433
30456
|
"deprecationMessage": "",
|
|
30434
30457
|
"rawdescription": "\n\nEmits the selected item or items after a mouse click event has occurred.\n",
|
|
@@ -30468,7 +30491,7 @@
|
|
|
30468
30491
|
"optional": false,
|
|
30469
30492
|
"returnType": "void",
|
|
30470
30493
|
"typeParameters": [],
|
|
30471
|
-
"line":
|
|
30494
|
+
"line": 257,
|
|
30472
30495
|
"deprecated": false,
|
|
30473
30496
|
"deprecationMessage": "",
|
|
30474
30497
|
"jsdoctags": [
|
|
@@ -30497,7 +30520,7 @@
|
|
|
30497
30520
|
"optional": false,
|
|
30498
30521
|
"returnType": "void",
|
|
30499
30522
|
"typeParameters": [],
|
|
30500
|
-
"line":
|
|
30523
|
+
"line": 589,
|
|
30501
30524
|
"deprecated": false,
|
|
30502
30525
|
"deprecationMessage": "",
|
|
30503
30526
|
"rawdescription": "\n\nEmits the scroll event of the options list\n",
|
|
@@ -30528,7 +30551,7 @@
|
|
|
30528
30551
|
"optional": false,
|
|
30529
30552
|
"returnType": "void",
|
|
30530
30553
|
"typeParameters": [],
|
|
30531
|
-
"line":
|
|
30554
|
+
"line": 287,
|
|
30532
30555
|
"deprecated": false,
|
|
30533
30556
|
"deprecationMessage": "",
|
|
30534
30557
|
"rawdescription": "\n\nFilters the items being displayed in the DOM list.\n",
|
|
@@ -30552,7 +30575,7 @@
|
|
|
30552
30575
|
"optional": false,
|
|
30553
30576
|
"returnType": "HTMLElement",
|
|
30554
30577
|
"typeParameters": [],
|
|
30555
|
-
"line":
|
|
30578
|
+
"line": 418,
|
|
30556
30579
|
"deprecated": false,
|
|
30557
30580
|
"deprecationMessage": "",
|
|
30558
30581
|
"rawdescription": "\n\nReturns the `HTMLElement` for the item that is selected within the `DropdownList`.\n",
|
|
@@ -30564,7 +30587,7 @@
|
|
|
30564
30587
|
"optional": false,
|
|
30565
30588
|
"returnType": "ListItem",
|
|
30566
30589
|
"typeParameters": [],
|
|
30567
|
-
"line":
|
|
30590
|
+
"line": 408,
|
|
30568
30591
|
"deprecated": false,
|
|
30569
30592
|
"deprecationMessage": "",
|
|
30570
30593
|
"rawdescription": "\n\nReturns the `ListItem` that is selected within `DropdownList`.\n",
|
|
@@ -30583,7 +30606,7 @@
|
|
|
30583
30606
|
"optional": false,
|
|
30584
30607
|
"returnType": "string",
|
|
30585
30608
|
"typeParameters": [],
|
|
30586
|
-
"line":
|
|
30609
|
+
"line": 269,
|
|
30587
30610
|
"deprecated": false,
|
|
30588
30611
|
"deprecationMessage": "",
|
|
30589
30612
|
"jsdoctags": [
|
|
@@ -30604,7 +30627,7 @@
|
|
|
30604
30627
|
"optional": false,
|
|
30605
30628
|
"returnType": "Array<ListItem>",
|
|
30606
30629
|
"typeParameters": [],
|
|
30607
|
-
"line":
|
|
30630
|
+
"line": 428,
|
|
30608
30631
|
"deprecated": false,
|
|
30609
30632
|
"deprecationMessage": "",
|
|
30610
30633
|
"rawdescription": "\n\nReturns the items as an Array\n",
|
|
@@ -30616,7 +30639,7 @@
|
|
|
30616
30639
|
"optional": false,
|
|
30617
30640
|
"returnType": "HTMLElement",
|
|
30618
30641
|
"typeParameters": [],
|
|
30619
|
-
"line":
|
|
30642
|
+
"line": 339,
|
|
30620
30643
|
"deprecated": false,
|
|
30621
30644
|
"deprecationMessage": "",
|
|
30622
30645
|
"rawdescription": "\n\nReturns the `HTMLElement` for the item that is subsequent to the selected item.\n",
|
|
@@ -30628,7 +30651,7 @@
|
|
|
30628
30651
|
"optional": false,
|
|
30629
30652
|
"returnType": "ListItem",
|
|
30630
30653
|
"typeParameters": [],
|
|
30631
|
-
"line":
|
|
30654
|
+
"line": 321,
|
|
30632
30655
|
"deprecated": false,
|
|
30633
30656
|
"deprecationMessage": "",
|
|
30634
30657
|
"rawdescription": "\n\nReturns the `ListItem` that is subsequent to the selected item in the `DropdownList`.\n",
|
|
@@ -30640,7 +30663,7 @@
|
|
|
30640
30663
|
"optional": false,
|
|
30641
30664
|
"returnType": "HTMLElement",
|
|
30642
30665
|
"typeParameters": [],
|
|
30643
|
-
"line":
|
|
30666
|
+
"line": 382,
|
|
30644
30667
|
"deprecated": false,
|
|
30645
30668
|
"deprecationMessage": "",
|
|
30646
30669
|
"rawdescription": "\n\nReturns the `HTMLElement` for the item that precedes the selected item.\n",
|
|
@@ -30652,7 +30675,7 @@
|
|
|
30652
30675
|
"optional": false,
|
|
30653
30676
|
"returnType": "ListItem",
|
|
30654
30677
|
"typeParameters": [],
|
|
30655
|
-
"line":
|
|
30678
|
+
"line": 365,
|
|
30656
30679
|
"deprecated": false,
|
|
30657
30680
|
"deprecationMessage": "",
|
|
30658
30681
|
"rawdescription": "\n\nReturns the `ListItem` that precedes the selected item within `DropdownList`.\n",
|
|
@@ -30664,7 +30687,7 @@
|
|
|
30664
30687
|
"optional": false,
|
|
30665
30688
|
"returnType": "ListItem[]",
|
|
30666
30689
|
"typeParameters": [],
|
|
30667
|
-
"line":
|
|
30690
|
+
"line": 435,
|
|
30668
30691
|
"deprecated": false,
|
|
30669
30692
|
"deprecationMessage": "",
|
|
30670
30693
|
"rawdescription": "\n\nReturns a list containing the selected item(s) in the `DropdownList`.\n",
|
|
@@ -30676,7 +30699,7 @@
|
|
|
30676
30699
|
"optional": false,
|
|
30677
30700
|
"returnType": "boolean",
|
|
30678
30701
|
"typeParameters": [],
|
|
30679
|
-
"line":
|
|
30702
|
+
"line": 331,
|
|
30680
30703
|
"deprecated": false,
|
|
30681
30704
|
"deprecationMessage": "",
|
|
30682
30705
|
"rawdescription": "\n\nReturns `true` if the selected item is not the last item in the `DropdownList`.\n",
|
|
@@ -30688,7 +30711,7 @@
|
|
|
30688
30711
|
"optional": false,
|
|
30689
30712
|
"returnType": "boolean",
|
|
30690
30713
|
"typeParameters": [],
|
|
30691
|
-
"line":
|
|
30714
|
+
"line": 375,
|
|
30692
30715
|
"deprecated": false,
|
|
30693
30716
|
"deprecationMessage": "",
|
|
30694
30717
|
"rawdescription": "\n\nReturns `true` if the selected item is not the first in the list.\n",
|
|
@@ -30700,7 +30723,7 @@
|
|
|
30700
30723
|
"optional": false,
|
|
30701
30724
|
"returnType": "void",
|
|
30702
30725
|
"typeParameters": [],
|
|
30703
|
-
"line":
|
|
30726
|
+
"line": 497,
|
|
30704
30727
|
"deprecated": false,
|
|
30705
30728
|
"deprecationMessage": "",
|
|
30706
30729
|
"rawdescription": "\n\nInitializes focus in the list, effectively a wrapper for `getCurrentElement().focus()`\n",
|
|
@@ -30719,7 +30742,7 @@
|
|
|
30719
30742
|
"optional": false,
|
|
30720
30743
|
"returnType": "void",
|
|
30721
30744
|
"typeParameters": [],
|
|
30722
|
-
"line":
|
|
30745
|
+
"line": 523,
|
|
30723
30746
|
"deprecated": false,
|
|
30724
30747
|
"deprecationMessage": "",
|
|
30725
30748
|
"rawdescription": "\n\nManages the keyboard accessibility for navigation and selection within a `DropdownList`.\n",
|
|
@@ -30749,7 +30772,7 @@
|
|
|
30749
30772
|
"optional": false,
|
|
30750
30773
|
"returnType": "void",
|
|
30751
30774
|
"typeParameters": [],
|
|
30752
|
-
"line":
|
|
30775
|
+
"line": 580,
|
|
30753
30776
|
"deprecated": false,
|
|
30754
30777
|
"deprecationMessage": "",
|
|
30755
30778
|
"jsdoctags": [
|
|
@@ -30777,7 +30800,7 @@
|
|
|
30777
30800
|
"optional": false,
|
|
30778
30801
|
"returnType": "void",
|
|
30779
30802
|
"typeParameters": [],
|
|
30780
|
-
"line":
|
|
30803
|
+
"line": 574,
|
|
30781
30804
|
"deprecated": false,
|
|
30782
30805
|
"deprecationMessage": "",
|
|
30783
30806
|
"jsdoctags": [
|
|
@@ -30806,7 +30829,7 @@
|
|
|
30806
30829
|
"optional": false,
|
|
30807
30830
|
"returnType": "void",
|
|
30808
30831
|
"typeParameters": [],
|
|
30809
|
-
"line":
|
|
30832
|
+
"line": 599,
|
|
30810
30833
|
"deprecated": false,
|
|
30811
30834
|
"deprecationMessage": "",
|
|
30812
30835
|
"rawdescription": "\n\nSubscribe the function passed to an internal observable that will resolve once the items are ready\n",
|
|
@@ -30837,7 +30860,7 @@
|
|
|
30837
30860
|
"optional": false,
|
|
30838
30861
|
"returnType": "void",
|
|
30839
30862
|
"typeParameters": [],
|
|
30840
|
-
"line":
|
|
30863
|
+
"line": 446,
|
|
30841
30864
|
"deprecated": false,
|
|
30842
30865
|
"deprecationMessage": "",
|
|
30843
30866
|
"rawdescription": "\n\nTransforms array input list of items to the correct state by updating the selected item(s).\n",
|
|
@@ -30868,7 +30891,7 @@
|
|
|
30868
30891
|
"optional": false,
|
|
30869
30892
|
"returnType": "void",
|
|
30870
30893
|
"typeParameters": [],
|
|
30871
|
-
"line":
|
|
30894
|
+
"line": 604,
|
|
30872
30895
|
"deprecated": false,
|
|
30873
30896
|
"deprecationMessage": "",
|
|
30874
30897
|
"jsdoctags": [
|
|
@@ -30890,7 +30913,7 @@
|
|
|
30890
30913
|
"optional": false,
|
|
30891
30914
|
"returnType": "void",
|
|
30892
30915
|
"typeParameters": [],
|
|
30893
|
-
"line":
|
|
30916
|
+
"line": 306,
|
|
30894
30917
|
"deprecated": false,
|
|
30895
30918
|
"deprecationMessage": "",
|
|
30896
30919
|
"rawdescription": "\n\nInitializes (or re-initializes) the Observable that handles switching focus to an element based on\nkey input matching the first letter of the item in the list.\n",
|
|
@@ -30902,7 +30925,7 @@
|
|
|
30902
30925
|
"optional": false,
|
|
30903
30926
|
"returnType": "void",
|
|
30904
30927
|
"typeParameters": [],
|
|
30905
|
-
"line":
|
|
30928
|
+
"line": 508,
|
|
30906
30929
|
"deprecated": false,
|
|
30907
30930
|
"deprecationMessage": ""
|
|
30908
30931
|
},
|
|
@@ -30919,7 +30942,7 @@
|
|
|
30919
30942
|
"optional": false,
|
|
30920
30943
|
"returnType": "void",
|
|
30921
30944
|
"typeParameters": [],
|
|
30922
|
-
"line":
|
|
30945
|
+
"line": 276,
|
|
30923
30946
|
"deprecated": false,
|
|
30924
30947
|
"deprecationMessage": "",
|
|
30925
30948
|
"rawdescription": "\n\nUpdates the displayed list of items and then retrieves the most current properties for the `DropdownList` from the DOM.\n",
|
|
@@ -30946,7 +30969,7 @@
|
|
|
30946
30969
|
"description": "<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\"><cds-dropdown-list [items]="listItems"></cds-dropdown-list></code></pre></div><b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">listItems = [\n {\n content: "item one",\n selected: false\n },\n {\n content: "item two",\n selected: false,\n },\n {\n content: "item three",\n selected: false\n },\n {\n content: "item four",\n selected: false\n }\n];</code></pre></div>",
|
|
30947
30970
|
"rawdescription": "\n\n```html\n<cds-dropdown-list [items]=\"listItems\"></cds-dropdown-list>\n```\n```typescript\nlistItems = [\n\t{\n\t\tcontent: \"item one\",\n\t\tselected: false\n\t},\n\t{\n\t\tcontent: \"item two\",\n\t\tselected: false,\n\t},\n\t{\n\t\tcontent: \"item three\",\n\t\tselected: false\n\t},\n\t{\n\t\tcontent: \"item four\",\n\t\tselected: false\n\t}\n];\n```\n",
|
|
30948
30971
|
"type": "component",
|
|
30949
|
-
"sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tOnDestroy,\n\tEventEmitter,\n\tTemplateRef,\n\tAfterViewInit,\n\tViewChild,\n\tElementRef,\n\tViewChildren,\n\tQueryList,\n\tApplicationRef\n} from \"@angular/core\";\nimport { Observable, isObservable, Subscription, of } from \"rxjs\";\nimport { first } from \"rxjs/operators\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { AbstractDropdownView } from \"../abstract-dropdown-view.class\";\nimport { ListItem } from \"../list-item.interface\";\nimport { watchFocusJump } from \"../dropdowntools\";\nimport { ScrollCustomEvent } from \"./scroll-custom-event.interface\";\n\n\n/**\n * ```html\n * <cds-dropdown-list [items]=\"listItems\"></cds-dropdown-list>\n * ```\n * ```typescript\n * listItems = [\n * \t{\n * \t\tcontent: \"item one\",\n * \t\tselected: false\n * \t},\n * \t{\n * \t\tcontent: \"item two\",\n * \t\tselected: false,\n * \t},\n * \t{\n * \t\tcontent: \"item three\",\n * \t\tselected: false\n * \t},\n * \t{\n * \t\tcontent: \"item four\",\n * \t\tselected: false\n * \t}\n * ];\n * ```\n */\n@Component({\n\tselector: \"cds-dropdown-list, ibm-dropdown-list\",\n\ttemplate: `\n\t\t<ul\n\t\t\t#list\n\t\t\t[id]=\"listId\"\n\t\t\trole=\"listbox\"\n\t\t\tclass=\"cds--list-box__menu cds--multi-select\"\n\t\t\t(scroll)=\"emitScroll($event)\"\n\t\t\t(keydown)=\"navigateList($event)\"\n\t\t\ttabindex=\"-1\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-activedescendant]=\"highlightedItem\">\n\t\t\t@for (item of displayItems; track item; let i = $index) {\n\t\t\t\t<li\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\t(click)=\"doClick($event, item)\"\n\t\t\t\t\tclass=\"cds--list-box__menu-item\"\n\t\t\t\t\t[attr.aria-selected]=\"item.selected\"\n\t\t\t\t\t[id]=\"getItemId(i)\"\n\t\t\t\t\t[attr.title]=\" showTitles ? item.content : null\"\n\t\t\t\t\t[attr.disabled]=\"item.disabled ? true : null\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--list-box__menu-item--active': item.selected,\n\t\t\t\t\t\t'cds--list-box__menu-item--highlighted': highlightedItem === getItemId(i)\n\t\t\t\t\t}\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t#listItem\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\tclass=\"cds--list-box__menu-item__option\">\n\t\t\t\t\t\t@if (!listTpl && type === 'multi') {\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"cds--form-item cds--checkbox-wrapper\">\n\t\t\t\t\t\t\t\t<label [attr.data-contained-checkbox-state]=\"item.selected\" class=\"cds--checkbox-label\">\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\tclass=\"cds--checkbox\"\n\t\t\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t\t\t[checked]=\"item.selected\"\n\t\t\t\t\t\t\t\t\t\t[disabled]=\"item.disabled\"\n\t\t\t\t\t\t\t\t\t\ttabindex=\"-1\">\n\t\t\t\t\t\t\t\t\t<span class=\"cds--checkbox-appearance\"></span>\n\t\t\t\t\t\t\t\t\t<span class=\"cds--checkbox-label-text\">{{item.content}}</span>\n\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (!listTpl && type === 'single') {\n\t\t\t\t\t\t\t{{item.content}}\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tcdsIcon=\"checkmark\"\n\t\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\t\tclass=\"cds--list-box__menu-item__selected-icon\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (listTpl) {\n\t\t\t\t\t\t\t<ng-template [ngTemplateOutletContext]=\"{item: item}\" [ngTemplateOutlet]=\"listTpl\" />\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</li>\n\t\t\t}\n\t\t</ul>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: AbstractDropdownView,\n\t\t\tuseExisting: DropdownList\n\t\t}\n\t]\n})\nexport class DropdownList implements AbstractDropdownView, AfterViewInit, OnDestroy {\n\tstatic listCount = 0;\n\t@Input() ariaLabel = this.i18n.get().DROPDOWN_LIST.LABEL;\n\t/**\n\t * The list items belonging to the `DropdownList`.\n\t */\n\t@Input() set items(value: Array<ListItem> | Observable<Array<ListItem>>) {\n\t\tif (isObservable(value)) {\n\t\t\tif (this._itemsSubscription) {\n\t\t\t\tthis._itemsSubscription.unsubscribe();\n\t\t\t}\n\t\t\tthis._itemsReady = new Observable<boolean>((observer) => {\n\t\t\t\tthis._itemsSubscription = value.subscribe(v => {\n\t\t\t\t\tthis.updateList(v);\n\t\t\t\t\tobserver.next(true);\n\t\t\t\t\tobserver.complete();\n\t\t\t\t});\n\t\t\t});\n\t\t\tthis.onItemsReady(null);\n\t\t} else {\n\t\t\tthis.updateList(value);\n\t\t}\n\t\tthis._originalItems = value;\n\t}\n\n\tget items(): Array<ListItem> | Observable<Array<ListItem>> {\n\t\treturn this._originalItems;\n\t}\n\t/**\n\t * Template to bind to items in the `DropdownList` (optional).\n\t */\n\t@Input() listTpl: string | TemplateRef<any> = null;\n\t/**\n\t * Event to emit selection of a list item within the `DropdownList`.\n\t */\n\t@Output() select: EventEmitter<{ item: ListItem, isUpdate?: boolean } | ListItem[]> = new EventEmitter();\n\t/**\n\t * Event to emit scroll event of a list within the `DropdownList`.\n\t */\n\t@Output() scroll: EventEmitter<ScrollCustomEvent> = new EventEmitter();\n\t/**\n\t * Event to suggest a blur on the view.\n\t * Emits _after_ the first/last item has been focused.\n\t * ex.\n\t * ArrowUp -> focus first item\n\t * ArrowUp -> emit event\n\t *\n\t * When this event fires focus should be placed on some element outside of the list - blurring the list as a result\n\t */\n\t@Output() blurIntent = new EventEmitter<\"top\" | \"bottom\">();\n\t/**\n\t * Maintains a reference to the view DOM element for the unordered list of items within the `DropdownList`.\n\t */\n\t@ViewChild(\"list\", { static: true }) list: ElementRef;\n\t/**\n\t * Defines whether or not the `DropdownList` supports selecting multiple items as opposed to single\n\t * item selection.\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\n\t/**\n\t * Defines whether to show title attribute or not\n\t */\n\t@Input() showTitles = true;\n\n\t/**\n\t * Defines the rendering size of the `DropdownList` input component.\n\t */\n\tpublic size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\tpublic listId = `listbox-${DropdownList.listCount++}`;\n\tpublic highlightedItem = null;\n\t/**\n\t * Holds the list of items that will be displayed in the `DropdownList`.\n\t * It differs from the the complete set of items when filtering is used (but\n\t * it is always a subset of the total items in `DropdownList`).\n\t */\n\tpublic displayItems: Array<ListItem> = [];\n\t/**\n\t * Maintains the index for the selected item within the `DropdownList`.\n\t */\n\tprotected index = -1;\n\t/**\n\t * An array holding the HTML list elements in the view.\n\t */\n\t@ViewChildren(\"listItem\") protected listElementList: QueryList<ElementRef>;\n\t/**\n\t * Observable bound to keydown events to control filtering.\n\t */\n\tprotected focusJump;\n\t/**\n\t * Tracks the current (if any) subscription to the items observable so we can clean up when the input is updated.\n\t */\n\tprotected _itemsSubscription: Subscription;\n\t/**\n\t * Used to retain the original items passed to the setter.\n\t */\n\tprotected _originalItems: Array<ListItem> | Observable<Array<ListItem>>;\n\t/**\n\t * Useful representation of the items, should be accessed via `getListItems`.\n\t */\n\tprotected _items: Array<ListItem> = [];\n\t/**\n\t * Used to wait for items in case they are passed through an observable.\n\t */\n\tprotected _itemsReady: Observable<boolean>;\n\n\t/**\n\t * Creates an instance of `DropdownList`.\n\t */\n\tconstructor(public elementRef: ElementRef, protected i18n: I18n, protected appRef: ApplicationRef) {}\n\n\t/**\n\t * Retrieves array of list items and index of the selected item after view has rendered.\n\t * Additionally, any Observables for the `DropdownList` are initialized.\n\t */\n\tngAfterViewInit() {\n\t\tthis.index = this.getListItems().findIndex(item => item.selected);\n\t\tthis.setupFocusObservable();\n\t\tsetTimeout(() => {\n\t\t\tthis.doEmitSelect(true);\n\t\t});\n\t}\n\n\t/**\n\t * Removes any Observables on destruction of the component.\n\t */\n\tngOnDestroy() {\n\t\tif (this.focusJump) {\n\t\t\tthis.focusJump.unsubscribe();\n\t\t}\n\t\tif (this._itemsSubscription) {\n\t\t\tthis._itemsSubscription.unsubscribe();\n\t\t}\n\t}\n\n\tdoEmitSelect(isUpdate = true) {\n\t\tif (this.type === \"single\") {\n\t\t\tthis.select.emit({ item: this._items.find(item => item.selected), isUpdate: isUpdate });\n\t\t} else {\n\t\t\t// abuse javascripts object mutability until we can break the API and switch to\n\t\t\t// { items: [], isUpdate: true }\n\t\t\tconst selected = this.getSelected() || [];\n\t\t\tselected[\"isUpdate\"] = isUpdate;\n\t\t\tthis.select.emit(selected);\n\t\t}\n\t}\n\n\tgetItemId(index: number) {\n\t\treturn `${this.listId}-${index}`;\n\t}\n\n\t/**\n\t * Updates the displayed list of items and then retrieves the most current properties for the `DropdownList` from the DOM.\n\t */\n\tupdateList(items) {\n\t\tthis._items = items.map(item => Object.assign({}, item));\n\t\tthis.displayItems = this._items;\n\t\tthis.updateIndex();\n\t\tthis.setupFocusObservable();\n\t\tthis.doEmitSelect();\n\t}\n\n\t/**\n\t * Filters the items being displayed in the DOM list.\n\t */\n\tfilterBy(query = \"\") {\n\t\tif (query) {\n\t\t\tthis.displayItems = this.getListItems().filter(item => item.content.toLowerCase().includes(query.toLowerCase()));\n\t\t\t// Reset index if items were found\n\t\t\t// Prevent selecting index in list that are undefined.\n\t\t\tif (this.displayItems) {\n\t\t\t\tthis.index = 0;\n\t\t\t}\n\t\t} else {\n\t\t\tthis.displayItems = this.getListItems();\n\t\t}\n\n\t\tthis.updateIndex();\n\t}\n\n\t/**\n\t * Initializes (or re-initializes) the Observable that handles switching focus to an element based on\n\t * key input matching the first letter of the item in the list.\n\t */\n\tsetupFocusObservable() {\n\t\tif (!this.list) { return; }\n\t\tif (this.focusJump) {\n\t\t\tthis.focusJump.unsubscribe();\n\t\t}\n\t\tlet elList = Array.from(this.list.nativeElement.querySelectorAll(\"li\"));\n\t\tthis.focusJump = watchFocusJump(this.list.nativeElement, elList)\n\t\t\t.subscribe(el => {\n\t\t\t\tel.focus();\n\t\t\t});\n\t}\n\n\t/**\n\t * Returns the `ListItem` that is subsequent to the selected item in the `DropdownList`.\n\t */\n\tgetNextItem(): ListItem {\n\t\tif (this.index < this.displayItems.length - 1) {\n\t\t\tthis.index++;\n\t\t}\n\t\treturn this.displayItems[this.index];\n\t}\n\n\t/**\n\t * Returns `true` if the selected item is not the last item in the `DropdownList`.\n\t */\n\thasNextElement(): boolean {\n\t\treturn this.index < this.displayItems.length - 1 &&\n\t\t\t(!(this.index === this.displayItems.length - 2) || !this.displayItems[this.index + 1].disabled);\n\t}\n\n\t/**\n\t * Returns the `HTMLElement` for the item that is subsequent to the selected item.\n\t */\n\tgetNextElement(): HTMLElement {\n\t\t// Only return native elements if they are rendered\n\t\tconst elemList = this.listElementList ? this.listElementList.toArray() : [];\n\t\tif (!elemList.length) {\n\t\t\treturn null;\n\t\t}\n\n\t\t/**\n\t\t * Start checking from next index\n\t\t * Continue looping through the list until a non disabeled element is found or\n\t\t * end of list is reached\n\t\t */\n\t\tfor (let i = this.index + 1; i < elemList.length; i++) {\n\t\t\t// If the values in the list are not disabled\n\t\t\tif (!this.displayItems[i].disabled) {\n\t\t\t\tthis.index = i;\n\t\t\t\treturn elemList[i].nativeElement;\n\t\t\t}\n\t\t}\n\n\t\treturn elemList[this.index]?.nativeElement;\n\t}\n\n\t/**\n\t * Returns the `ListItem` that precedes the selected item within `DropdownList`.\n\t */\n\tgetPrevItem(): ListItem {\n\t\tif (this.index > 0) {\n\t\t\tthis.index--;\n\t\t}\n\t\treturn this.displayItems[this.index];\n\t}\n\n\t/**\n\t * Returns `true` if the selected item is not the first in the list.\n\t */\n\thasPrevElement(): boolean {\n\t\treturn this.index > 0 && (!(this.index === 1) || !this.displayItems[0].disabled);\n\t}\n\n\t/**\n\t * Returns the `HTMLElement` for the item that precedes the selected item.\n\t */\n\tgetPrevElement(): HTMLElement {\n\t\t// Only return native elements if they are rendered\n\t\tconst elemList = this.listElementList ? this.listElementList.toArray() : [];\n\t\tif (!elemList.length) {\n\t\t\treturn null;\n\t\t}\n\n\t\t/**\n\t\t * Start checking from next index\n\t\t * Continue looping through the list until a non disabeled element is found or\n\t\t * end of list is reached\n\t\t */\n\t\tfor (let i = this.index - 1; i < this.index && i >= 0; i--) {\n\t\t\t// If the values in the list are not disabled\n\t\t\tif (!this.displayItems[i].disabled) {\n\t\t\t\tthis.index = i;\n\t\t\t\treturn elemList[i].nativeElement;\n\t\t\t}\n\t\t}\n\n\t\treturn elemList[this.index].nativeElement;\n\t}\n\n\t/**\n\t * Returns the `ListItem` that is selected within `DropdownList`.\n\t */\n\tgetCurrentItem(): ListItem {\n\t\tif (this.index < 0) {\n\t\t\treturn this.displayItems[0];\n\t\t}\n\t\treturn this.displayItems[this.index];\n\t}\n\n\t/**\n\t * Returns the `HTMLElement` for the item that is selected within the `DropdownList`.\n\t */\n\tgetCurrentElement(): HTMLElement {\n\t\tif (this.index < 0) {\n\t\t\treturn this.listElementList.first.nativeElement;\n\t\t}\n\t\treturn this.listElementList.toArray()[this.index].nativeElement;\n\t}\n\n\t/**\n\t * Returns the items as an Array\n\t */\n\tgetListItems(): Array<ListItem> {\n\t\treturn this._items;\n\t}\n\n\t/**\n\t * Returns a list containing the selected item(s) in the `DropdownList`.\n\t */\n\tgetSelected(): ListItem[] {\n\t\tlet selected = this.getListItems().filter(item => item.selected);\n\t\tif (selected.length === 0) {\n\t\t\treturn [];\n\t\t}\n\t\treturn selected;\n\t}\n\n\t/**\n\t * Transforms array input list of items to the correct state by updating the selected item(s).\n\t */\n\tpropagateSelected(value: Array<ListItem>): void {\n\t\t// if we get a non-array, log out an error (since it is one)\n\t\tif (!Array.isArray(value)) {\n\t\t\tconsole.error(`${this.constructor.name}.propagateSelected expects an Array<ListItem>, got ${JSON.stringify(value)}`);\n\t\t}\n\t\tthis.onItemsReady(() => {\n\t\t\tconst selectedNewItems = [];\n\t\t\tfor (let newItem of value) {\n\t\t\t\tif (newItem && newItem.selected) {\n\t\t\t\t\t// copy the item\n\t\t\t\t\tlet tempNewItem: string | ListItem = Object.assign({}, newItem);\n\t\t\t\t\t// deleted selected because it's what we _want_ to change\n\t\t\t\t\tdelete tempNewItem.selected;\n\t\t\t\t\t// stringify for compare later\n\t\t\t\t\ttempNewItem = JSON.stringify(tempNewItem);\n\t\t\t\t\t// add to the list of selected items\n\t\t\t\t\tselectedNewItems.push(tempNewItem);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// loop through the list items and update the `selected` state for matching items in `value`\n\t\t\tfor (let oldItem of this.getListItems()) {\n\t\t\t\t// fast path when no items are selected\n\t\t\t\tif (selectedNewItems.length === 0) {\n\t\t\t\t\toldItem.selected = false;\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\t// copy the item\n\t\t\t\tlet tempOldItem: string | ListItem = Object.assign({}, oldItem);\n\t\t\t\t// deleted selected because it's what we _want_ to change\n\t\t\t\tdelete tempOldItem.selected;\n\t\t\t\t// stringify for compare\n\t\t\t\ttempOldItem = JSON.stringify(tempOldItem);\n\t\t\t\tfor (let selectedNewItem of selectedNewItems) {\n\t\t\t\t\t// do the compare\n\t\t\t\t\tif (tempOldItem.includes(selectedNewItem)) {\n\t\t\t\t\t\toldItem.selected = true;\n\t\t\t\t\t\t// if we've found a matching item, we can stop looping\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t} else {\n\t\t\t\t\t\toldItem.selected = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * Initializes focus in the list, effectively a wrapper for `getCurrentElement().focus()`\n\t */\n\tinitFocus() {\n\t\tif (this.index < 0) {\n\t\t\tthis.updateIndex();\n\t\t}\n\n\t\tthis.list.nativeElement.focus();\n\t\tsetTimeout(() => {\n\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t});\n\t}\n\n\tupdateIndex() {\n\t\t// initialize index on the first selected item or\n\t\t// on the next non disabled item if no items are selected\n\t\t// in case, if all items are disabled, the index value will remain same\n\t\tconst selected = this.getSelected();\n\t\tif (selected.length) {\n\t\t\tthis.index = this.displayItems.indexOf(selected[0]);\n\t\t} else if (this.hasNextElement()) {\n\t\t\tthis.getNextElement();\n\t\t}\n\t}\n\n\t/**\n\t * Manages the keyboard accessibility for navigation and selection within a `DropdownList`.\n\t */\n\tnavigateList(event: KeyboardEvent) {\n\t\tif (event.key === \"Enter\" || event.key === \" \") {\n\t\t\tif (this.listElementList.some(option => option.nativeElement === event.target)) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t\tif (event.key === \"Enter\") {\n\t\t\t\tthis.doClick(event, this.getCurrentItem());\n\t\t\t}\n\t\t} else if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n\t\t\tevent.preventDefault();\n\t\t\tif (event.key === \"ArrowDown\") {\n\t\t\t\tif (this.hasNextElement()) {\n\t\t\t\t\tthis.getNextElement()?.scrollIntoView({ block: \"end\" });\n\t\t\t\t} else {\n\t\t\t\t\tthis.blurIntent.emit(\"bottom\");\n\t\t\t\t}\n\t\t\t} else if (event.key === \"ArrowUp\") {\n\t\t\t\tif (this.hasPrevElement()) {\n\t\t\t\t\tthis.getPrevElement().scrollIntoView({ block: \"nearest\" });\n\t\t\t\t} else {\n\t\t\t\t\tthis.blurIntent.emit(\"top\");\n\t\t\t\t}\n\t\t\t}\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Emits the selected item or items after a mouse click event has occurred.\n\t */\n\tdoClick(event, item) {\n\t\tevent.preventDefault();\n\t\tif (item && !item.disabled) {\n\t\t\tthis.list.nativeElement.focus();\n\t\t\tif (this.type === \"single\") {\n\t\t\t\titem.selected = true;\n\t\t\t\t// reset the selection\n\t\t\t\tfor (let otherItem of this.getListItems()) {\n\t\t\t\t\tif (item !== otherItem) { otherItem.selected = false; }\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\titem.selected = !item.selected;\n\t\t\t}\n\t\t\tthis.index = this.displayItems.indexOf(item);\n\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t\tthis.doEmitSelect(false);\n\t\t\tthis.appRef.tick();\n\t\t}\n\t}\n\n\tonItemFocus(index) {\n\t\tconst element = this.listElementList.toArray()[index].nativeElement;\n\t\telement.classList.add(\"cds--list-box__menu-item--highlighted\");\n\t\telement.tabIndex = 0;\n\t}\n\n\tonItemBlur(index) {\n\t\tconst element = this.listElementList.toArray()[index].nativeElement;\n\t\telement.classList.remove(\"cds--list-box__menu-item--highlighted\");\n\t\telement.tabIndex = -1;\n\t}\n\n\t/**\n\t * Emits the scroll event of the options list\n\t */\n\temitScroll(event) {\n\t\tconst atTop: boolean = event.srcElement.scrollTop === 0;\n\t\tconst atBottom: boolean = event.srcElement.scrollHeight - event.srcElement.scrollTop === event.srcElement.clientHeight;\n\t\tconst customScrollEvent = { atTop, atBottom, event };\n\t\tthis.scroll.emit(customScrollEvent);\n\t}\n\n\t/**\n\t * Subscribe the function passed to an internal observable that will resolve once the items are ready\n\t */\n\tonItemsReady(subcription: () => void): void {\n\t\t// this subscription will auto unsubscribe because of the `first()` pipe\n\t\t(this._itemsReady || of(true)).pipe(first()).subscribe(subcription);\n\t}\n\n\treorderSelected(moveFocus = true): void {\n\t\tthis.displayItems = [...this.getSelected(), ...this.getListItems().filter(item => !item.selected)];\n\t\tif (moveFocus) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateIndex();\n\t\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t\t});\n\t\t}\n\t}\n}\n",
|
|
30972
|
+
"sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tOnDestroy,\n\tEventEmitter,\n\tTemplateRef,\n\tAfterViewInit,\n\tViewChild,\n\tElementRef,\n\tViewChildren,\n\tQueryList\n} from \"@angular/core\";\nimport {\n\tObservable,\n\tisObservable,\n\tSubscription,\n\tof\n} from \"rxjs\";\nimport { first } from \"rxjs/operators\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { AbstractDropdownView } from \"../abstract-dropdown-view.class\";\nimport { ListItem } from \"../list-item.interface\";\nimport { watchFocusJump } from \"../dropdowntools\";\nimport { ScrollCustomEvent } from \"./scroll-custom-event.interface\";\n\n\n/**\n * ```html\n * <cds-dropdown-list [items]=\"listItems\"></cds-dropdown-list>\n * ```\n * ```typescript\n * listItems = [\n * \t{\n * \t\tcontent: \"item one\",\n * \t\tselected: false\n * \t},\n * \t{\n * \t\tcontent: \"item two\",\n * \t\tselected: false,\n * \t},\n * \t{\n * \t\tcontent: \"item three\",\n * \t\tselected: false\n * \t},\n * \t{\n * \t\tcontent: \"item four\",\n * \t\tselected: false\n * \t}\n * ];\n * ```\n */\n@Component({\n\tselector: \"cds-dropdown-list, ibm-dropdown-list\",\n\ttemplate: `\n\t\t<ul\n\t\t\t#list\n\t\t\t[id]=\"listId\"\n\t\t\trole=\"listbox\"\n\t\t\tclass=\"cds--list-box__menu cds--multi-select\"\n\t\t\t(scroll)=\"emitScroll($event)\"\n\t\t\t(keydown)=\"navigateList($event)\"\n\t\t\ttabindex=\"-1\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-activedescendant]=\"highlightedItem\">\n\t\t\t@for (item of displayItems; track item; let i = $index) {\n\t\t\t\t<li\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\t(click)=\"doClick($event, item)\"\n\t\t\t\t\tclass=\"cds--list-box__menu-item\"\n\t\t\t\t\t[attr.aria-selected]=\"item.selected\"\n\t\t\t\t\t[id]=\"getItemId(i)\"\n\t\t\t\t\t[attr.title]=\" showTitles ? item.content : null\"\n\t\t\t\t\t[attr.disabled]=\"item.disabled ? true : null\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--list-box__menu-item--active': item.selected,\n\t\t\t\t\t\t'cds--list-box__menu-item--highlighted': highlightedItem === getItemId(i)\n\t\t\t\t\t}\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t#listItem\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\tclass=\"cds--list-box__menu-item__option\">\n\t\t\t\t\t\t@if (!listTpl && type === 'multi') {\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"cds--form-item cds--checkbox-wrapper\">\n\t\t\t\t\t\t\t\t<label [attr.data-contained-checkbox-state]=\"item.selected\" class=\"cds--checkbox-label\">\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\tclass=\"cds--checkbox\"\n\t\t\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t\t\t[checked]=\"item.selected\"\n\t\t\t\t\t\t\t\t\t\t[disabled]=\"item.disabled\"\n\t\t\t\t\t\t\t\t\t\ttabindex=\"-1\">\n\t\t\t\t\t\t\t\t\t<span class=\"cds--checkbox-appearance\"></span>\n\t\t\t\t\t\t\t\t\t<span class=\"cds--checkbox-label-text\">{{item.content}}</span>\n\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (!listTpl && type === 'single') {\n\t\t\t\t\t\t\t{{item.content}}\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tcdsIcon=\"checkmark\"\n\t\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\t\tclass=\"cds--list-box__menu-item__selected-icon\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (listTpl) {\n\t\t\t\t\t\t\t<ng-template [ngTemplateOutletContext]=\"{item: item}\" [ngTemplateOutlet]=\"listTpl\" />\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</li>\n\t\t\t}\n\t\t</ul>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: AbstractDropdownView,\n\t\t\tuseExisting: DropdownList\n\t\t}\n\t]\n})\nexport class DropdownList implements AbstractDropdownView, AfterViewInit, OnDestroy {\n\tstatic listCount = 0;\n\t@Input() ariaLabel = this.i18n.get().DROPDOWN_LIST.LABEL;\n\t/**\n\t * The list items belonging to the `DropdownList`.\n\t */\n\t@Input() set items(value: Array<ListItem> | Observable<Array<ListItem>>) {\n\t\tif (isObservable(value)) {\n\t\t\tif (this._itemsSubscription) {\n\t\t\t\tthis._itemsSubscription.unsubscribe();\n\t\t\t}\n\t\t\tthis._itemsReady = new Observable<boolean>((observer) => {\n\t\t\t\tthis._itemsSubscription = value.subscribe(v => {\n\t\t\t\t\tthis.updateList(v);\n\t\t\t\t\tobserver.next(true);\n\t\t\t\t\tobserver.complete();\n\t\t\t\t});\n\t\t\t});\n\t\t\tthis.onItemsReady(null);\n\t\t} else {\n\t\t\tthis.updateList(value);\n\t\t}\n\t\tthis._originalItems = value;\n\t}\n\n\tget items(): Array<ListItem> | Observable<Array<ListItem>> {\n\t\treturn this._originalItems;\n\t}\n\t/**\n\t * Template to bind to items in the `DropdownList` (optional).\n\t */\n\t@Input() listTpl: string | TemplateRef<any> = null;\n\t/**\n\t * Event to emit selection of a list item within the `DropdownList`.\n\t */\n\t@Output() select: EventEmitter<{ item: ListItem, isUpdate?: boolean } | ListItem[]> = new EventEmitter();\n\t/**\n\t * Event to emit scroll event of a list within the `DropdownList`.\n\t */\n\t@Output() scroll: EventEmitter<ScrollCustomEvent> = new EventEmitter();\n\t/**\n\t * Event to suggest a blur on the view.\n\t * Emits _after_ the first/last item has been focused.\n\t * ex.\n\t * ArrowUp -> focus first item\n\t * ArrowUp -> emit event\n\t *\n\t * When this event fires focus should be placed on some element outside of the list - blurring the list as a result\n\t */\n\t@Output() blurIntent = new EventEmitter<\"top\" | \"bottom\">();\n\t/**\n\t * Maintains a reference to the view DOM element for the unordered list of items within the `DropdownList`.\n\t */\n\t@ViewChild(\"list\", { static: true }) list: ElementRef;\n\t/**\n\t * Defines whether or not the `DropdownList` supports selecting multiple items as opposed to single\n\t * item selection.\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\n\t/**\n\t * Defines whether to show title attribute or not\n\t */\n\t@Input() showTitles = true;\n\n\t/**\n\t * Defines the rendering size of the `DropdownList` input component.\n\t */\n\tpublic size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\tpublic listId = `listbox-${DropdownList.listCount++}`;\n\tpublic highlightedItem = null;\n\t/**\n\t * Holds the list of items that will be displayed in the `DropdownList`.\n\t * It differs from the the complete set of items when filtering is used (but\n\t * it is always a subset of the total items in `DropdownList`).\n\t */\n\tpublic displayItems: Array<ListItem> = [];\n\t/**\n\t * Maintains the index for the selected item within the `DropdownList`.\n\t */\n\tprotected index = -1;\n\t/**\n\t * An array holding the HTML list elements in the view.\n\t */\n\t@ViewChildren(\"listItem\") protected listElementList: QueryList<ElementRef>;\n\t/**\n\t * Observable bound to keydown events to control filtering.\n\t */\n\tprotected focusJump;\n\t/**\n\t * Tracks the current (if any) subscription to the items observable so we can clean up when the input is updated.\n\t */\n\tprotected _itemsSubscription: Subscription;\n\t/**\n\t * Used to retain the original items passed to the setter.\n\t */\n\tprotected _originalItems: Array<ListItem> | Observable<Array<ListItem>>;\n\t/**\n\t * Useful representation of the items, should be accessed via `getListItems`.\n\t */\n\tprotected _items: Array<ListItem> = [];\n\t/**\n\t * Used to wait for items in case they are passed through an observable.\n\t */\n\tprotected _itemsReady: Observable<boolean>;\n\n\t/**\n\t * Creates an instance of `DropdownList`.\n\t */\n\tconstructor(public elementRef: ElementRef, protected i18n: I18n) {}\n\n\t/**\n\t * Retrieves array of list items and index of the selected item after view has rendered.\n\t * Additionally, any Observables for the `DropdownList` are initialized.\n\t */\n\tngAfterViewInit() {\n\t\tthis.index = this.getListItems().findIndex(item => item.selected);\n\t\tthis.setupFocusObservable();\n\t\tsetTimeout(() => {\n\t\t\tthis.doEmitSelect(true);\n\t\t});\n\t}\n\n\t/**\n\t * Removes any Observables on destruction of the component.\n\t */\n\tngOnDestroy() {\n\t\tif (this.focusJump) {\n\t\t\tthis.focusJump.unsubscribe();\n\t\t}\n\t\tif (this._itemsSubscription) {\n\t\t\tthis._itemsSubscription.unsubscribe();\n\t\t}\n\t}\n\n\tdoEmitSelect(isUpdate = true) {\n\t\tif (this.type === \"single\") {\n\t\t\tthis.select.emit({ item: this._items.find(item => item.selected), isUpdate: isUpdate });\n\t\t} else {\n\t\t\t// abuse javascripts object mutability until we can break the API and switch to\n\t\t\t// { items: [], isUpdate: true }\n\t\t\tconst selected = this.getSelected() || [];\n\t\t\tselected[\"isUpdate\"] = isUpdate;\n\t\t\tthis.select.emit(selected);\n\t\t}\n\t}\n\n\tgetItemId(index: number) {\n\t\treturn `${this.listId}-${index}`;\n\t}\n\n\t/**\n\t * Updates the displayed list of items and then retrieves the most current properties for the `DropdownList` from the DOM.\n\t */\n\tupdateList(items) {\n\t\tthis._items = items.map(item => Object.assign({}, item));\n\t\tthis.displayItems = this._items;\n\t\tthis.updateIndex();\n\t\tthis.setupFocusObservable();\n\t\tthis.doEmitSelect();\n\t}\n\n\t/**\n\t * Filters the items being displayed in the DOM list.\n\t */\n\tfilterBy(query = \"\") {\n\t\tif (query) {\n\t\t\tthis.displayItems = this.getListItems().filter(item => item.content.toLowerCase().includes(query.toLowerCase()));\n\t\t\t// Reset index if items were found\n\t\t\t// Prevent selecting index in list that are undefined.\n\t\t\tif (this.displayItems) {\n\t\t\t\tthis.index = 0;\n\t\t\t}\n\t\t} else {\n\t\t\tthis.displayItems = this.getListItems();\n\t\t}\n\n\t\tthis.updateIndex();\n\t}\n\n\t/**\n\t * Initializes (or re-initializes) the Observable that handles switching focus to an element based on\n\t * key input matching the first letter of the item in the list.\n\t */\n\tsetupFocusObservable() {\n\t\tif (!this.list) { return; }\n\t\tif (this.focusJump) {\n\t\t\tthis.focusJump.unsubscribe();\n\t\t}\n\t\tlet elList = Array.from(this.list.nativeElement.querySelectorAll(\"li\"));\n\t\tthis.focusJump = watchFocusJump(this.list.nativeElement, elList)\n\t\t\t.subscribe(el => {\n\t\t\t\tel.focus();\n\t\t\t});\n\t}\n\n\t/**\n\t * Returns the `ListItem` that is subsequent to the selected item in the `DropdownList`.\n\t */\n\tgetNextItem(): ListItem {\n\t\tif (this.index < this.displayItems.length - 1) {\n\t\t\tthis.index++;\n\t\t}\n\t\treturn this.displayItems[this.index];\n\t}\n\n\t/**\n\t * Returns `true` if the selected item is not the last item in the `DropdownList`.\n\t */\n\thasNextElement(): boolean {\n\t\treturn this.index < this.displayItems.length - 1 &&\n\t\t\t(!(this.index === this.displayItems.length - 2) || !this.displayItems[this.index + 1].disabled);\n\t}\n\n\t/**\n\t * Returns the `HTMLElement` for the item that is subsequent to the selected item.\n\t */\n\tgetNextElement(): HTMLElement {\n\t\t// Only return native elements if they are rendered\n\t\tconst elemList = this.listElementList ? this.listElementList.toArray() : [];\n\t\tif (!elemList.length) {\n\t\t\treturn null;\n\t\t}\n\n\t\t/**\n\t\t * Start checking from next index\n\t\t * Continue looping through the list until a non disabeled element is found or\n\t\t * end of list is reached\n\t\t */\n\t\tfor (let i = this.index + 1; i < elemList.length; i++) {\n\t\t\t// If the values in the list are not disabled\n\t\t\tif (!this.displayItems[i].disabled) {\n\t\t\t\tthis.index = i;\n\t\t\t\treturn elemList[i].nativeElement;\n\t\t\t}\n\t\t}\n\n\t\treturn elemList[this.index]?.nativeElement;\n\t}\n\n\t/**\n\t * Returns the `ListItem` that precedes the selected item within `DropdownList`.\n\t */\n\tgetPrevItem(): ListItem {\n\t\tif (this.index > 0) {\n\t\t\tthis.index--;\n\t\t}\n\t\treturn this.displayItems[this.index];\n\t}\n\n\t/**\n\t * Returns `true` if the selected item is not the first in the list.\n\t */\n\thasPrevElement(): boolean {\n\t\treturn this.index > 0 && (!(this.index === 1) || !this.displayItems[0].disabled);\n\t}\n\n\t/**\n\t * Returns the `HTMLElement` for the item that precedes the selected item.\n\t */\n\tgetPrevElement(): HTMLElement {\n\t\t// Only return native elements if they are rendered\n\t\tconst elemList = this.listElementList ? this.listElementList.toArray() : [];\n\t\tif (!elemList.length) {\n\t\t\treturn null;\n\t\t}\n\n\t\t/**\n\t\t * Start checking from next index\n\t\t * Continue looping through the list until a non disabeled element is found or\n\t\t * end of list is reached\n\t\t */\n\t\tfor (let i = this.index - 1; i < this.index && i >= 0; i--) {\n\t\t\t// If the values in the list are not disabled\n\t\t\tif (!this.displayItems[i].disabled) {\n\t\t\t\tthis.index = i;\n\t\t\t\treturn elemList[i].nativeElement;\n\t\t\t}\n\t\t}\n\n\t\treturn elemList[this.index].nativeElement;\n\t}\n\n\t/**\n\t * Returns the `ListItem` that is selected within `DropdownList`.\n\t */\n\tgetCurrentItem(): ListItem {\n\t\tif (this.index < 0) {\n\t\t\treturn this.displayItems[0];\n\t\t}\n\t\treturn this.displayItems[this.index];\n\t}\n\n\t/**\n\t * Returns the `HTMLElement` for the item that is selected within the `DropdownList`.\n\t */\n\tgetCurrentElement(): HTMLElement {\n\t\tif (this.index < 0) {\n\t\t\treturn this.listElementList.first.nativeElement;\n\t\t}\n\t\treturn this.listElementList.toArray()[this.index].nativeElement;\n\t}\n\n\t/**\n\t * Returns the items as an Array\n\t */\n\tgetListItems(): Array<ListItem> {\n\t\treturn this._items;\n\t}\n\n\t/**\n\t * Returns a list containing the selected item(s) in the `DropdownList`.\n\t */\n\tgetSelected(): ListItem[] {\n\t\tlet selected = this.getListItems().filter(item => item.selected);\n\t\tif (selected.length === 0) {\n\t\t\treturn [];\n\t\t}\n\t\treturn selected;\n\t}\n\n\t/**\n\t * Transforms array input list of items to the correct state by updating the selected item(s).\n\t */\n\tpropagateSelected(value: Array<ListItem>): void {\n\t\t// if we get a non-array, log out an error (since it is one)\n\t\tif (!Array.isArray(value)) {\n\t\t\tconsole.error(`${this.constructor.name}.propagateSelected expects an Array<ListItem>, got ${JSON.stringify(value)}`);\n\t\t}\n\t\tthis.onItemsReady(() => {\n\t\t\tconst selectedNewItems = [];\n\t\t\tfor (let newItem of value) {\n\t\t\t\tif (newItem && newItem.selected) {\n\t\t\t\t\t// copy the item\n\t\t\t\t\tlet tempNewItem: string | ListItem = Object.assign({}, newItem);\n\t\t\t\t\t// deleted selected because it's what we _want_ to change\n\t\t\t\t\tdelete tempNewItem.selected;\n\t\t\t\t\t// stringify for compare later\n\t\t\t\t\ttempNewItem = JSON.stringify(tempNewItem);\n\t\t\t\t\t// add to the list of selected items\n\t\t\t\t\tselectedNewItems.push(tempNewItem);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// loop through the list items and update the `selected` state for matching items in `value`\n\t\t\tfor (let oldItem of this.getListItems()) {\n\t\t\t\t// fast path when no items are selected\n\t\t\t\tif (selectedNewItems.length === 0) {\n\t\t\t\t\toldItem.selected = false;\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\t// copy the item\n\t\t\t\tlet tempOldItem: string | ListItem = Object.assign({}, oldItem);\n\t\t\t\t// deleted selected because it's what we _want_ to change\n\t\t\t\tdelete tempOldItem.selected;\n\t\t\t\t// stringify for compare\n\t\t\t\ttempOldItem = JSON.stringify(tempOldItem);\n\t\t\t\tfor (let selectedNewItem of selectedNewItems) {\n\t\t\t\t\t// do the compare\n\t\t\t\t\tif (tempOldItem.includes(selectedNewItem)) {\n\t\t\t\t\t\toldItem.selected = true;\n\t\t\t\t\t\t// if we've found a matching item, we can stop looping\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t} else {\n\t\t\t\t\t\toldItem.selected = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * Initializes focus in the list, effectively a wrapper for `getCurrentElement().focus()`\n\t */\n\tinitFocus() {\n\t\tif (this.index < 0) {\n\t\t\tthis.updateIndex();\n\t\t}\n\n\t\tthis.list.nativeElement.focus();\n\t\tsetTimeout(() => {\n\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t});\n\t}\n\n\tupdateIndex() {\n\t\t// initialize index on the first selected item or\n\t\t// on the next non disabled item if no items are selected\n\t\t// in case, if all items are disabled, the index value will remain same\n\t\tconst selected = this.getSelected();\n\t\tif (selected.length) {\n\t\t\tthis.index = this.displayItems.indexOf(selected[0]);\n\t\t} else if (this.hasNextElement()) {\n\t\t\tthis.getNextElement();\n\t\t}\n\t}\n\n\t/**\n\t * Manages the keyboard accessibility for navigation and selection within a `DropdownList`.\n\t */\n\tnavigateList(event: KeyboardEvent) {\n\t\tif (event.key === \"Enter\" || event.key === \" \") {\n\t\t\tif (this.listElementList.some(option => option.nativeElement === event.target)) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t\tif (event.key === \"Enter\") {\n\t\t\t\tthis.doClick(event, this.getCurrentItem());\n\t\t\t}\n\t\t} else if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n\t\t\tevent.preventDefault();\n\t\t\tif (event.key === \"ArrowDown\") {\n\t\t\t\tif (this.hasNextElement()) {\n\t\t\t\t\tthis.getNextElement()?.scrollIntoView({ block: \"end\" });\n\t\t\t\t} else {\n\t\t\t\t\tthis.blurIntent.emit(\"bottom\");\n\t\t\t\t}\n\t\t\t} else if (event.key === \"ArrowUp\") {\n\t\t\t\tif (this.hasPrevElement()) {\n\t\t\t\t\tthis.getPrevElement().scrollIntoView({ block: \"nearest\" });\n\t\t\t\t} else {\n\t\t\t\t\tthis.blurIntent.emit(\"top\");\n\t\t\t\t}\n\t\t\t}\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Emits the selected item or items after a mouse click event has occurred.\n\t */\n\tdoClick(event, item) {\n\t\tevent.preventDefault();\n\t\tif (item && !item.disabled) {\n\t\t\tthis.list.nativeElement.focus();\n\t\t\tif (this.type === \"single\") {\n\t\t\t\titem.selected = true;\n\t\t\t\t// reset the selection\n\t\t\t\tfor (let otherItem of this.getListItems()) {\n\t\t\t\t\tif (item !== otherItem) { otherItem.selected = false; }\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\titem.selected = !item.selected;\n\t\t\t}\n\t\t\tthis.index = this.displayItems.indexOf(item);\n\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t\tthis.doEmitSelect(false);\n\t\t}\n\t}\n\n\tonItemFocus(index) {\n\t\tconst element = this.listElementList.toArray()[index].nativeElement;\n\t\telement.classList.add(\"cds--list-box__menu-item--highlighted\");\n\t\telement.tabIndex = 0;\n\t}\n\n\tonItemBlur(index) {\n\t\tconst element = this.listElementList.toArray()[index].nativeElement;\n\t\telement.classList.remove(\"cds--list-box__menu-item--highlighted\");\n\t\telement.tabIndex = -1;\n\t}\n\n\t/**\n\t * Emits the scroll event of the options list\n\t */\n\temitScroll(event) {\n\t\tconst atTop: boolean = event.srcElement.scrollTop === 0;\n\t\tconst atBottom: boolean = event.srcElement.scrollHeight - event.srcElement.scrollTop === event.srcElement.clientHeight;\n\t\tconst customScrollEvent = { atTop, atBottom, event };\n\t\tthis.scroll.emit(customScrollEvent);\n\t}\n\n\t/**\n\t * Subscribe the function passed to an internal observable that will resolve once the items are ready\n\t */\n\tonItemsReady(subcription: () => void): void {\n\t\t// this subscription will auto unsubscribe because of the `first()` pipe\n\t\t(this._itemsReady || of(true)).pipe(first()).subscribe(subcription);\n\t}\n\n\treorderSelected(moveFocus = true): void {\n\t\tthis.displayItems = [...this.getSelected(), ...this.getListItems().filter(item => !item.selected)];\n\t\tif (moveFocus) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateIndex();\n\t\t\t\tthis.highlightedItem = this.getItemId(this.index);\n\t\t\t});\n\t\t}\n\t}\n}\n",
|
|
30950
30973
|
"assetsDirs": [],
|
|
30951
30974
|
"styleUrlsData": "",
|
|
30952
30975
|
"stylesData": "",
|
|
@@ -30967,15 +30990,9 @@
|
|
|
30967
30990
|
"type": "I18n",
|
|
30968
30991
|
"deprecated": false,
|
|
30969
30992
|
"deprecationMessage": ""
|
|
30970
|
-
},
|
|
30971
|
-
{
|
|
30972
|
-
"name": "appRef",
|
|
30973
|
-
"type": "ApplicationRef",
|
|
30974
|
-
"deprecated": false,
|
|
30975
|
-
"deprecationMessage": ""
|
|
30976
30993
|
}
|
|
30977
30994
|
],
|
|
30978
|
-
"line":
|
|
30995
|
+
"line": 226,
|
|
30979
30996
|
"rawdescription": "\n\nCreates an instance of `DropdownList`.\n",
|
|
30980
30997
|
"jsdoctags": [
|
|
30981
30998
|
{
|
|
@@ -30995,15 +31012,6 @@
|
|
|
30995
31012
|
"tagName": {
|
|
30996
31013
|
"text": "param"
|
|
30997
31014
|
}
|
|
30998
|
-
},
|
|
30999
|
-
{
|
|
31000
|
-
"name": "appRef",
|
|
31001
|
-
"type": "ApplicationRef",
|
|
31002
|
-
"deprecated": false,
|
|
31003
|
-
"deprecationMessage": "",
|
|
31004
|
-
"tagName": {
|
|
31005
|
-
"text": "param"
|
|
31006
|
-
}
|
|
31007
31015
|
}
|
|
31008
31016
|
]
|
|
31009
31017
|
},
|
|
@@ -31030,7 +31038,7 @@
|
|
|
31030
31038
|
}
|
|
31031
31039
|
],
|
|
31032
31040
|
"returnType": "void",
|
|
31033
|
-
"line":
|
|
31041
|
+
"line": 128,
|
|
31034
31042
|
"rawdescription": "\n\nThe list items belonging to the `DropdownList`.\n",
|
|
31035
31043
|
"description": "<p>The list items belonging to the <code>DropdownList</code>.</p>\n",
|
|
31036
31044
|
"jsdoctags": [
|
|
@@ -31049,7 +31057,7 @@
|
|
|
31049
31057
|
"name": "items",
|
|
31050
31058
|
"type": "",
|
|
31051
31059
|
"returnType": "Array | Observable",
|
|
31052
|
-
"line":
|
|
31060
|
+
"line": 147
|
|
31053
31061
|
}
|
|
31054
31062
|
}
|
|
31055
31063
|
}
|
|
@@ -74422,7 +74430,7 @@
|
|
|
74422
74430
|
"name": "Basic",
|
|
74423
74431
|
"ctype": "miscellaneous",
|
|
74424
74432
|
"subtype": "variable",
|
|
74425
|
-
"file": "src/
|
|
74433
|
+
"file": "src/button/button-set.stories.ts",
|
|
74426
74434
|
"deprecated": false,
|
|
74427
74435
|
"deprecationMessage": "",
|
|
74428
74436
|
"type": "",
|
|
@@ -74432,7 +74440,7 @@
|
|
|
74432
74440
|
"name": "Basic",
|
|
74433
74441
|
"ctype": "miscellaneous",
|
|
74434
74442
|
"subtype": "variable",
|
|
74435
|
-
"file": "src/button/button
|
|
74443
|
+
"file": "src/button/button.stories.ts",
|
|
74436
74444
|
"deprecated": false,
|
|
74437
74445
|
"deprecationMessage": "",
|
|
74438
74446
|
"type": "",
|
|
@@ -74442,7 +74450,7 @@
|
|
|
74442
74450
|
"name": "Basic",
|
|
74443
74451
|
"ctype": "miscellaneous",
|
|
74444
74452
|
"subtype": "variable",
|
|
74445
|
-
"file": "src/button/button.stories.ts",
|
|
74453
|
+
"file": "src/button/icon-button.stories.ts",
|
|
74446
74454
|
"deprecated": false,
|
|
74447
74455
|
"deprecationMessage": "",
|
|
74448
74456
|
"type": "",
|
|
@@ -74452,7 +74460,7 @@
|
|
|
74452
74460
|
"name": "Basic",
|
|
74453
74461
|
"ctype": "miscellaneous",
|
|
74454
74462
|
"subtype": "variable",
|
|
74455
|
-
"file": "src/
|
|
74463
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
74456
74464
|
"deprecated": false,
|
|
74457
74465
|
"deprecationMessage": "",
|
|
74458
74466
|
"type": "",
|
|
@@ -77245,41 +77253,41 @@
|
|
|
77245
77253
|
"name": "Template",
|
|
77246
77254
|
"ctype": "miscellaneous",
|
|
77247
77255
|
"subtype": "variable",
|
|
77248
|
-
"file": "src/
|
|
77256
|
+
"file": "src/button/button-set.stories.ts",
|
|
77249
77257
|
"deprecated": false,
|
|
77250
77258
|
"deprecationMessage": "",
|
|
77251
77259
|
"type": "",
|
|
77252
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-
|
|
77260
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-button-set>\n\t\t\t<button cdsButton=\"secondary\" [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t\t<button cdsButton [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t</cds-button-set>\n\t`\n})"
|
|
77253
77261
|
},
|
|
77254
77262
|
{
|
|
77255
77263
|
"name": "Template",
|
|
77256
77264
|
"ctype": "miscellaneous",
|
|
77257
77265
|
"subtype": "variable",
|
|
77258
|
-
"file": "src/button/button
|
|
77266
|
+
"file": "src/button/button.stories.ts",
|
|
77259
77267
|
"deprecated": false,
|
|
77260
77268
|
"deprecationMessage": "",
|
|
77261
77269
|
"type": "",
|
|
77262
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<
|
|
77270
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tButton\n\t\t</button>\n\t`\n})"
|
|
77263
77271
|
},
|
|
77264
77272
|
{
|
|
77265
77273
|
"name": "Template",
|
|
77266
77274
|
"ctype": "miscellaneous",
|
|
77267
77275
|
"subtype": "variable",
|
|
77268
|
-
"file": "src/button/button.stories.ts",
|
|
77276
|
+
"file": "src/button/icon-button.stories.ts",
|
|
77269
77277
|
"deprecated": false,
|
|
77270
77278
|
"deprecationMessage": "",
|
|
77271
77279
|
"type": "",
|
|
77272
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[
|
|
77280
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-icon-button\n\t\t\tbuttonId=\"icon-btn1\"\n\t\t\ttype=\"button\"\n\t\t\t[kind]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[align]=\"align\"\n\t\t\t[buttonNgClass]=\"buttonNgClass\"\n\t\t\t[buttonAttributes]=\"buttonAttributes\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[showTooltipWhenDisabled]=\"showTooltipWhenDisabled\"\n\t\t\tdescription=\"Icon Description\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"copy\" size=\"16\"></svg>\n\t\t</cds-icon-button>\n\t`\n})"
|
|
77273
77281
|
},
|
|
77274
77282
|
{
|
|
77275
77283
|
"name": "Template",
|
|
77276
77284
|
"ctype": "miscellaneous",
|
|
77277
77285
|
"subtype": "variable",
|
|
77278
|
-
"file": "src/
|
|
77286
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
77279
77287
|
"deprecated": false,
|
|
77280
77288
|
"deprecationMessage": "",
|
|
77281
77289
|
"type": "",
|
|
77282
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-
|
|
77290
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
|
|
77283
77291
|
},
|
|
77284
77292
|
{
|
|
77285
77293
|
"name": "Template",
|
|
@@ -81055,199 +81063,199 @@
|
|
|
81055
81063
|
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"width: 500px\">\n\t\t\t<cds-accordion>\n\t\t\t\t<cds-accordion-item [title]=\"title\" (selected)=\"selected($event)\">\n\t\t\t\t\tLorem ipsum dolor sit amet, \\\n\t\t\t\t\tconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore \\\n\t\t\t\t\tet dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation \\\n\t\t\t\t\tullamco laboris nisi ut aliquip ex ea commodo consequat.\n\t\t\t\t</cds-accordion-item>\n\t\t\t\t<cds-accordion-item [title]=\"titleWithContext\" [context]=\"{ index: 2 }\" (selected)=\"selected($event)\">\n\t\t\t\t\tLorem ipsum dolor sit amet, \\\n\t\t\t\t\tconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore \\\n\t\t\t\t\tet dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation \\\n\t\t\t\t\tullamco laboris nisi ut aliquip ex ea commodo consequat.\n\t\t\t\t</cds-accordion-item>\n\t\t\t</cds-accordion>\n\t\t</div>\n\t\t<ng-template #title>\n\t\t\t<p class=\"cds--accordion__title\">Section 1 title</p>\n\t\t</ng-template>\n\t\t<ng-template #titleWithContext let-index=\"index\">\n\t\t\t<p class=\"cds--accordion__title\">Section {{ index }} title</p>\n\t\t</ng-template>\n\t`\n})"
|
|
81056
81064
|
}
|
|
81057
81065
|
],
|
|
81058
|
-
"src/
|
|
81066
|
+
"src/button/button-set.stories.ts": [
|
|
81059
81067
|
{
|
|
81060
81068
|
"name": "Basic",
|
|
81061
81069
|
"ctype": "miscellaneous",
|
|
81062
81070
|
"subtype": "variable",
|
|
81063
|
-
"file": "src/
|
|
81071
|
+
"file": "src/button/button-set.stories.ts",
|
|
81064
81072
|
"deprecated": false,
|
|
81065
81073
|
"deprecationMessage": "",
|
|
81066
81074
|
"type": "",
|
|
81067
81075
|
"defaultValue": "Template.bind({})"
|
|
81068
81076
|
},
|
|
81069
81077
|
{
|
|
81070
|
-
"name": "
|
|
81078
|
+
"name": "Template",
|
|
81071
81079
|
"ctype": "miscellaneous",
|
|
81072
81080
|
"subtype": "variable",
|
|
81073
|
-
"file": "src/
|
|
81081
|
+
"file": "src/button/button-set.stories.ts",
|
|
81074
81082
|
"deprecated": false,
|
|
81075
81083
|
"deprecationMessage": "",
|
|
81076
|
-
"type": ""
|
|
81077
|
-
|
|
81084
|
+
"type": "",
|
|
81085
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-button-set>\n\t\t\t<button cdsButton=\"secondary\" [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t\t<button cdsButton [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t</cds-button-set>\n\t`\n})"
|
|
81086
|
+
}
|
|
81087
|
+
],
|
|
81088
|
+
"src/button/button.stories.ts": [
|
|
81078
81089
|
{
|
|
81079
|
-
"name": "
|
|
81090
|
+
"name": "Basic",
|
|
81080
81091
|
"ctype": "miscellaneous",
|
|
81081
81092
|
"subtype": "variable",
|
|
81082
|
-
"file": "src/
|
|
81093
|
+
"file": "src/button/button.stories.ts",
|
|
81083
81094
|
"deprecated": false,
|
|
81084
81095
|
"deprecationMessage": "",
|
|
81085
81096
|
"type": "",
|
|
81086
|
-
"defaultValue": "
|
|
81097
|
+
"defaultValue": "Template.bind({})"
|
|
81087
81098
|
},
|
|
81088
81099
|
{
|
|
81089
|
-
"name": "
|
|
81100
|
+
"name": "Template",
|
|
81090
81101
|
"ctype": "miscellaneous",
|
|
81091
81102
|
"subtype": "variable",
|
|
81092
|
-
"file": "src/
|
|
81103
|
+
"file": "src/button/button.stories.ts",
|
|
81093
81104
|
"deprecated": false,
|
|
81094
81105
|
"deprecationMessage": "",
|
|
81095
81106
|
"type": "",
|
|
81096
|
-
"defaultValue": "
|
|
81107
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tButton\n\t\t</button>\n\t`\n})"
|
|
81097
81108
|
},
|
|
81098
81109
|
{
|
|
81099
|
-
"name": "
|
|
81110
|
+
"name": "WithIcon",
|
|
81100
81111
|
"ctype": "miscellaneous",
|
|
81101
81112
|
"subtype": "variable",
|
|
81102
|
-
"file": "src/
|
|
81113
|
+
"file": "src/button/button.stories.ts",
|
|
81103
81114
|
"deprecated": false,
|
|
81104
81115
|
"deprecationMessage": "",
|
|
81105
81116
|
"type": "",
|
|
81106
|
-
"defaultValue": "(
|
|
81117
|
+
"defaultValue": "WithIconTemplate.bind({})"
|
|
81107
81118
|
},
|
|
81108
81119
|
{
|
|
81109
|
-
"name": "
|
|
81120
|
+
"name": "WithIconTemplate",
|
|
81110
81121
|
"ctype": "miscellaneous",
|
|
81111
81122
|
"subtype": "variable",
|
|
81112
|
-
"file": "src/
|
|
81123
|
+
"file": "src/button/button.stories.ts",
|
|
81113
81124
|
"deprecated": false,
|
|
81114
81125
|
"deprecationMessage": "",
|
|
81115
81126
|
"type": "",
|
|
81116
|
-
"defaultValue": "
|
|
81117
|
-
}
|
|
81127
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseleave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tWith icon\n\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n\t\t</button>\n\t`\n})"
|
|
81128
|
+
}
|
|
81129
|
+
],
|
|
81130
|
+
"src/breadcrumb/breadcrumb.stories.ts": [
|
|
81118
81131
|
{
|
|
81119
|
-
"name": "
|
|
81132
|
+
"name": "Basic",
|
|
81120
81133
|
"ctype": "miscellaneous",
|
|
81121
81134
|
"subtype": "variable",
|
|
81122
81135
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81123
81136
|
"deprecated": false,
|
|
81124
81137
|
"deprecationMessage": "",
|
|
81125
81138
|
"type": "",
|
|
81126
|
-
"defaultValue": "(
|
|
81139
|
+
"defaultValue": "Template.bind({})"
|
|
81127
81140
|
},
|
|
81128
81141
|
{
|
|
81129
|
-
"name": "
|
|
81142
|
+
"name": "breadcrumbItems",
|
|
81130
81143
|
"ctype": "miscellaneous",
|
|
81131
81144
|
"subtype": "variable",
|
|
81132
81145
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81133
81146
|
"deprecated": false,
|
|
81134
81147
|
"deprecationMessage": "",
|
|
81135
|
-
"type": ""
|
|
81136
|
-
"defaultValue": "ModelWTemplate.bind({})"
|
|
81148
|
+
"type": ""
|
|
81137
81149
|
},
|
|
81138
81150
|
{
|
|
81139
|
-
"name": "
|
|
81151
|
+
"name": "createBreadcrumbItems",
|
|
81140
81152
|
"ctype": "miscellaneous",
|
|
81141
81153
|
"subtype": "variable",
|
|
81142
81154
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81143
81155
|
"deprecated": false,
|
|
81144
81156
|
"deprecationMessage": "",
|
|
81145
81157
|
"type": "",
|
|
81146
|
-
"defaultValue": "(
|
|
81158
|
+
"defaultValue": "(count: number, content = \"Breadcrumb\"): Array<BreadcrumbItem> => {\n\tif (breadcrumbItems && count === breadcrumbItems.length) {\n\t\treturn breadcrumbItems;\n\t}\n\tbreadcrumbItems = Array(count).fill(0).map((x, i) => ({\n\t\tcontent: `${content} ${i + 1}`,\n\t\thref: \"#\" + (i + 1)\n\t}));\n\treturn breadcrumbItems;\n}"
|
|
81147
81159
|
},
|
|
81148
81160
|
{
|
|
81149
|
-
"name": "
|
|
81161
|
+
"name": "CurrentPage",
|
|
81150
81162
|
"ctype": "miscellaneous",
|
|
81151
81163
|
"subtype": "variable",
|
|
81152
81164
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81153
81165
|
"deprecated": false,
|
|
81154
81166
|
"deprecationMessage": "",
|
|
81155
81167
|
"type": "",
|
|
81156
|
-
"defaultValue": "
|
|
81168
|
+
"defaultValue": "CurrentPageTemplate.bind({})"
|
|
81157
81169
|
},
|
|
81158
81170
|
{
|
|
81159
|
-
"name": "
|
|
81171
|
+
"name": "CurrentPageTemplate",
|
|
81160
81172
|
"ctype": "miscellaneous",
|
|
81161
81173
|
"subtype": "variable",
|
|
81162
81174
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81163
81175
|
"deprecated": false,
|
|
81164
81176
|
"deprecationMessage": "",
|
|
81165
81177
|
"type": "",
|
|
81166
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb
|
|
81178
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb>\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item current=\"true\" href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
|
|
81167
81179
|
},
|
|
81168
81180
|
{
|
|
81169
|
-
"name": "
|
|
81181
|
+
"name": "Model",
|
|
81170
81182
|
"ctype": "miscellaneous",
|
|
81171
81183
|
"subtype": "variable",
|
|
81172
81184
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81173
81185
|
"deprecated": false,
|
|
81174
81186
|
"deprecationMessage": "",
|
|
81175
81187
|
"type": "",
|
|
81176
|
-
"defaultValue": "(
|
|
81188
|
+
"defaultValue": "ModelTemplate.bind({})"
|
|
81177
81189
|
},
|
|
81178
81190
|
{
|
|
81179
|
-
"name": "
|
|
81191
|
+
"name": "ModelTemplate",
|
|
81180
81192
|
"ctype": "miscellaneous",
|
|
81181
81193
|
"subtype": "variable",
|
|
81182
81194
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81183
81195
|
"deprecated": false,
|
|
81184
81196
|
"deprecationMessage": "",
|
|
81185
81197
|
"type": "",
|
|
81186
|
-
"defaultValue": "(
|
|
81187
|
-
}
|
|
81188
|
-
],
|
|
81189
|
-
"src/button/button-set.stories.ts": [
|
|
81198
|
+
"defaultValue": "(args) => ({\n\tprops: {\n\t\t...args,\n\t\tcreateBreadcrumbItems\n\t},\n\ttemplate: `\n\t\t<cds-breadcrumb\n\t\t\t[noTrailingSlash]=\"noTrailingSlash\"\n\t\t\t[threshold]=\"threshold\"\n\t\t\t[items]=\"createBreadcrumbItems(itemCount, content)\">\n\t\t</cds-breadcrumb>\n\t`\n})"
|
|
81199
|
+
},
|
|
81190
81200
|
{
|
|
81191
|
-
"name": "
|
|
81201
|
+
"name": "ModelWithTemplate",
|
|
81192
81202
|
"ctype": "miscellaneous",
|
|
81193
81203
|
"subtype": "variable",
|
|
81194
|
-
"file": "src/
|
|
81204
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81195
81205
|
"deprecated": false,
|
|
81196
81206
|
"deprecationMessage": "",
|
|
81197
81207
|
"type": "",
|
|
81198
|
-
"defaultValue": "
|
|
81208
|
+
"defaultValue": "ModelWTemplate.bind({})"
|
|
81199
81209
|
},
|
|
81200
81210
|
{
|
|
81201
|
-
"name": "
|
|
81211
|
+
"name": "ModelWTemplate",
|
|
81202
81212
|
"ctype": "miscellaneous",
|
|
81203
81213
|
"subtype": "variable",
|
|
81204
|
-
"file": "src/
|
|
81214
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81205
81215
|
"deprecated": false,
|
|
81206
81216
|
"deprecationMessage": "",
|
|
81207
81217
|
"type": "",
|
|
81208
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<
|
|
81209
|
-
}
|
|
81210
|
-
],
|
|
81211
|
-
"src/button/button.stories.ts": [
|
|
81218
|
+
"defaultValue": "(args) => ({\n\tprops: {\n\t\t...args,\n\t\tcreateBreadcrumbItems,\n\t\twithTemplate\n\t},\n\ttemplate: `\n\t\t<ng-template #breadcrumbTemplate let-item>\n\t\t\t{{ templateContent }}{{ item.content }}\n\t\t</ng-template>\n\t\t<cds-breadcrumb\n\t\t\t[noTrailingSlash]=\"noTrailingSlash\"\n\t\t\t[threshold]=\"threshold\"\n\t\t\t[items]=\"withTemplate(breadcrumbTemplate, createBreadcrumbItems(itemCount, content))\">\n\t\t</cds-breadcrumb>\n\t`\n})"
|
|
81219
|
+
},
|
|
81212
81220
|
{
|
|
81213
|
-
"name": "
|
|
81221
|
+
"name": "Skeleton",
|
|
81214
81222
|
"ctype": "miscellaneous",
|
|
81215
81223
|
"subtype": "variable",
|
|
81216
|
-
"file": "src/
|
|
81224
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81217
81225
|
"deprecated": false,
|
|
81218
81226
|
"deprecationMessage": "",
|
|
81219
81227
|
"type": "",
|
|
81220
|
-
"defaultValue": "
|
|
81228
|
+
"defaultValue": "WithSkeleton.bind({})"
|
|
81221
81229
|
},
|
|
81222
81230
|
{
|
|
81223
81231
|
"name": "Template",
|
|
81224
81232
|
"ctype": "miscellaneous",
|
|
81225
81233
|
"subtype": "variable",
|
|
81226
|
-
"file": "src/
|
|
81234
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81227
81235
|
"deprecated": false,
|
|
81228
81236
|
"deprecationMessage": "",
|
|
81229
81237
|
"type": "",
|
|
81230
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<
|
|
81238
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
|
|
81231
81239
|
},
|
|
81232
81240
|
{
|
|
81233
|
-
"name": "
|
|
81241
|
+
"name": "WithSkeleton",
|
|
81234
81242
|
"ctype": "miscellaneous",
|
|
81235
81243
|
"subtype": "variable",
|
|
81236
|
-
"file": "src/
|
|
81244
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81237
81245
|
"deprecated": false,
|
|
81238
81246
|
"deprecationMessage": "",
|
|
81239
81247
|
"type": "",
|
|
81240
|
-
"defaultValue": "
|
|
81248
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb skeleton=\"true\" [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
|
|
81241
81249
|
},
|
|
81242
81250
|
{
|
|
81243
|
-
"name": "
|
|
81251
|
+
"name": "withTemplate",
|
|
81244
81252
|
"ctype": "miscellaneous",
|
|
81245
81253
|
"subtype": "variable",
|
|
81246
|
-
"file": "src/
|
|
81254
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81247
81255
|
"deprecated": false,
|
|
81248
81256
|
"deprecationMessage": "",
|
|
81249
81257
|
"type": "",
|
|
81250
|
-
"defaultValue": "(
|
|
81258
|
+
"defaultValue": "(templateRef, items) => items.map(item => Object.assign(item, { template: templateRef }))"
|
|
81251
81259
|
}
|
|
81252
81260
|
],
|
|
81253
81261
|
"src/checkbox/checkbox.stories.ts": [
|