carbon-components-angular 5.58.1 → 5.59.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dialog/overflow-menu/overflow-menu.component.d.ts +1 -1
- package/docs/documentation/components/DropdownList.html +84 -82
- package/docs/documentation/components/OverflowMenu.html +2 -2
- package/docs/documentation/js/search/search_index.js +2 -2
- package/docs/documentation/modules/ThemeModule/dependencies.svg +13 -13
- package/docs/documentation/modules/ThemeModule.html +13 -13
- package/docs/documentation/modules/TilesModule/dependencies.svg +106 -106
- package/docs/documentation/modules/TilesModule.html +106 -106
- package/docs/documentation/modules/TimePickerModule/dependencies.svg +17 -17
- package/docs/documentation/modules/TimePickerModule.html +17 -17
- package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +30 -30
- package/docs/documentation/modules/TimePickerSelectModule.html +30 -30
- package/docs/documentation/modules/ToggleModule/dependencies.svg +38 -42
- package/docs/documentation/modules/ToggleModule.html +38 -42
- package/docs/documentation/modules/TooltipModule/dependencies.svg +4 -4
- package/docs/documentation/modules/TooltipModule.html +4 -4
- package/docs/documentation/modules/TreeviewModule/dependencies.svg +31 -31
- package/docs/documentation/modules/TreeviewModule.html +31 -31
- package/docs/documentation.json +118 -118
- package/docs/storybook/{3224.5a4b3111.iframe.bundle.js → 3224.ee9adbba.iframe.bundle.js} +1 -1
- package/docs/storybook/iframe.html +2 -2
- package/docs/storybook/{main.bb78eaa7.iframe.bundle.js → main.4d0fdfae.iframe.bundle.js} +1 -1
- package/docs/storybook/project.json +1 -1
- package/docs/storybook/{runtime~main.d514f8b8.iframe.bundle.js → runtime~main.c31464c5.iframe.bundle.js} +1 -1
- package/esm2020/dialog/overflow-menu/overflow-menu.component.mjs +1 -1
- package/esm2020/dropdown/list/dropdown-list.component.mjs +5 -3
- package/fesm2015/carbon-components-angular-dialog.mjs.map +1 -1
- package/fesm2015/carbon-components-angular-dropdown.mjs +4 -2
- package/fesm2015/carbon-components-angular-dropdown.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-dialog.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-dropdown.mjs +4 -2
- package/fesm2020/carbon-components-angular-dropdown.mjs.map +1 -1
- package/package.json +1 -1
package/docs/documentation.json
CHANGED
|
@@ -30462,7 +30462,7 @@
|
|
|
30462
30462
|
},
|
|
30463
30463
|
{
|
|
30464
30464
|
"name": "DropdownList",
|
|
30465
|
-
"id": "component-DropdownList-
|
|
30465
|
+
"id": "component-DropdownList-2962a296e4b76167cde4c2e261085e0728345b5a38b21703280b336d812f03e0af28abd7428b954103fbf3988dba72cd0b6a658eeb927759801fb662d167d727",
|
|
30466
30466
|
"file": "src/dropdown/list/dropdown-list.component.ts",
|
|
30467
30467
|
"encapsulation": [],
|
|
30468
30468
|
"entryComponents": [],
|
|
@@ -30476,7 +30476,7 @@
|
|
|
30476
30476
|
"selector": "cds-dropdown-list, ibm-dropdown-list",
|
|
30477
30477
|
"styleUrls": [],
|
|
30478
30478
|
"styles": [],
|
|
30479
|
-
"template": "<ul\n\t#list\n\t[id]=\"listId\"\n\trole=\"listbox\"\n\tclass=\"cds--list-box__menu cds--multi-select\"\n\t(scroll)=\"emitScroll($event)\"\n\t(keydown)=\"navigateList($event)\"\n\ttabindex=\"
|
|
30479
|
+
"template": "<ul\n\t#list\n\t[id]=\"listId\"\n\trole=\"listbox\"\n\tclass=\"cds--list-box__menu cds--multi-select\"\n\t(scroll)=\"emitScroll($event)\"\n\t(keydown)=\"navigateList($event)\"\n\ttabindex=\"0\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t[attr.aria-activedescendant]=\"highlightedItem\">\n\t<li\n\t\trole=\"option\"\n\t\t*ngFor=\"let item of displayItems; let i = index\"\n\t\t(click)=\"doClick($event, item)\"\n\t\tclass=\"cds--list-box__menu-item\"\n\t\t[attr.aria-selected]=\"item.selected\"\n\t\t[id]=\"getItemId(i)\"\n\t\t[attr.tabindex]=\"highlightedItem === getItemId(i) ? 0 : null\"\n\t\t[attr.title]=\" showTitles ? item.content : null\"\n\t\t[attr.disabled]=\"item.disabled ? true : null\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--list-box__menu-item--active': item.selected,\n\t\t\t'cds--list-box__menu-item--highlighted': highlightedItem === getItemId(i)\n\t\t}\">\n\t\t<div\n\t\t\t#listItem\n\t\t\ttabindex=\"-1\"\n\t\t\tclass=\"cds--list-box__menu-item__option\">\n\t\t\t<div\n\t\t\t\t*ngIf=\"!listTpl && type === 'multi'\"\n\t\t\t\tclass=\"cds--form-item cds--checkbox-wrapper\">\n\t\t\t\t<label\n\t\t\t\t\t[attr.data-contained-checkbox-state]=\"item.selected\"\n\t\t\t\t\tclass=\"cds--checkbox-label\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass=\"cds--checkbox\"\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t[checked]=\"item.selected\"\n\t\t\t\t\t\t[disabled]=\"item.disabled\"\n\t\t\t\t\t\ttabindex=\"-1\">\n\t\t\t\t\t<span class=\"cds--checkbox-appearance\"></span>\n\t\t\t\t\t<span class=\"cds--checkbox-label-text\">{{item.content}}</span>\n\t\t\t\t</label>\n\t\t\t</div>\n\t\t\t<ng-container *ngIf=\"!listTpl && type === 'single'\">{{item.content}}</ng-container>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!listTpl && type === 'single'\"\n\t\t\t\tcdsIcon=\"checkmark\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--list-box__menu-item__selected-icon\">\n\t\t\t</svg>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"listTpl\"\n\t\t\t\t[ngTemplateOutletContext]=\"{item: item}\"\n\t\t\t\t[ngTemplateOutlet]=\"listTpl\">\n\t\t\t</ng-template>\n\t\t</div>\n\t</li>\n</ul>",
|
|
30480
30480
|
"templateUrl": [],
|
|
30481
30481
|
"viewProviders": [],
|
|
30482
30482
|
"hostDirectives": [],
|
|
@@ -30486,7 +30486,7 @@
|
|
|
30486
30486
|
"defaultValue": "this.i18n.get().DROPDOWN_LIST.LABEL",
|
|
30487
30487
|
"deprecated": false,
|
|
30488
30488
|
"deprecationMessage": "",
|
|
30489
|
-
"line":
|
|
30489
|
+
"line": 121,
|
|
30490
30490
|
"type": "any",
|
|
30491
30491
|
"decorators": []
|
|
30492
30492
|
},
|
|
@@ -30496,7 +30496,7 @@
|
|
|
30496
30496
|
"deprecationMessage": "",
|
|
30497
30497
|
"rawdescription": "\n\nThe list items belonging to the `DropdownList`.\n",
|
|
30498
30498
|
"description": "<p>The list items belonging to the <code>DropdownList</code>.</p>\n",
|
|
30499
|
-
"line":
|
|
30499
|
+
"line": 125,
|
|
30500
30500
|
"type": "Array | Observable",
|
|
30501
30501
|
"decorators": []
|
|
30502
30502
|
},
|
|
@@ -30507,7 +30507,7 @@
|
|
|
30507
30507
|
"deprecationMessage": "",
|
|
30508
30508
|
"rawdescription": "\n\nTemplate to bind to items in the `DropdownList` (optional).\n",
|
|
30509
30509
|
"description": "<p>Template to bind to items in the <code>DropdownList</code> (optional).</p>\n",
|
|
30510
|
-
"line":
|
|
30510
|
+
"line": 150,
|
|
30511
30511
|
"type": "string | TemplateRef<any>",
|
|
30512
30512
|
"decorators": []
|
|
30513
30513
|
},
|
|
@@ -30518,7 +30518,7 @@
|
|
|
30518
30518
|
"deprecationMessage": "",
|
|
30519
30519
|
"rawdescription": "\n\nDefines whether to show title attribute or not\n",
|
|
30520
30520
|
"description": "<p>Defines whether to show title attribute or not</p>\n",
|
|
30521
|
-
"line":
|
|
30521
|
+
"line": 182,
|
|
30522
30522
|
"type": "boolean",
|
|
30523
30523
|
"decorators": []
|
|
30524
30524
|
},
|
|
@@ -30529,7 +30529,7 @@
|
|
|
30529
30529
|
"deprecationMessage": "",
|
|
30530
30530
|
"rawdescription": "\n\nDefines whether or not the `DropdownList` supports selecting multiple items as opposed to single\nitem selection.\n",
|
|
30531
30531
|
"description": "<p>Defines whether or not the <code>DropdownList</code> supports selecting multiple items as opposed to single\nitem selection.</p>\n",
|
|
30532
|
-
"line":
|
|
30532
|
+
"line": 177,
|
|
30533
30533
|
"type": "\"single\" | \"multi\"",
|
|
30534
30534
|
"decorators": []
|
|
30535
30535
|
}
|
|
@@ -30542,7 +30542,7 @@
|
|
|
30542
30542
|
"deprecationMessage": "",
|
|
30543
30543
|
"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",
|
|
30544
30544
|
"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",
|
|
30545
|
-
"line":
|
|
30545
|
+
"line": 168,
|
|
30546
30546
|
"type": "EventEmitter"
|
|
30547
30547
|
},
|
|
30548
30548
|
{
|
|
@@ -30552,7 +30552,7 @@
|
|
|
30552
30552
|
"deprecationMessage": "",
|
|
30553
30553
|
"rawdescription": "\n\nEvent to emit scroll event of a list within the `DropdownList`.\n",
|
|
30554
30554
|
"description": "<p>Event to emit scroll event of a list within the <code>DropdownList</code>.</p>\n",
|
|
30555
|
-
"line":
|
|
30555
|
+
"line": 158,
|
|
30556
30556
|
"type": "EventEmitter<ScrollCustomEvent>"
|
|
30557
30557
|
},
|
|
30558
30558
|
{
|
|
@@ -30562,7 +30562,7 @@
|
|
|
30562
30562
|
"deprecationMessage": "",
|
|
30563
30563
|
"rawdescription": "\n\nEvent to emit selection of a list item within the `DropdownList`.\n",
|
|
30564
30564
|
"description": "<p>Event to emit selection of a list item within the <code>DropdownList</code>.</p>\n",
|
|
30565
|
-
"line":
|
|
30565
|
+
"line": 154,
|
|
30566
30566
|
"type": "EventEmitter<literal type | []>"
|
|
30567
30567
|
}
|
|
30568
30568
|
],
|
|
@@ -30575,7 +30575,7 @@
|
|
|
30575
30575
|
"type": "Array<ListItem>",
|
|
30576
30576
|
"optional": false,
|
|
30577
30577
|
"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",
|
|
30578
|
-
"line":
|
|
30578
|
+
"line": 195,
|
|
30579
30579
|
"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",
|
|
30580
30580
|
"modifierKind": [
|
|
30581
30581
|
125
|
|
@@ -30588,7 +30588,7 @@
|
|
|
30588
30588
|
"type": "ElementRef",
|
|
30589
30589
|
"optional": false,
|
|
30590
30590
|
"description": "",
|
|
30591
|
-
"line":
|
|
30591
|
+
"line": 228,
|
|
30592
30592
|
"modifierKind": [
|
|
30593
30593
|
125
|
|
30594
30594
|
]
|
|
@@ -30601,7 +30601,7 @@
|
|
|
30601
30601
|
"type": "null",
|
|
30602
30602
|
"optional": false,
|
|
30603
30603
|
"description": "",
|
|
30604
|
-
"line":
|
|
30604
|
+
"line": 189,
|
|
30605
30605
|
"modifierKind": [
|
|
30606
30606
|
125
|
|
30607
30607
|
]
|
|
@@ -30613,7 +30613,7 @@
|
|
|
30613
30613
|
"type": "ElementRef",
|
|
30614
30614
|
"optional": false,
|
|
30615
30615
|
"description": "<p>Maintains a reference to the view DOM element for the unordered list of items within the <code>DropdownList</code>.</p>\n",
|
|
30616
|
-
"line":
|
|
30616
|
+
"line": 172,
|
|
30617
30617
|
"rawdescription": "\n\nMaintains a reference to the view DOM element for the unordered list of items within the `DropdownList`.\n",
|
|
30618
30618
|
"decorators": [
|
|
30619
30619
|
{
|
|
@@ -30633,7 +30633,7 @@
|
|
|
30633
30633
|
"type": "number",
|
|
30634
30634
|
"optional": false,
|
|
30635
30635
|
"description": "",
|
|
30636
|
-
"line":
|
|
30636
|
+
"line": 120,
|
|
30637
30637
|
"modifierKind": [
|
|
30638
30638
|
126
|
|
30639
30639
|
]
|
|
@@ -30646,7 +30646,7 @@
|
|
|
30646
30646
|
"type": "",
|
|
30647
30647
|
"optional": false,
|
|
30648
30648
|
"description": "",
|
|
30649
|
-
"line":
|
|
30649
|
+
"line": 188,
|
|
30650
30650
|
"modifierKind": [
|
|
30651
30651
|
125
|
|
30652
30652
|
]
|
|
@@ -30659,7 +30659,7 @@
|
|
|
30659
30659
|
"type": "\"sm\" | \"md\" | \"lg\"",
|
|
30660
30660
|
"optional": false,
|
|
30661
30661
|
"description": "<p>Defines the rendering size of the <code>DropdownList</code> input component.</p>\n",
|
|
30662
|
-
"line":
|
|
30662
|
+
"line": 187,
|
|
30663
30663
|
"rawdescription": "\n\nDefines the rendering size of the `DropdownList` input component.\n",
|
|
30664
30664
|
"modifierKind": [
|
|
30665
30665
|
125
|
|
@@ -30686,7 +30686,7 @@
|
|
|
30686
30686
|
"optional": false,
|
|
30687
30687
|
"returnType": "void",
|
|
30688
30688
|
"typeParameters": [],
|
|
30689
|
-
"line":
|
|
30689
|
+
"line": 552,
|
|
30690
30690
|
"deprecated": false,
|
|
30691
30691
|
"deprecationMessage": "",
|
|
30692
30692
|
"rawdescription": "\n\nEmits the selected item or items after a mouse click event has occurred.\n",
|
|
@@ -30726,7 +30726,7 @@
|
|
|
30726
30726
|
"optional": false,
|
|
30727
30727
|
"returnType": "void",
|
|
30728
30728
|
"typeParameters": [],
|
|
30729
|
-
"line":
|
|
30729
|
+
"line": 254,
|
|
30730
30730
|
"deprecated": false,
|
|
30731
30731
|
"deprecationMessage": "",
|
|
30732
30732
|
"jsdoctags": [
|
|
@@ -30755,7 +30755,7 @@
|
|
|
30755
30755
|
"optional": false,
|
|
30756
30756
|
"returnType": "void",
|
|
30757
30757
|
"typeParameters": [],
|
|
30758
|
-
"line":
|
|
30758
|
+
"line": 587,
|
|
30759
30759
|
"deprecated": false,
|
|
30760
30760
|
"deprecationMessage": "",
|
|
30761
30761
|
"rawdescription": "\n\nEmits the scroll event of the options list\n",
|
|
@@ -30786,7 +30786,7 @@
|
|
|
30786
30786
|
"optional": false,
|
|
30787
30787
|
"returnType": "void",
|
|
30788
30788
|
"typeParameters": [],
|
|
30789
|
-
"line":
|
|
30789
|
+
"line": 284,
|
|
30790
30790
|
"deprecated": false,
|
|
30791
30791
|
"deprecationMessage": "",
|
|
30792
30792
|
"rawdescription": "\n\nFilters the items being displayed in the DOM list.\n",
|
|
@@ -30810,7 +30810,7 @@
|
|
|
30810
30810
|
"optional": false,
|
|
30811
30811
|
"returnType": "HTMLElement",
|
|
30812
30812
|
"typeParameters": [],
|
|
30813
|
-
"line":
|
|
30813
|
+
"line": 415,
|
|
30814
30814
|
"deprecated": false,
|
|
30815
30815
|
"deprecationMessage": "",
|
|
30816
30816
|
"rawdescription": "\n\nReturns the `HTMLElement` for the item that is selected within the `DropdownList`.\n",
|
|
@@ -30822,7 +30822,7 @@
|
|
|
30822
30822
|
"optional": false,
|
|
30823
30823
|
"returnType": "ListItem",
|
|
30824
30824
|
"typeParameters": [],
|
|
30825
|
-
"line":
|
|
30825
|
+
"line": 405,
|
|
30826
30826
|
"deprecated": false,
|
|
30827
30827
|
"deprecationMessage": "",
|
|
30828
30828
|
"rawdescription": "\n\nReturns the `ListItem` that is selected within `DropdownList`.\n",
|
|
@@ -30841,7 +30841,7 @@
|
|
|
30841
30841
|
"optional": false,
|
|
30842
30842
|
"returnType": "string",
|
|
30843
30843
|
"typeParameters": [],
|
|
30844
|
-
"line":
|
|
30844
|
+
"line": 266,
|
|
30845
30845
|
"deprecated": false,
|
|
30846
30846
|
"deprecationMessage": "",
|
|
30847
30847
|
"jsdoctags": [
|
|
@@ -30862,7 +30862,7 @@
|
|
|
30862
30862
|
"optional": false,
|
|
30863
30863
|
"returnType": "Array<ListItem>",
|
|
30864
30864
|
"typeParameters": [],
|
|
30865
|
-
"line":
|
|
30865
|
+
"line": 425,
|
|
30866
30866
|
"deprecated": false,
|
|
30867
30867
|
"deprecationMessage": "",
|
|
30868
30868
|
"rawdescription": "\n\nReturns the items as an Array\n",
|
|
@@ -30874,7 +30874,7 @@
|
|
|
30874
30874
|
"optional": false,
|
|
30875
30875
|
"returnType": "HTMLElement",
|
|
30876
30876
|
"typeParameters": [],
|
|
30877
|
-
"line":
|
|
30877
|
+
"line": 336,
|
|
30878
30878
|
"deprecated": false,
|
|
30879
30879
|
"deprecationMessage": "",
|
|
30880
30880
|
"rawdescription": "\n\nReturns the `HTMLElement` for the item that is subsequent to the selected item.\n",
|
|
@@ -30886,7 +30886,7 @@
|
|
|
30886
30886
|
"optional": false,
|
|
30887
30887
|
"returnType": "ListItem",
|
|
30888
30888
|
"typeParameters": [],
|
|
30889
|
-
"line":
|
|
30889
|
+
"line": 318,
|
|
30890
30890
|
"deprecated": false,
|
|
30891
30891
|
"deprecationMessage": "",
|
|
30892
30892
|
"rawdescription": "\n\nReturns the `ListItem` that is subsequent to the selected item in the `DropdownList`.\n",
|
|
@@ -30898,7 +30898,7 @@
|
|
|
30898
30898
|
"optional": false,
|
|
30899
30899
|
"returnType": "HTMLElement",
|
|
30900
30900
|
"typeParameters": [],
|
|
30901
|
-
"line":
|
|
30901
|
+
"line": 379,
|
|
30902
30902
|
"deprecated": false,
|
|
30903
30903
|
"deprecationMessage": "",
|
|
30904
30904
|
"rawdescription": "\n\nReturns the `HTMLElement` for the item that precedes the selected item.\n",
|
|
@@ -30910,7 +30910,7 @@
|
|
|
30910
30910
|
"optional": false,
|
|
30911
30911
|
"returnType": "ListItem",
|
|
30912
30912
|
"typeParameters": [],
|
|
30913
|
-
"line":
|
|
30913
|
+
"line": 362,
|
|
30914
30914
|
"deprecated": false,
|
|
30915
30915
|
"deprecationMessage": "",
|
|
30916
30916
|
"rawdescription": "\n\nReturns the `ListItem` that precedes the selected item within `DropdownList`.\n",
|
|
@@ -30922,7 +30922,7 @@
|
|
|
30922
30922
|
"optional": false,
|
|
30923
30923
|
"returnType": "ListItem[]",
|
|
30924
30924
|
"typeParameters": [],
|
|
30925
|
-
"line":
|
|
30925
|
+
"line": 432,
|
|
30926
30926
|
"deprecated": false,
|
|
30927
30927
|
"deprecationMessage": "",
|
|
30928
30928
|
"rawdescription": "\n\nReturns a list containing the selected item(s) in the `DropdownList`.\n",
|
|
@@ -30934,7 +30934,7 @@
|
|
|
30934
30934
|
"optional": false,
|
|
30935
30935
|
"returnType": "boolean",
|
|
30936
30936
|
"typeParameters": [],
|
|
30937
|
-
"line":
|
|
30937
|
+
"line": 328,
|
|
30938
30938
|
"deprecated": false,
|
|
30939
30939
|
"deprecationMessage": "",
|
|
30940
30940
|
"rawdescription": "\n\nReturns `true` if the selected item is not the last item in the `DropdownList`.\n",
|
|
@@ -30946,7 +30946,7 @@
|
|
|
30946
30946
|
"optional": false,
|
|
30947
30947
|
"returnType": "boolean",
|
|
30948
30948
|
"typeParameters": [],
|
|
30949
|
-
"line":
|
|
30949
|
+
"line": 372,
|
|
30950
30950
|
"deprecated": false,
|
|
30951
30951
|
"deprecationMessage": "",
|
|
30952
30952
|
"rawdescription": "\n\nReturns `true` if the selected item is not the first in the list.\n",
|
|
@@ -30958,7 +30958,7 @@
|
|
|
30958
30958
|
"optional": false,
|
|
30959
30959
|
"returnType": "void",
|
|
30960
30960
|
"typeParameters": [],
|
|
30961
|
-
"line":
|
|
30961
|
+
"line": 494,
|
|
30962
30962
|
"deprecated": false,
|
|
30963
30963
|
"deprecationMessage": "",
|
|
30964
30964
|
"rawdescription": "\n\nInitializes focus in the list, effectively a wrapper for `getCurrentElement().focus()`\n",
|
|
@@ -30977,7 +30977,7 @@
|
|
|
30977
30977
|
"optional": false,
|
|
30978
30978
|
"returnType": "void",
|
|
30979
30979
|
"typeParameters": [],
|
|
30980
|
-
"line":
|
|
30980
|
+
"line": 520,
|
|
30981
30981
|
"deprecated": false,
|
|
30982
30982
|
"deprecationMessage": "",
|
|
30983
30983
|
"rawdescription": "\n\nManages the keyboard accessibility for navigation and selection within a `DropdownList`.\n",
|
|
@@ -31007,7 +31007,7 @@
|
|
|
31007
31007
|
"optional": false,
|
|
31008
31008
|
"returnType": "void",
|
|
31009
31009
|
"typeParameters": [],
|
|
31010
|
-
"line":
|
|
31010
|
+
"line": 578,
|
|
31011
31011
|
"deprecated": false,
|
|
31012
31012
|
"deprecationMessage": "",
|
|
31013
31013
|
"jsdoctags": [
|
|
@@ -31035,7 +31035,7 @@
|
|
|
31035
31035
|
"optional": false,
|
|
31036
31036
|
"returnType": "void",
|
|
31037
31037
|
"typeParameters": [],
|
|
31038
|
-
"line":
|
|
31038
|
+
"line": 572,
|
|
31039
31039
|
"deprecated": false,
|
|
31040
31040
|
"deprecationMessage": "",
|
|
31041
31041
|
"jsdoctags": [
|
|
@@ -31064,7 +31064,7 @@
|
|
|
31064
31064
|
"optional": false,
|
|
31065
31065
|
"returnType": "void",
|
|
31066
31066
|
"typeParameters": [],
|
|
31067
|
-
"line":
|
|
31067
|
+
"line": 597,
|
|
31068
31068
|
"deprecated": false,
|
|
31069
31069
|
"deprecationMessage": "",
|
|
31070
31070
|
"rawdescription": "\n\nSubscribe the function passed to an internal observable that will resolve once the items are ready\n",
|
|
@@ -31095,7 +31095,7 @@
|
|
|
31095
31095
|
"optional": false,
|
|
31096
31096
|
"returnType": "void",
|
|
31097
31097
|
"typeParameters": [],
|
|
31098
|
-
"line":
|
|
31098
|
+
"line": 443,
|
|
31099
31099
|
"deprecated": false,
|
|
31100
31100
|
"deprecationMessage": "",
|
|
31101
31101
|
"rawdescription": "\n\nTransforms array input list of items to the correct state by updating the selected item(s).\n",
|
|
@@ -31126,7 +31126,7 @@
|
|
|
31126
31126
|
"optional": false,
|
|
31127
31127
|
"returnType": "void",
|
|
31128
31128
|
"typeParameters": [],
|
|
31129
|
-
"line":
|
|
31129
|
+
"line": 602,
|
|
31130
31130
|
"deprecated": false,
|
|
31131
31131
|
"deprecationMessage": "",
|
|
31132
31132
|
"jsdoctags": [
|
|
@@ -31148,7 +31148,7 @@
|
|
|
31148
31148
|
"optional": false,
|
|
31149
31149
|
"returnType": "void",
|
|
31150
31150
|
"typeParameters": [],
|
|
31151
|
-
"line":
|
|
31151
|
+
"line": 303,
|
|
31152
31152
|
"deprecated": false,
|
|
31153
31153
|
"deprecationMessage": "",
|
|
31154
31154
|
"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",
|
|
@@ -31160,7 +31160,7 @@
|
|
|
31160
31160
|
"optional": false,
|
|
31161
31161
|
"returnType": "void",
|
|
31162
31162
|
"typeParameters": [],
|
|
31163
|
-
"line":
|
|
31163
|
+
"line": 505,
|
|
31164
31164
|
"deprecated": false,
|
|
31165
31165
|
"deprecationMessage": ""
|
|
31166
31166
|
},
|
|
@@ -31177,7 +31177,7 @@
|
|
|
31177
31177
|
"optional": false,
|
|
31178
31178
|
"returnType": "void",
|
|
31179
31179
|
"typeParameters": [],
|
|
31180
|
-
"line":
|
|
31180
|
+
"line": 273,
|
|
31181
31181
|
"deprecated": false,
|
|
31182
31182
|
"deprecationMessage": "",
|
|
31183
31183
|
"rawdescription": "\n\nUpdates the displayed list of items and then retrieves the most current properties for the `DropdownList` from the DOM.\n",
|
|
@@ -31204,7 +31204,7 @@
|
|
|
31204
31204
|
"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>",
|
|
31205
31205
|
"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",
|
|
31206
31206
|
"type": "component",
|
|
31207
|
-
"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<li\n\t\t\t\trole=\"option\"\n\t\t\t\t*ngFor=\"let item of displayItems; let i = index\"\n\t\t\t\t(click)=\"doClick($event, item)\"\n\t\t\t\tclass=\"cds--list-box__menu-item\"\n\t\t\t\t[attr.aria-selected]=\"item.selected\"\n\t\t\t\t[id]=\"getItemId(i)\"\n\t\t\t\t[attr.title]=\" showTitles ? item.content : null\"\n\t\t\t\t[attr.disabled]=\"item.disabled ? true : null\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--list-box__menu-item--active': item.selected,\n\t\t\t\t\t'cds--list-box__menu-item--highlighted': highlightedItem === getItemId(i)\n\t\t\t\t}\">\n\t\t\t\t<div\n\t\t\t\t\t#listItem\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\tclass=\"cds--list-box__menu-item__option\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"!listTpl && type === 'multi'\"\n\t\t\t\t\t\tclass=\"cds--form-item cds--checkbox-wrapper\">\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t[attr.data-contained-checkbox-state]=\"item.selected\"\n\t\t\t\t\t\t\tclass=\"cds--checkbox-label\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"cds--checkbox\"\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t[checked]=\"item.selected\"\n\t\t\t\t\t\t\t\t[disabled]=\"item.disabled\"\n\t\t\t\t\t\t\t\ttabindex=\"-1\">\n\t\t\t\t\t\t\t<span class=\"cds--checkbox-appearance\"></span>\n\t\t\t\t\t\t\t<span class=\"cds--checkbox-label-text\">{{item.content}}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-container *ngIf=\"!listTpl && type === 'single'\">{{item.content}}</ng-container>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"!listTpl && type === 'single'\"\n\t\t\t\t\t\tcdsIcon=\"checkmark\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__menu-item__selected-icon\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"listTpl\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{item: item}\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"listTpl\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t</ul>`,\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.index < 0 && 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",
|
|
31207
|
+
"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=\"0\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-activedescendant]=\"highlightedItem\">\n\t\t\t<li\n\t\t\t\trole=\"option\"\n\t\t\t\t*ngFor=\"let item of displayItems; let i = index\"\n\t\t\t\t(click)=\"doClick($event, item)\"\n\t\t\t\tclass=\"cds--list-box__menu-item\"\n\t\t\t\t[attr.aria-selected]=\"item.selected\"\n\t\t\t\t[id]=\"getItemId(i)\"\n\t\t\t\t[attr.tabindex]=\"highlightedItem === getItemId(i) ? 0 : null\"\n\t\t\t\t[attr.title]=\" showTitles ? item.content : null\"\n\t\t\t\t[attr.disabled]=\"item.disabled ? true : null\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--list-box__menu-item--active': item.selected,\n\t\t\t\t\t'cds--list-box__menu-item--highlighted': highlightedItem === getItemId(i)\n\t\t\t\t}\">\n\t\t\t\t<div\n\t\t\t\t\t#listItem\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\tclass=\"cds--list-box__menu-item__option\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"!listTpl && type === 'multi'\"\n\t\t\t\t\t\tclass=\"cds--form-item cds--checkbox-wrapper\">\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t[attr.data-contained-checkbox-state]=\"item.selected\"\n\t\t\t\t\t\t\tclass=\"cds--checkbox-label\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"cds--checkbox\"\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t[checked]=\"item.selected\"\n\t\t\t\t\t\t\t\t[disabled]=\"item.disabled\"\n\t\t\t\t\t\t\t\ttabindex=\"-1\">\n\t\t\t\t\t\t\t<span class=\"cds--checkbox-appearance\"></span>\n\t\t\t\t\t\t\t<span class=\"cds--checkbox-label-text\">{{item.content}}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-container *ngIf=\"!listTpl && type === 'single'\">{{item.content}}</ng-container>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"!listTpl && type === 'single'\"\n\t\t\t\t\t\tcdsIcon=\"checkmark\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__menu-item__selected-icon\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"listTpl\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{item: item}\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"listTpl\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t</ul>`,\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.index < 0 && 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",
|
|
31208
31208
|
"assetsDirs": [],
|
|
31209
31209
|
"styleUrlsData": "",
|
|
31210
31210
|
"stylesData": "",
|
|
@@ -31233,7 +31233,7 @@
|
|
|
31233
31233
|
"deprecationMessage": ""
|
|
31234
31234
|
}
|
|
31235
31235
|
],
|
|
31236
|
-
"line":
|
|
31236
|
+
"line": 223,
|
|
31237
31237
|
"rawdescription": "\n\nCreates an instance of `DropdownList`.\n",
|
|
31238
31238
|
"jsdoctags": [
|
|
31239
31239
|
{
|
|
@@ -31288,7 +31288,7 @@
|
|
|
31288
31288
|
}
|
|
31289
31289
|
],
|
|
31290
31290
|
"returnType": "void",
|
|
31291
|
-
"line":
|
|
31291
|
+
"line": 125,
|
|
31292
31292
|
"rawdescription": "\n\nThe list items belonging to the `DropdownList`.\n",
|
|
31293
31293
|
"description": "<p>The list items belonging to the <code>DropdownList</code>.</p>\n",
|
|
31294
31294
|
"jsdoctags": [
|
|
@@ -31307,7 +31307,7 @@
|
|
|
31307
31307
|
"name": "items",
|
|
31308
31308
|
"type": "",
|
|
31309
31309
|
"returnType": "Array | Observable",
|
|
31310
|
-
"line":
|
|
31310
|
+
"line": 144
|
|
31311
31311
|
}
|
|
31312
31312
|
}
|
|
31313
31313
|
}
|
|
@@ -40570,7 +40570,7 @@
|
|
|
40570
40570
|
},
|
|
40571
40571
|
{
|
|
40572
40572
|
"name": "OverflowMenu",
|
|
40573
|
-
"id": "component-OverflowMenu-
|
|
40573
|
+
"id": "component-OverflowMenu-19ac7f2ad058f9a75a8eb0526944ec063447cc38440e53dd5a561a814a7e64e3481166f9db45c0357aac85635a566805fe75e361bb682aa79674882ad105d79d",
|
|
40574
40574
|
"file": "src/dialog/overflow-menu/overflow-menu.component.ts",
|
|
40575
40575
|
"encapsulation": [
|
|
40576
40576
|
"ViewEncapsulation.None"
|
|
@@ -40651,7 +40651,7 @@
|
|
|
40651
40651
|
"deprecated": false,
|
|
40652
40652
|
"deprecationMessage": "",
|
|
40653
40653
|
"line": 99,
|
|
40654
|
-
"type": "\"bottom\" | \"top\"",
|
|
40654
|
+
"type": "\"bottom\" | \"top\" | \"bottom,top\" | \"top,bottom\"",
|
|
40655
40655
|
"decorators": []
|
|
40656
40656
|
},
|
|
40657
40657
|
{
|
|
@@ -40856,7 +40856,7 @@
|
|
|
40856
40856
|
"description": "<p>The OverFlow menu component encapsulates the OverFlowMenu directive, and the menu iconography into one convienent component.</p>\n<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { DialogModule } from 'carbon-components-angular';</code></pre></div><b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\"><cds-overflow-menu>\n <cds-overflow-menu-option>Option 1</cds-overflow-menu-option>\n <cds-overflow-menu-option>Option 2</cds-overflow-menu-option>\n</cds-overflow-menu></code></pre></div><p><a href=\"../../?path=/story/components-overflow-menu--basic\">See demo</a></p>\n",
|
|
40857
40857
|
"rawdescription": "\n\nThe OverFlow menu component encapsulates the OverFlowMenu directive, and the menu iconography into one convienent component.\n\nGet started with importing the module:\n\n```typescript\nimport { DialogModule } from 'carbon-components-angular';\n```\n\n```html\n<cds-overflow-menu>\n\t<cds-overflow-menu-option>Option 1</cds-overflow-menu-option>\n\t<cds-overflow-menu-option>Option 2</cds-overflow-menu-option>\n</cds-overflow-menu>\n```\n\n[See demo](../../?path=/story/components-overflow-menu--basic)\n",
|
|
40858
40858
|
"type": "component",
|
|
40859
|
-
"sourceCode": "import {\n\tComponent,\n\tContentChild,\n\tElementRef,\n\tEventEmitter,\n\tInput,\n\tOutput,\n\tTemplateRef,\n\tViewEncapsulation\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { OverflowMenuDirective } from \"./overflow-menu.directive\";\nimport { BaseIconButton } from \"carbon-components-angular/button\";\n\n/**\n * The OverFlow menu component encapsulates the OverFlowMenu directive, and the menu iconography into one convienent component.\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { DialogModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-overflow-menu>\n *\t<cds-overflow-menu-option>Option 1</cds-overflow-menu-option>\n *\t<cds-overflow-menu-option>Option 2</cds-overflow-menu-option>\n * </cds-overflow-menu>\n * ```\n *\n * [See demo](../../?path=/story/components-overflow-menu--basic)\n */\n@Component({\n\tselector: \"cds-overflow-menu, ibm-overflow-menu\",\n\ttemplate: `\n\t\t<cds-tooltip\n\t\t\tclass=\"cds--icon-tooltip\"\n\t\t\t[description]=\"description\"\n\t\t\t[caret]=\"caret\"\n\t\t\t[dropShadow]=\"dropShadow\"\n\t\t\t[highContrast]=\"highContrast\"\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[align]=\"align\"\n\t\t\t[autoAlign]=\"autoAlign\"\n\t\t\t[enterDelayMs]=\"enterDelayMs\"\n\t\t\t[leaveDelayMs]=\"leaveDelayMs\">\n\t\t\t<button\n\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\t[cdsOverflowMenu]=\"options\"\n\t\t\t\t[ngClass]=\"{'cds--overflow-menu--open': open}\"\n\t\t\t\tclass=\"cds--overflow-menu {{triggerClass}}\"\n\t\t\t\t[iconOnly]=\"true\"\n\t\t\t\t[attr.aria-label]=\"buttonLabel\"\n\t\t\t\t[flip]=\"flip\"\n\t\t\t\t[isOpen]=\"open\"\n\t\t\t\t(isOpenChange)=\"handleOpenChange($event)\"\n\t\t\t\t[offset]=\"offset\"\n\t\t\t\t[wrapperClass]=\"wrapperClass\"\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[placement]=\"placement\">\n\t\t\t\t<ng-template *ngIf=\"customTrigger; else defaultIcon\" [ngTemplateOutlet]=\"customTrigger\"></ng-template>\n\t\t\t</button>\n\t\t</cds-tooltip>\n\n\t\t<ng-template #options>\n\t\t\t<ng-content></ng-content>\n\t\t</ng-template>\n\t\t<ng-template #defaultIcon>\n\t\t\t<svg cdsIcon=\"overflow-menu--vertical\" size=\"16\" class=\"cds--overflow-menu__icon\"></svg>\n\t\t</ng-template>\n\t`,\n\tstyles: [`\n\t\t.cds--overflow-menu--open {\n\t\t\topacity: 1\n\t\t}\n\n\t\t/*\n\t\tRotate the overflow menu container as well as the icon, since\n\t\twe calculate our menu position based on the container, not the icon.\n\t\t*/\n\t\t.cds--data-table-v2 .cds--overflow-menu {\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\n\t\t.cds--data-table-v2 .cds--overflow-menu__icon {\n\t\t\ttransform: rotate(180deg);\n\t\t}\n\t`],\n\tencapsulation: ViewEncapsulation.None\n})\nexport class OverflowMenu extends BaseIconButton {\n\t@Input() buttonLabel = this.i18n.get().OVERFLOW_MENU.OVERFLOW;\n\n\t@Input() description = this.i18n.get().OVERFLOW_MENU.ICON_DESCRIPTION;\n\n\t@Input() flip = false;\n\n\t@Input() placement: \"bottom\" | \"top\" = \"bottom\";\n\n\t@Input() open = false;\n\n\t@Output() openChange = new EventEmitter<boolean>();\n\t/**\n\t * Sets the custom overflow menu trigger\n\t */\n\t@Input() customTrigger: TemplateRef<any>;\n\n\t/**\n\t * This specifies any vertical and horizontal offset for the position of the dialog\n\t */\n\t@Input() offset: { x: number, y: number };\n\n\t@Input() wrapperClass = \"\";\n\n\t/**\n\t * This appends additional classes to the overflow trigger/button.\n\t */\n\t@Input() triggerClass = \"\";\n\n\t@ContentChild(OverflowMenuDirective) overflowMenuDirective: OverflowMenuDirective;\n\n\tconstructor(protected elementRef: ElementRef, protected i18n: I18n) {\n\t\tsuper();\n\t}\n\n\thandleOpenChange(event: boolean) {\n\t\tthis.open = event;\n\t\tthis.openChange.emit(event);\n\t}\n}\n",
|
|
40859
|
+
"sourceCode": "import {\n\tComponent,\n\tContentChild,\n\tElementRef,\n\tEventEmitter,\n\tInput,\n\tOutput,\n\tTemplateRef,\n\tViewEncapsulation\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { OverflowMenuDirective } from \"./overflow-menu.directive\";\nimport { BaseIconButton } from \"carbon-components-angular/button\";\n\n/**\n * The OverFlow menu component encapsulates the OverFlowMenu directive, and the menu iconography into one convienent component.\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { DialogModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-overflow-menu>\n *\t<cds-overflow-menu-option>Option 1</cds-overflow-menu-option>\n *\t<cds-overflow-menu-option>Option 2</cds-overflow-menu-option>\n * </cds-overflow-menu>\n * ```\n *\n * [See demo](../../?path=/story/components-overflow-menu--basic)\n */\n@Component({\n\tselector: \"cds-overflow-menu, ibm-overflow-menu\",\n\ttemplate: `\n\t\t<cds-tooltip\n\t\t\tclass=\"cds--icon-tooltip\"\n\t\t\t[description]=\"description\"\n\t\t\t[caret]=\"caret\"\n\t\t\t[dropShadow]=\"dropShadow\"\n\t\t\t[highContrast]=\"highContrast\"\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[align]=\"align\"\n\t\t\t[autoAlign]=\"autoAlign\"\n\t\t\t[enterDelayMs]=\"enterDelayMs\"\n\t\t\t[leaveDelayMs]=\"leaveDelayMs\">\n\t\t\t<button\n\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\t[cdsOverflowMenu]=\"options\"\n\t\t\t\t[ngClass]=\"{'cds--overflow-menu--open': open}\"\n\t\t\t\tclass=\"cds--overflow-menu {{triggerClass}}\"\n\t\t\t\t[iconOnly]=\"true\"\n\t\t\t\t[attr.aria-label]=\"buttonLabel\"\n\t\t\t\t[flip]=\"flip\"\n\t\t\t\t[isOpen]=\"open\"\n\t\t\t\t(isOpenChange)=\"handleOpenChange($event)\"\n\t\t\t\t[offset]=\"offset\"\n\t\t\t\t[wrapperClass]=\"wrapperClass\"\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[placement]=\"placement\">\n\t\t\t\t<ng-template *ngIf=\"customTrigger; else defaultIcon\" [ngTemplateOutlet]=\"customTrigger\"></ng-template>\n\t\t\t</button>\n\t\t</cds-tooltip>\n\n\t\t<ng-template #options>\n\t\t\t<ng-content></ng-content>\n\t\t</ng-template>\n\t\t<ng-template #defaultIcon>\n\t\t\t<svg cdsIcon=\"overflow-menu--vertical\" size=\"16\" class=\"cds--overflow-menu__icon\"></svg>\n\t\t</ng-template>\n\t`,\n\tstyles: [`\n\t\t.cds--overflow-menu--open {\n\t\t\topacity: 1\n\t\t}\n\n\t\t/*\n\t\tRotate the overflow menu container as well as the icon, since\n\t\twe calculate our menu position based on the container, not the icon.\n\t\t*/\n\t\t.cds--data-table-v2 .cds--overflow-menu {\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\n\t\t.cds--data-table-v2 .cds--overflow-menu__icon {\n\t\t\ttransform: rotate(180deg);\n\t\t}\n\t`],\n\tencapsulation: ViewEncapsulation.None\n})\nexport class OverflowMenu extends BaseIconButton {\n\t@Input() buttonLabel = this.i18n.get().OVERFLOW_MENU.OVERFLOW;\n\n\t@Input() description = this.i18n.get().OVERFLOW_MENU.ICON_DESCRIPTION;\n\n\t@Input() flip = false;\n\n\t@Input() placement: \"bottom\" | \"top\" | \"bottom,top\" | \"top,bottom\" = \"bottom\";\n\n\t@Input() open = false;\n\n\t@Output() openChange = new EventEmitter<boolean>();\n\t/**\n\t * Sets the custom overflow menu trigger\n\t */\n\t@Input() customTrigger: TemplateRef<any>;\n\n\t/**\n\t * This specifies any vertical and horizontal offset for the position of the dialog\n\t */\n\t@Input() offset: { x: number, y: number };\n\n\t@Input() wrapperClass = \"\";\n\n\t/**\n\t * This appends additional classes to the overflow trigger/button.\n\t */\n\t@Input() triggerClass = \"\";\n\n\t@ContentChild(OverflowMenuDirective) overflowMenuDirective: OverflowMenuDirective;\n\n\tconstructor(protected elementRef: ElementRef, protected i18n: I18n) {\n\t\tsuper();\n\t}\n\n\thandleOpenChange(event: boolean) {\n\t\tthis.open = event;\n\t\tthis.openChange.emit(event);\n\t}\n}\n",
|
|
40860
40860
|
"assetsDirs": [],
|
|
40861
40861
|
"styleUrlsData": "",
|
|
40862
40862
|
"stylesData": "\n\t\t.cds--overflow-menu--open {\n\t\t\topacity: 1\n\t\t}\n\n\t\t/*\n\t\tRotate the overflow menu container as well as the icon, since\n\t\twe calculate our menu position based on the container, not the icon.\n\t\t*/\n\t\t.cds--data-table-v2 .cds--overflow-menu {\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\n\t\t.cds--data-table-v2 .cds--overflow-menu__icon {\n\t\t\ttransform: rotate(180deg);\n\t\t}\n\t\n",
|
|
@@ -74961,7 +74961,7 @@
|
|
|
74961
74961
|
"name": "Basic",
|
|
74962
74962
|
"ctype": "miscellaneous",
|
|
74963
74963
|
"subtype": "variable",
|
|
74964
|
-
"file": "src/
|
|
74964
|
+
"file": "src/button/button-set.stories.ts",
|
|
74965
74965
|
"deprecated": false,
|
|
74966
74966
|
"deprecationMessage": "",
|
|
74967
74967
|
"type": "",
|
|
@@ -74971,7 +74971,7 @@
|
|
|
74971
74971
|
"name": "Basic",
|
|
74972
74972
|
"ctype": "miscellaneous",
|
|
74973
74973
|
"subtype": "variable",
|
|
74974
|
-
"file": "src/button/button
|
|
74974
|
+
"file": "src/button/button.stories.ts",
|
|
74975
74975
|
"deprecated": false,
|
|
74976
74976
|
"deprecationMessage": "",
|
|
74977
74977
|
"type": "",
|
|
@@ -74981,7 +74981,7 @@
|
|
|
74981
74981
|
"name": "Basic",
|
|
74982
74982
|
"ctype": "miscellaneous",
|
|
74983
74983
|
"subtype": "variable",
|
|
74984
|
-
"file": "src/button/button.stories.ts",
|
|
74984
|
+
"file": "src/button/icon-button.stories.ts",
|
|
74985
74985
|
"deprecated": false,
|
|
74986
74986
|
"deprecationMessage": "",
|
|
74987
74987
|
"type": "",
|
|
@@ -74991,7 +74991,7 @@
|
|
|
74991
74991
|
"name": "Basic",
|
|
74992
74992
|
"ctype": "miscellaneous",
|
|
74993
74993
|
"subtype": "variable",
|
|
74994
|
-
"file": "src/
|
|
74994
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
74995
74995
|
"deprecated": false,
|
|
74996
74996
|
"deprecationMessage": "",
|
|
74997
74997
|
"type": "",
|
|
@@ -77823,41 +77823,41 @@
|
|
|
77823
77823
|
"name": "Template",
|
|
77824
77824
|
"ctype": "miscellaneous",
|
|
77825
77825
|
"subtype": "variable",
|
|
77826
|
-
"file": "src/
|
|
77826
|
+
"file": "src/button/button-set.stories.ts",
|
|
77827
77827
|
"deprecated": false,
|
|
77828
77828
|
"deprecationMessage": "",
|
|
77829
77829
|
"type": "",
|
|
77830
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-
|
|
77830
|
+
"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})"
|
|
77831
77831
|
},
|
|
77832
77832
|
{
|
|
77833
77833
|
"name": "Template",
|
|
77834
77834
|
"ctype": "miscellaneous",
|
|
77835
77835
|
"subtype": "variable",
|
|
77836
|
-
"file": "src/button/button
|
|
77836
|
+
"file": "src/button/button.stories.ts",
|
|
77837
77837
|
"deprecated": false,
|
|
77838
77838
|
"deprecationMessage": "",
|
|
77839
77839
|
"type": "",
|
|
77840
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<
|
|
77840
|
+
"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})"
|
|
77841
77841
|
},
|
|
77842
77842
|
{
|
|
77843
77843
|
"name": "Template",
|
|
77844
77844
|
"ctype": "miscellaneous",
|
|
77845
77845
|
"subtype": "variable",
|
|
77846
|
-
"file": "src/button/button.stories.ts",
|
|
77846
|
+
"file": "src/button/icon-button.stories.ts",
|
|
77847
77847
|
"deprecated": false,
|
|
77848
77848
|
"deprecationMessage": "",
|
|
77849
77849
|
"type": "",
|
|
77850
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[
|
|
77850
|
+
"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})"
|
|
77851
77851
|
},
|
|
77852
77852
|
{
|
|
77853
77853
|
"name": "Template",
|
|
77854
77854
|
"ctype": "miscellaneous",
|
|
77855
77855
|
"subtype": "variable",
|
|
77856
|
-
"file": "src/
|
|
77856
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
77857
77857
|
"deprecated": false,
|
|
77858
77858
|
"deprecationMessage": "",
|
|
77859
77859
|
"type": "",
|
|
77860
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-
|
|
77860
|
+
"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})"
|
|
77861
77861
|
},
|
|
77862
77862
|
{
|
|
77863
77863
|
"name": "Template",
|
|
@@ -81675,199 +81675,199 @@
|
|
|
81675
81675
|
"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})"
|
|
81676
81676
|
}
|
|
81677
81677
|
],
|
|
81678
|
-
"src/
|
|
81678
|
+
"src/button/button-set.stories.ts": [
|
|
81679
81679
|
{
|
|
81680
81680
|
"name": "Basic",
|
|
81681
81681
|
"ctype": "miscellaneous",
|
|
81682
81682
|
"subtype": "variable",
|
|
81683
|
-
"file": "src/
|
|
81683
|
+
"file": "src/button/button-set.stories.ts",
|
|
81684
81684
|
"deprecated": false,
|
|
81685
81685
|
"deprecationMessage": "",
|
|
81686
81686
|
"type": "",
|
|
81687
81687
|
"defaultValue": "Template.bind({})"
|
|
81688
81688
|
},
|
|
81689
81689
|
{
|
|
81690
|
-
"name": "
|
|
81690
|
+
"name": "Template",
|
|
81691
81691
|
"ctype": "miscellaneous",
|
|
81692
81692
|
"subtype": "variable",
|
|
81693
|
-
"file": "src/
|
|
81693
|
+
"file": "src/button/button-set.stories.ts",
|
|
81694
81694
|
"deprecated": false,
|
|
81695
81695
|
"deprecationMessage": "",
|
|
81696
|
-
"type": ""
|
|
81697
|
-
|
|
81696
|
+
"type": "",
|
|
81697
|
+
"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})"
|
|
81698
|
+
}
|
|
81699
|
+
],
|
|
81700
|
+
"src/button/button.stories.ts": [
|
|
81698
81701
|
{
|
|
81699
|
-
"name": "
|
|
81702
|
+
"name": "Basic",
|
|
81700
81703
|
"ctype": "miscellaneous",
|
|
81701
81704
|
"subtype": "variable",
|
|
81702
|
-
"file": "src/
|
|
81705
|
+
"file": "src/button/button.stories.ts",
|
|
81703
81706
|
"deprecated": false,
|
|
81704
81707
|
"deprecationMessage": "",
|
|
81705
81708
|
"type": "",
|
|
81706
|
-
"defaultValue": "
|
|
81709
|
+
"defaultValue": "Template.bind({})"
|
|
81707
81710
|
},
|
|
81708
81711
|
{
|
|
81709
|
-
"name": "
|
|
81712
|
+
"name": "Template",
|
|
81710
81713
|
"ctype": "miscellaneous",
|
|
81711
81714
|
"subtype": "variable",
|
|
81712
|
-
"file": "src/
|
|
81715
|
+
"file": "src/button/button.stories.ts",
|
|
81713
81716
|
"deprecated": false,
|
|
81714
81717
|
"deprecationMessage": "",
|
|
81715
81718
|
"type": "",
|
|
81716
|
-
"defaultValue": "
|
|
81719
|
+
"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})"
|
|
81717
81720
|
},
|
|
81718
81721
|
{
|
|
81719
|
-
"name": "
|
|
81722
|
+
"name": "WithIcon",
|
|
81720
81723
|
"ctype": "miscellaneous",
|
|
81721
81724
|
"subtype": "variable",
|
|
81722
|
-
"file": "src/
|
|
81725
|
+
"file": "src/button/button.stories.ts",
|
|
81723
81726
|
"deprecated": false,
|
|
81724
81727
|
"deprecationMessage": "",
|
|
81725
81728
|
"type": "",
|
|
81726
|
-
"defaultValue": "(
|
|
81729
|
+
"defaultValue": "WithIconTemplate.bind({})"
|
|
81727
81730
|
},
|
|
81728
81731
|
{
|
|
81729
|
-
"name": "
|
|
81732
|
+
"name": "WithIconTemplate",
|
|
81730
81733
|
"ctype": "miscellaneous",
|
|
81731
81734
|
"subtype": "variable",
|
|
81732
|
-
"file": "src/
|
|
81735
|
+
"file": "src/button/button.stories.ts",
|
|
81733
81736
|
"deprecated": false,
|
|
81734
81737
|
"deprecationMessage": "",
|
|
81735
81738
|
"type": "",
|
|
81736
|
-
"defaultValue": "
|
|
81737
|
-
}
|
|
81739
|
+
"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})"
|
|
81740
|
+
}
|
|
81741
|
+
],
|
|
81742
|
+
"src/breadcrumb/breadcrumb.stories.ts": [
|
|
81738
81743
|
{
|
|
81739
|
-
"name": "
|
|
81744
|
+
"name": "Basic",
|
|
81740
81745
|
"ctype": "miscellaneous",
|
|
81741
81746
|
"subtype": "variable",
|
|
81742
81747
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81743
81748
|
"deprecated": false,
|
|
81744
81749
|
"deprecationMessage": "",
|
|
81745
81750
|
"type": "",
|
|
81746
|
-
"defaultValue": "(
|
|
81751
|
+
"defaultValue": "Template.bind({})"
|
|
81747
81752
|
},
|
|
81748
81753
|
{
|
|
81749
|
-
"name": "
|
|
81754
|
+
"name": "breadcrumbItems",
|
|
81750
81755
|
"ctype": "miscellaneous",
|
|
81751
81756
|
"subtype": "variable",
|
|
81752
81757
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81753
81758
|
"deprecated": false,
|
|
81754
81759
|
"deprecationMessage": "",
|
|
81755
|
-
"type": ""
|
|
81756
|
-
"defaultValue": "ModelWTemplate.bind({})"
|
|
81760
|
+
"type": ""
|
|
81757
81761
|
},
|
|
81758
81762
|
{
|
|
81759
|
-
"name": "
|
|
81763
|
+
"name": "createBreadcrumbItems",
|
|
81760
81764
|
"ctype": "miscellaneous",
|
|
81761
81765
|
"subtype": "variable",
|
|
81762
81766
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81763
81767
|
"deprecated": false,
|
|
81764
81768
|
"deprecationMessage": "",
|
|
81765
81769
|
"type": "",
|
|
81766
|
-
"defaultValue": "(
|
|
81770
|
+
"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}"
|
|
81767
81771
|
},
|
|
81768
81772
|
{
|
|
81769
|
-
"name": "
|
|
81773
|
+
"name": "CurrentPage",
|
|
81770
81774
|
"ctype": "miscellaneous",
|
|
81771
81775
|
"subtype": "variable",
|
|
81772
81776
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81773
81777
|
"deprecated": false,
|
|
81774
81778
|
"deprecationMessage": "",
|
|
81775
81779
|
"type": "",
|
|
81776
|
-
"defaultValue": "
|
|
81780
|
+
"defaultValue": "CurrentPageTemplate.bind({})"
|
|
81777
81781
|
},
|
|
81778
81782
|
{
|
|
81779
|
-
"name": "
|
|
81783
|
+
"name": "CurrentPageTemplate",
|
|
81780
81784
|
"ctype": "miscellaneous",
|
|
81781
81785
|
"subtype": "variable",
|
|
81782
81786
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81783
81787
|
"deprecated": false,
|
|
81784
81788
|
"deprecationMessage": "",
|
|
81785
81789
|
"type": "",
|
|
81786
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb
|
|
81790
|
+
"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})"
|
|
81787
81791
|
},
|
|
81788
81792
|
{
|
|
81789
|
-
"name": "
|
|
81793
|
+
"name": "Model",
|
|
81790
81794
|
"ctype": "miscellaneous",
|
|
81791
81795
|
"subtype": "variable",
|
|
81792
81796
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81793
81797
|
"deprecated": false,
|
|
81794
81798
|
"deprecationMessage": "",
|
|
81795
81799
|
"type": "",
|
|
81796
|
-
"defaultValue": "(
|
|
81800
|
+
"defaultValue": "ModelTemplate.bind({})"
|
|
81797
81801
|
},
|
|
81798
81802
|
{
|
|
81799
|
-
"name": "
|
|
81803
|
+
"name": "ModelTemplate",
|
|
81800
81804
|
"ctype": "miscellaneous",
|
|
81801
81805
|
"subtype": "variable",
|
|
81802
81806
|
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81803
81807
|
"deprecated": false,
|
|
81804
81808
|
"deprecationMessage": "",
|
|
81805
81809
|
"type": "",
|
|
81806
|
-
"defaultValue": "(
|
|
81807
|
-
}
|
|
81808
|
-
],
|
|
81809
|
-
"src/button/button-set.stories.ts": [
|
|
81810
|
+
"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})"
|
|
81811
|
+
},
|
|
81810
81812
|
{
|
|
81811
|
-
"name": "
|
|
81813
|
+
"name": "ModelWithTemplate",
|
|
81812
81814
|
"ctype": "miscellaneous",
|
|
81813
81815
|
"subtype": "variable",
|
|
81814
|
-
"file": "src/
|
|
81816
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81815
81817
|
"deprecated": false,
|
|
81816
81818
|
"deprecationMessage": "",
|
|
81817
81819
|
"type": "",
|
|
81818
|
-
"defaultValue": "
|
|
81820
|
+
"defaultValue": "ModelWTemplate.bind({})"
|
|
81819
81821
|
},
|
|
81820
81822
|
{
|
|
81821
|
-
"name": "
|
|
81823
|
+
"name": "ModelWTemplate",
|
|
81822
81824
|
"ctype": "miscellaneous",
|
|
81823
81825
|
"subtype": "variable",
|
|
81824
|
-
"file": "src/
|
|
81826
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81825
81827
|
"deprecated": false,
|
|
81826
81828
|
"deprecationMessage": "",
|
|
81827
81829
|
"type": "",
|
|
81828
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<
|
|
81829
|
-
}
|
|
81830
|
-
],
|
|
81831
|
-
"src/button/button.stories.ts": [
|
|
81830
|
+
"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})"
|
|
81831
|
+
},
|
|
81832
81832
|
{
|
|
81833
|
-
"name": "
|
|
81833
|
+
"name": "Skeleton",
|
|
81834
81834
|
"ctype": "miscellaneous",
|
|
81835
81835
|
"subtype": "variable",
|
|
81836
|
-
"file": "src/
|
|
81836
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81837
81837
|
"deprecated": false,
|
|
81838
81838
|
"deprecationMessage": "",
|
|
81839
81839
|
"type": "",
|
|
81840
|
-
"defaultValue": "
|
|
81840
|
+
"defaultValue": "WithSkeleton.bind({})"
|
|
81841
81841
|
},
|
|
81842
81842
|
{
|
|
81843
81843
|
"name": "Template",
|
|
81844
81844
|
"ctype": "miscellaneous",
|
|
81845
81845
|
"subtype": "variable",
|
|
81846
|
-
"file": "src/
|
|
81846
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81847
81847
|
"deprecated": false,
|
|
81848
81848
|
"deprecationMessage": "",
|
|
81849
81849
|
"type": "",
|
|
81850
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<
|
|
81850
|
+
"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})"
|
|
81851
81851
|
},
|
|
81852
81852
|
{
|
|
81853
|
-
"name": "
|
|
81853
|
+
"name": "WithSkeleton",
|
|
81854
81854
|
"ctype": "miscellaneous",
|
|
81855
81855
|
"subtype": "variable",
|
|
81856
|
-
"file": "src/
|
|
81856
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81857
81857
|
"deprecated": false,
|
|
81858
81858
|
"deprecationMessage": "",
|
|
81859
81859
|
"type": "",
|
|
81860
|
-
"defaultValue": "
|
|
81860
|
+
"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})"
|
|
81861
81861
|
},
|
|
81862
81862
|
{
|
|
81863
|
-
"name": "
|
|
81863
|
+
"name": "withTemplate",
|
|
81864
81864
|
"ctype": "miscellaneous",
|
|
81865
81865
|
"subtype": "variable",
|
|
81866
|
-
"file": "src/
|
|
81866
|
+
"file": "src/breadcrumb/breadcrumb.stories.ts",
|
|
81867
81867
|
"deprecated": false,
|
|
81868
81868
|
"deprecationMessage": "",
|
|
81869
81869
|
"type": "",
|
|
81870
|
-
"defaultValue": "(
|
|
81870
|
+
"defaultValue": "(templateRef, items) => items.map(item => Object.assign(item, { template: templateRef }))"
|
|
81871
81871
|
}
|
|
81872
81872
|
],
|
|
81873
81873
|
"src/checkbox/checkbox.stories.ts": [
|