carbon-components-angular 5.62.0 → 5.62.1
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/docs/documentation/components/ContextMenuItemComponent.html +29 -26
- package/docs/documentation/components/DatePicker.html +3 -3
- package/docs/documentation/js/search/search_index.js +2 -2
- package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +41 -45
- package/docs/documentation/modules/TimePickerSelectModule.html +41 -45
- package/docs/documentation/modules/ToggletipModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ToggletipModule.html +4 -4
- package/docs/documentation/modules/TooltipModule/dependencies.svg +28 -28
- package/docs/documentation/modules/TooltipModule.html +28 -28
- package/docs/documentation/modules/TreeviewModule/dependencies.svg +34 -34
- package/docs/documentation/modules/TreeviewModule.html +34 -34
- package/docs/documentation.json +18 -18
- package/docs/storybook/4292.43ba2665.iframe.bundle.js +1 -0
- package/docs/storybook/iframe.html +2 -2
- package/docs/storybook/main.44f74a26.iframe.bundle.js +1 -0
- package/docs/storybook/project.json +1 -1
- package/docs/storybook/{runtime~main.b9f2b050.iframe.bundle.js → runtime~main.4617f37a.iframe.bundle.js} +1 -1
- package/esm2020/context-menu/context-menu-item.component.mjs +4 -1
- package/esm2020/datepicker/datepicker.component.mjs +4 -4
- package/fesm2015/carbon-components-angular-context-menu.mjs +3 -0
- package/fesm2015/carbon-components-angular-context-menu.mjs.map +1 -1
- package/fesm2015/carbon-components-angular-datepicker.mjs +3 -3
- package/fesm2015/carbon-components-angular-datepicker.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-context-menu.mjs +3 -0
- package/fesm2020/carbon-components-angular-context-menu.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-datepicker.mjs +3 -3
- package/fesm2020/carbon-components-angular-datepicker.mjs.map +1 -1
- package/package.json +1 -1
- package/docs/storybook/4292.c9a7a05a.iframe.bundle.js +0 -1
- package/docs/storybook/main.85fe3c7f.iframe.bundle.js +0 -1
package/docs/documentation.json
CHANGED
|
@@ -26532,7 +26532,7 @@
|
|
|
26532
26532
|
},
|
|
26533
26533
|
{
|
|
26534
26534
|
"name": "ContextMenuItemComponent",
|
|
26535
|
-
"id": "component-ContextMenuItemComponent-
|
|
26535
|
+
"id": "component-ContextMenuItemComponent-7ef294a6e016ced0c17157feee090fd8747b41215bae48d6d7a70cdfb9b456421ecc21946092453ff9e7271118dc3583936fcf335d379c5249ebc1b26f1befe6",
|
|
26536
26536
|
"file": "src/context-menu/context-menu-item.component.ts",
|
|
26537
26537
|
"encapsulation": [],
|
|
26538
26538
|
"entryComponents": [],
|
|
@@ -26782,7 +26782,7 @@
|
|
|
26782
26782
|
"optional": false,
|
|
26783
26783
|
"returnType": "void",
|
|
26784
26784
|
"typeParameters": [],
|
|
26785
|
-
"line":
|
|
26785
|
+
"line": 169,
|
|
26786
26786
|
"deprecated": false,
|
|
26787
26787
|
"deprecationMessage": ""
|
|
26788
26788
|
},
|
|
@@ -26792,7 +26792,7 @@
|
|
|
26792
26792
|
"optional": false,
|
|
26793
26793
|
"returnType": "void",
|
|
26794
26794
|
"typeParameters": [],
|
|
26795
|
-
"line":
|
|
26795
|
+
"line": 199,
|
|
26796
26796
|
"deprecated": false,
|
|
26797
26797
|
"deprecationMessage": ""
|
|
26798
26798
|
},
|
|
@@ -26802,7 +26802,7 @@
|
|
|
26802
26802
|
"optional": false,
|
|
26803
26803
|
"returnType": "void",
|
|
26804
26804
|
"typeParameters": [],
|
|
26805
|
-
"line":
|
|
26805
|
+
"line": 195,
|
|
26806
26806
|
"deprecated": false,
|
|
26807
26807
|
"deprecationMessage": "",
|
|
26808
26808
|
"decorators": [
|
|
@@ -26868,7 +26868,7 @@
|
|
|
26868
26868
|
"optional": false,
|
|
26869
26869
|
"returnType": "void",
|
|
26870
26870
|
"typeParameters": [],
|
|
26871
|
-
"line":
|
|
26871
|
+
"line": 187,
|
|
26872
26872
|
"deprecated": false,
|
|
26873
26873
|
"deprecationMessage": "",
|
|
26874
26874
|
"decorators": [
|
|
@@ -26887,7 +26887,7 @@
|
|
|
26887
26887
|
"optional": false,
|
|
26888
26888
|
"returnType": "void",
|
|
26889
26889
|
"typeParameters": [],
|
|
26890
|
-
"line":
|
|
26890
|
+
"line": 182,
|
|
26891
26891
|
"deprecated": false,
|
|
26892
26892
|
"deprecationMessage": "",
|
|
26893
26893
|
"decorators": [
|
|
@@ -26906,7 +26906,7 @@
|
|
|
26906
26906
|
"optional": false,
|
|
26907
26907
|
"returnType": "void",
|
|
26908
26908
|
"typeParameters": [],
|
|
26909
|
-
"line":
|
|
26909
|
+
"line": 177,
|
|
26910
26910
|
"deprecated": false,
|
|
26911
26911
|
"deprecationMessage": "",
|
|
26912
26912
|
"decorators": [
|
|
@@ -26932,7 +26932,7 @@
|
|
|
26932
26932
|
"optional": false,
|
|
26933
26933
|
"returnType": "void",
|
|
26934
26934
|
"typeParameters": [],
|
|
26935
|
-
"line":
|
|
26935
|
+
"line": 153,
|
|
26936
26936
|
"deprecated": false,
|
|
26937
26937
|
"deprecationMessage": "",
|
|
26938
26938
|
"jsdoctags": [
|
|
@@ -26953,7 +26953,7 @@
|
|
|
26953
26953
|
"optional": false,
|
|
26954
26954
|
"returnType": "void",
|
|
26955
26955
|
"typeParameters": [],
|
|
26956
|
-
"line":
|
|
26956
|
+
"line": 158,
|
|
26957
26957
|
"deprecated": false,
|
|
26958
26958
|
"deprecationMessage": ""
|
|
26959
26959
|
}
|
|
@@ -27030,7 +27030,7 @@
|
|
|
27030
27030
|
"argsDecorator": [],
|
|
27031
27031
|
"deprecated": false,
|
|
27032
27032
|
"deprecationMessage": "",
|
|
27033
|
-
"line":
|
|
27033
|
+
"line": 195
|
|
27034
27034
|
},
|
|
27035
27035
|
{
|
|
27036
27036
|
"name": "click",
|
|
@@ -27055,7 +27055,7 @@
|
|
|
27055
27055
|
"argsDecorator": [],
|
|
27056
27056
|
"deprecated": false,
|
|
27057
27057
|
"deprecationMessage": "",
|
|
27058
|
-
"line":
|
|
27058
|
+
"line": 187
|
|
27059
27059
|
},
|
|
27060
27060
|
{
|
|
27061
27061
|
"name": "keydown.enter",
|
|
@@ -27097,7 +27097,7 @@
|
|
|
27097
27097
|
"argsDecorator": [],
|
|
27098
27098
|
"deprecated": false,
|
|
27099
27099
|
"deprecationMessage": "",
|
|
27100
|
-
"line":
|
|
27100
|
+
"line": 182
|
|
27101
27101
|
},
|
|
27102
27102
|
{
|
|
27103
27103
|
"name": "mouseover",
|
|
@@ -27105,7 +27105,7 @@
|
|
|
27105
27105
|
"argsDecorator": [],
|
|
27106
27106
|
"deprecated": false,
|
|
27107
27107
|
"deprecationMessage": "",
|
|
27108
|
-
"line":
|
|
27108
|
+
"line": 177
|
|
27109
27109
|
}
|
|
27110
27110
|
],
|
|
27111
27111
|
"standalone": false,
|
|
@@ -27113,7 +27113,7 @@
|
|
|
27113
27113
|
"description": "",
|
|
27114
27114
|
"rawdescription": "\n",
|
|
27115
27115
|
"type": "component",
|
|
27116
|
-
"sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tHostListener,\n\tContentChild,\n\tOptional,\n\tOnInit,\n\tAfterContentInit,\n\tOnDestroy\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { ContextMenuSelectionService } from \"./context-menu-selection.service\";\nimport { ContextMenuComponent } from \"./context-menu.component\";\nimport { ItemClickEvent } from \"./context-menu.types\";\n\n@Component({\n\tselector: \"cds-menu-item, cds-context-menu-item, ibm-context-menu-item\",\n\ttemplate: `\n\t\t<div class=\"cds--menu-item__icon\">\n\t\t\t<svg *ngIf=\"selectable && checked\" cdsIcon=\"checkmark\" size=\"16\"></svg>\n\t\t\t<svg *ngIf=\"!selectable && icon\" [cdsIcon]=\"icon\" size=\"16\"></svg>\n\t\t</div>\n\t\t<div class=\"cds--menu-item__label\" [title]=\"label\">{{label}}</div>\n\t\t<div class=\"cds--menu-item__shortcut\">\n\t\t\t<ng-container *ngIf=\"info\">{{info}}</ng-container>\n\t\t\t<svg *ngIf=\"hasChildren\" cdsIcon=\"caret--right\" size=\"16\"></svg>\n\t\t</div>\n\t\t<ng-content></ng-content>\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tgrid-template-columns: 1rem 1fr max-content;\n\t\t}\n\t`]\n})\nexport class ContextMenuItemComponent implements OnInit, AfterContentInit, OnDestroy {\n\t@HostBinding(\"class.cds--menu-item\") optionClass = true;\n\t@HostBinding(\"attr.role\") role = \"menuitem\";\n\t@HostBinding(\"attr.tabindex\") tabindex = -1;\n\t@HostBinding(\"attr.aria-haspopup\") ariaHasPopup = null;\n\t@HostBinding(\"attr.aria-expanded\") ariaExpanded = null;\n\t@HostBinding(\"attr.aria-checked\") get ariaChecked() {\n\t\treturn this.type === \"checkbox\" ?\n\t\t\t(this.checked ? true : false) : null;\n\t}\n\t@HostBinding(\"attr.aria-disabled\") get ariaDisabled() {\n\t\treturn this.disabled;\n\t}\n\t@Input() @HostBinding(\"class.cds--menu-item--disabled\") disabled = false;\n\t@Input() @HostBinding(\"class.cds--menu-item--danger\") danger = false;\n\t@Input() label = \"\";\n\t@Input() info = \"\";\n\t@Input() type: null | \"checkbox\" | \"radio\" = null;\n\t@Input() checked = false;\n\t@Input() icon = \"\";\n\t@Input() value = \"\";\n\t@Output() checkedChange = new EventEmitter<boolean>();\n\t@Output() itemClick = new EventEmitter<ItemClickEvent>();\n\n\thasChildren = false;\n\tselectable = false;\n\n\t@ContentChild(ContextMenuComponent, { static: true }) childContextMenu: ContextMenuComponent;\n\tprivate subscriptions = new Subscription();\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\t@Optional() protected contextMenuSelectionService: ContextMenuSelectionService\n\t) {}\n\n\tngOnInit() {\n\t\tswitch (this.type) {\n\t\t\tcase \"checkbox\": {\n\t\t\t\tthis.role = \"menuitemcheckbox\";\n\t\t\t\tthis.selectable = true;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"radio\": {\n\t\t\t\tthis.role = \"menuitemradio\";\n\t\t\t\tthis.selectable = true;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tdefault: {\n\t\t\t\tthis.role = \"menuitem\";\n\t\t\t}\n\t\t}\n\n\t\tif (this.type && this.contextMenuSelectionService && this.value) {\n\t\t\tconst { selectionObservable } = this.contextMenuSelectionService;\n\t\t\tconst subscription = selectionObservable.subscribe((value) => {\n\t\t\t\tif (this.type === \"radio\") {\n\t\t\t\t\tthis.handleSelection(value === this.value);\n\t\t\t\t}\n\n\t\t\t\tif (this.type === \"checkbox\") {\n\t\t\t\t\tthis.handleSelection(value.includes(this.value));\n\t\t\t\t}\n\t\t\t});\n\t\t\tthis.subscriptions.add(subscription);\n\t\t}\n\t}\n\n\tngAfterContentInit() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.hasChildren = true;\n\t\t\tthis.ariaHasPopup = true;\n\t\t\tthis.ariaExpanded = false;\n\t\t}\n\t}\n\n\t@HostListener(\"keydown.enter\", [\"$event\"])\n\t@HostListener(\"keydown.space\", [\"$event\"])\n\t@HostListener(\"click\", [\"$event\"])\n\thandleClick(event: MouseEvent & KeyboardEvent) {\n\t\tevent.stopPropagation();\n\t\tif (this.hasChildren) {\n\t\t\tthis.openSubMenu();\n\t\t\tthis.childContextMenu.focusMenu();\n\t\t}\n\n\t\tif (this.type) {\n\t\t\tthis.handleSelection(!this.checked);\n\t\t}\n\n\t\tif (this.contextMenuSelectionService) {\n\t\t\tif (this.type === \"radio\") {\n\t\t\t\tthis.contextMenuSelectionService.selectRadio(this.value);\n\t\t\t}\n\n\t\t\tif (this.type === \"checkbox\") {\n\t\t\t\tthis.contextMenuSelectionService.selectCheckbox(this.value);\n\t\t\t}\n\t\t}\n\n\t\tif (!this.disabled) {\n\t\t\tthis.itemClick.emit({\n\t\t\t\tevent,\n\t\t\t\tlabel: this.label,\n\t\t\t\tinfo: this.info,\n\t\t\t\tvalue: this.value,\n\t\t\t\ttype: this.type\n\t\t\t});\n\t\t}\n\t}\n\n\thandleSelection(selected: boolean) {\n\t\tthis.checked = selected;\n\t\tthis.checkedChange.emit(this.checked);\n\t}\n\n\topenSubMenu() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.childContextMenu.open = true;\n\t\t\tthis.ariaExpanded = true;\n\t\t\tconst dimensions = this.elementRef.nativeElement.getBoundingClientRect();\n\t\t\tthis.childContextMenu.position.left = dimensions.left + dimensions.width;\n\t\t\t// subtract 4px to account for margins\n\t\t\tthis.childContextMenu.position.top = dimensions.top - 4;\n\t\t}\n\t}\n\n\tcloseSubMenu() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.childContextMenu.open = false;\n\t\t\tthis.ariaExpanded = false;\n\t\t}\n\t}\n\n\t@HostListener(\"mouseover\")\n\thandleMouseOver() {\n\t\tthis.openSubMenu();\n\t}\n\n\t@HostListener(\"mouseout\")\n\thandleMouseOut() {\n\t\tthis.closeSubMenu();\n\t}\n\n\t@HostListener(\"focus\")\n\thandleFocus() {\n\t\tthis.tabindex = 0;\n\t\tif (this.hasChildren && this.ariaExpanded) {\n\t\t\tthis.closeSubMenu();\n\t\t}\n\t}\n\n\t@HostListener(\"blur\")\n\thandleBlur() {\n\t\tthis.tabindex = -1;\n\t}\n\n\tfocusItem() {\n\t\tthis.elementRef.nativeElement.focus();\n\t}\n\n\tngOnDestroy() {\n\t\tthis.subscriptions.unsubscribe();\n\t}\n}\n",
|
|
27116
|
+
"sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tHostListener,\n\tContentChild,\n\tOptional,\n\tOnInit,\n\tAfterContentInit,\n\tOnDestroy\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { ContextMenuSelectionService } from \"./context-menu-selection.service\";\nimport { ContextMenuComponent } from \"./context-menu.component\";\nimport { ItemClickEvent } from \"./context-menu.types\";\n\n@Component({\n\tselector: \"cds-menu-item, cds-context-menu-item, ibm-context-menu-item\",\n\ttemplate: `\n\t\t<div class=\"cds--menu-item__icon\">\n\t\t\t<svg *ngIf=\"selectable && checked\" cdsIcon=\"checkmark\" size=\"16\"></svg>\n\t\t\t<svg *ngIf=\"!selectable && icon\" [cdsIcon]=\"icon\" size=\"16\"></svg>\n\t\t</div>\n\t\t<div class=\"cds--menu-item__label\" [title]=\"label\">{{label}}</div>\n\t\t<div class=\"cds--menu-item__shortcut\">\n\t\t\t<ng-container *ngIf=\"info\">{{info}}</ng-container>\n\t\t\t<svg *ngIf=\"hasChildren\" cdsIcon=\"caret--right\" size=\"16\"></svg>\n\t\t</div>\n\t\t<ng-content></ng-content>\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tgrid-template-columns: 1rem 1fr max-content;\n\t\t}\n\t`]\n})\nexport class ContextMenuItemComponent implements OnInit, AfterContentInit, OnDestroy {\n\t@HostBinding(\"class.cds--menu-item\") optionClass = true;\n\t@HostBinding(\"attr.role\") role = \"menuitem\";\n\t@HostBinding(\"attr.tabindex\") tabindex = -1;\n\t@HostBinding(\"attr.aria-haspopup\") ariaHasPopup = null;\n\t@HostBinding(\"attr.aria-expanded\") ariaExpanded = null;\n\t@HostBinding(\"attr.aria-checked\") get ariaChecked() {\n\t\treturn this.type === \"checkbox\" ?\n\t\t\t(this.checked ? true : false) : null;\n\t}\n\t@HostBinding(\"attr.aria-disabled\") get ariaDisabled() {\n\t\treturn this.disabled;\n\t}\n\t@Input() @HostBinding(\"class.cds--menu-item--disabled\") disabled = false;\n\t@Input() @HostBinding(\"class.cds--menu-item--danger\") danger = false;\n\t@Input() label = \"\";\n\t@Input() info = \"\";\n\t@Input() type: null | \"checkbox\" | \"radio\" = null;\n\t@Input() checked = false;\n\t@Input() icon = \"\";\n\t@Input() value = \"\";\n\t@Output() checkedChange = new EventEmitter<boolean>();\n\t@Output() itemClick = new EventEmitter<ItemClickEvent>();\n\n\thasChildren = false;\n\tselectable = false;\n\n\t@ContentChild(ContextMenuComponent, { static: true }) childContextMenu: ContextMenuComponent;\n\tprivate subscriptions = new Subscription();\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\t@Optional() protected contextMenuSelectionService: ContextMenuSelectionService\n\t) {}\n\n\tngOnInit() {\n\t\tswitch (this.type) {\n\t\t\tcase \"checkbox\": {\n\t\t\t\tthis.role = \"menuitemcheckbox\";\n\t\t\t\tthis.selectable = true;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"radio\": {\n\t\t\t\tthis.role = \"menuitemradio\";\n\t\t\t\tthis.selectable = true;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tdefault: {\n\t\t\t\tthis.role = \"menuitem\";\n\t\t\t}\n\t\t}\n\n\t\tif (this.type && this.contextMenuSelectionService && this.value) {\n\t\t\tconst { selectionObservable } = this.contextMenuSelectionService;\n\t\t\tconst subscription = selectionObservable.subscribe((value) => {\n\t\t\t\tif (this.type === \"radio\") {\n\t\t\t\t\tthis.handleSelection(value === this.value);\n\t\t\t\t}\n\n\t\t\t\tif (this.type === \"checkbox\") {\n\t\t\t\t\tthis.handleSelection(value.includes(this.value));\n\t\t\t\t}\n\t\t\t});\n\t\t\tthis.subscriptions.add(subscription);\n\t\t}\n\t}\n\n\tngAfterContentInit() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.hasChildren = true;\n\t\t\tthis.ariaHasPopup = true;\n\t\t\tthis.ariaExpanded = false;\n\t\t}\n\t}\n\n\t@HostListener(\"keydown.enter\", [\"$event\"])\n\t@HostListener(\"keydown.space\", [\"$event\"])\n\t@HostListener(\"click\", [\"$event\"])\n\thandleClick(event: MouseEvent & KeyboardEvent) {\n\t\tevent.stopPropagation();\n\t\tif (this.disabled) {\n\t\t\treturn;\n\t\t}\n\t\tif (this.hasChildren) {\n\t\t\tthis.openSubMenu();\n\t\t\tthis.childContextMenu.focusMenu();\n\t\t}\n\n\t\tif (this.type) {\n\t\t\tthis.handleSelection(!this.checked);\n\t\t}\n\n\t\tif (this.contextMenuSelectionService) {\n\t\t\tif (this.type === \"radio\") {\n\t\t\t\tthis.contextMenuSelectionService.selectRadio(this.value);\n\t\t\t}\n\n\t\t\tif (this.type === \"checkbox\") {\n\t\t\t\tthis.contextMenuSelectionService.selectCheckbox(this.value);\n\t\t\t}\n\t\t}\n\n\t\tif (!this.disabled) {\n\t\t\tthis.itemClick.emit({\n\t\t\t\tevent,\n\t\t\t\tlabel: this.label,\n\t\t\t\tinfo: this.info,\n\t\t\t\tvalue: this.value,\n\t\t\t\ttype: this.type\n\t\t\t});\n\t\t}\n\t}\n\n\thandleSelection(selected: boolean) {\n\t\tthis.checked = selected;\n\t\tthis.checkedChange.emit(this.checked);\n\t}\n\n\topenSubMenu() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.childContextMenu.open = true;\n\t\t\tthis.ariaExpanded = true;\n\t\t\tconst dimensions = this.elementRef.nativeElement.getBoundingClientRect();\n\t\t\tthis.childContextMenu.position.left = dimensions.left + dimensions.width;\n\t\t\t// subtract 4px to account for margins\n\t\t\tthis.childContextMenu.position.top = dimensions.top - 4;\n\t\t}\n\t}\n\n\tcloseSubMenu() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.childContextMenu.open = false;\n\t\t\tthis.ariaExpanded = false;\n\t\t}\n\t}\n\n\t@HostListener(\"mouseover\")\n\thandleMouseOver() {\n\t\tthis.openSubMenu();\n\t}\n\n\t@HostListener(\"mouseout\")\n\thandleMouseOut() {\n\t\tthis.closeSubMenu();\n\t}\n\n\t@HostListener(\"focus\")\n\thandleFocus() {\n\t\tthis.tabindex = 0;\n\t\tif (this.hasChildren && this.ariaExpanded) {\n\t\t\tthis.closeSubMenu();\n\t\t}\n\t}\n\n\t@HostListener(\"blur\")\n\thandleBlur() {\n\t\tthis.tabindex = -1;\n\t}\n\n\tfocusItem() {\n\t\tthis.elementRef.nativeElement.focus();\n\t}\n\n\tngOnDestroy() {\n\t\tthis.subscriptions.unsubscribe();\n\t}\n}\n",
|
|
27117
27117
|
"assetsDirs": [],
|
|
27118
27118
|
"styleUrlsData": "",
|
|
27119
27119
|
"stylesData": "\n\t\t:host {\n\t\t\tgrid-template-columns: 1rem 1fr max-content;\n\t\t}\n\t\n",
|
|
@@ -27337,7 +27337,7 @@
|
|
|
27337
27337
|
},
|
|
27338
27338
|
{
|
|
27339
27339
|
"name": "DatePicker",
|
|
27340
|
-
"id": "component-DatePicker-
|
|
27340
|
+
"id": "component-DatePicker-8490dd4240f565f290d659bbb8a869d6c0ae0045fee29938a5a5250903ef50f8a50ec0c2caa40e5cbc6eb212dda2a912307666227d8310a3472430525d23c3ad",
|
|
27341
27341
|
"file": "src/datepicker/datepicker.component.ts",
|
|
27342
27342
|
"encapsulation": [
|
|
27343
27343
|
"ViewEncapsulation.None"
|
|
@@ -28018,7 +28018,7 @@
|
|
|
28018
28018
|
"description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { DatePickerModule } from 'carbon-components-angular';</code></pre></div><p><a href=\"../../?path=/story/components-date-picker--single\">See demo</a></p>\n",
|
|
28019
28019
|
"rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { DatePickerModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-date-picker--single)\n",
|
|
28020
28020
|
"type": "component",
|
|
28021
|
-
"sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tViewEncapsulation,\n\tElementRef,\n\tOnDestroy,\n\tHostListener,\n\tTemplateRef,\n\tOnChanges,\n\tSimpleChanges,\n\tAfterViewChecked,\n\tAfterViewInit,\n\tViewChild,\n\tOnInit,\n\tSimpleChange\n} from \"@angular/core\";\nimport rangePlugin from \"flatpickr/dist/plugins/rangePlugin\";\nimport flatpickr from \"flatpickr\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { carbonFlatpickrMonthSelectPlugin } from \"./carbon-flatpickr-month-select\";\nimport * as languages from \"flatpickr/dist/l10n/index\";\nimport { Options } from \"flatpickr/dist/types/options\";\nimport { DatePickerInput } from \"carbon-components-angular/datepicker-input\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * Due to type error, we have to use square brackets property accessor\n * There is a webpack issue when attempting to access exported languages from flatpickr l10n Angular 14+ apps\n * languages.default[locale] fails in app consuming CCA library but passes in test\n * languages.default.default[locale] fails in test but works in app consuming CCA library.\n *\n * To please both scenarios, we are adding a condition to prevent tests from failing\n */\nif (languages.default?.default[\"en\"]?.weekdays) {\n\t(languages.default.default[\"en\"].weekdays.shorthand as string[]) = languages.default.default[\"en\"].weekdays.longhand.map(day => {\n\t\tif (day === \"Thursday\") {\n\t\t\treturn \"Th\";\n\t\t}\n\t\treturn day.charAt(0);\n\t});\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { DatePickerModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-date-picker--single)\n */\n@Component({\n\tselector: \"cds-date-picker, ibm-date-picker\",\n\ttemplate: `\n\t<div class=\"cds--form-item\">\n\t\t<div\n\t\t\tclass=\"cds--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--date-picker--range' : range,\n\t\t\t\t'cds--date-picker--single' : !range,\n\t\t\t\t'cds--date-picker--light' : theme === 'light',\n\t\t\t\t'cds--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"cds--date-picker-container\">\n\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t#input\n\t\t\t\t\t[label]=\"label\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t[pattern]=\"inputPattern\"\n\t\t\t\t\t[id]=\"id + '-input'\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t[hasIcon]=\"(range ? false : true)\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t[warn]=\"warn\"\n\t\t\t\t\t[warnText]=\"warnText\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t\t(valueChange)=\"onValueChange($event)\"\n\t\t\t\t\t(click)=\"openCalendar(input)\">\n\t\t\t\t</cds-date-picker-input>\n\t\t\t</div>\n\n\t\t\t<div *ngIf=\"range\" class=\"cds--date-picker-container\">\n\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t#rangeInput\n\t\t\t\t\t[label]=\"rangeLabel\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t[pattern]=\"inputPattern\"\n\t\t\t\t\t[id]=\"id + '-rangeInput'\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t[hasIcon]=\"(range ? true : null)\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t[invalid]=\"rangeInvalid\"\n\t\t\t\t\t[invalidText]=\"rangeInvalidText\"\n\t\t\t\t\t[warn]=\"rangeWarn\"\n\t\t\t\t\t[warnText]=\"rangeWarnText\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"rangeHelperText\"\n\t\t\t\t\t(valueChange)=\"onRangeValueChange($event)\"\n\t\t\t\t\t(click)=\"openCalendar(rangeInput)\">\n\t\t\t\t</cds-date-picker-input>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: DatePicker,\n\t\t\tmulti: true\n\t\t}\n\t],\n\tencapsulation: ViewEncapsulation.None\n})\nexport class DatePicker implements\n\tOnInit,\n\tOnDestroy,\n\tOnChanges,\n\tAfterViewChecked,\n\tAfterViewInit {\n\tprivate static datePickerCount = 0;\n\n\t/**\n\t * Select calendar range mode\n\t */\n\t@Input() range = false;\n\n\t/**\n\t * Format of date\n\t *\n\t * For reference: https://flatpickr.js.org/formatting/\n\t */\n\t@Input() dateFormat = \"m/d/Y\";\n\n\t/**\n\t * Language of the flatpickr calendar.\n\t *\n\t * For reference of the possible locales:\n\t * https://github.com/flatpickr/flatpickr/blob/master/src/l10n/index.ts\n\t */\n\t@Input() language = \"en\";\n\n\t@Input() label: string | TemplateRef<any>;\n\t@Input() helperText: string | TemplateRef<any>;\n\t@Input() rangeHelperText: string | TemplateRef<any>;\n\t@Input() rangeLabel: string;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t/**\n\t * Aria label added to datepicker's calendar container.\n\t */\n\t@Input() ariaLabel = \"calendar container\";\n\n\t/**\n\t * The pattern for the underlying input element\n\t */\n\t@Input() inputPattern = \"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\";\n\n\t@Input() id = `datepicker-${DatePicker.datePickerCount++}`;\n\n\t@Input() set value(v: (Date | string)[]) {\n\t\tif (!v) {\n\t\t\tv = [];\n\t\t}\n\t\tthis._value = v;\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() disabled = false;\n\n\t@Input() readonly = false;\n\t/**\n\t * Set to `true` to display the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if datepicker is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Set to `true` to show a warning (contents set by warningText)\n\t */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Set to `true` to display the invalid state for the second datepicker input.\n\t */\n\t@Input() rangeInvalid = false;\n\t/**\n\t * Value displayed if the second datepicker input is in an invalid state.\n\t */\n\t@Input() rangeInvalidText: string | TemplateRef<any>;\n\t/**\n\t * Set to `true` to show a warning in the second datepicker input (contents set by rangeWarningText)\n\t */\n\t@Input() rangeWarn = false;\n\t/**\n\t * Sets the warning text for the second datepicker input\n\t */\n\t@Input() rangeWarnText: string | TemplateRef<any>;\n\n\t@Input() skeleton = false;\n\n\t@Input() plugins = [];\n\n\t@Input()\n\tset flatpickrOptions(options: Partial<Options>) {\n\t\tthis._flatpickrOptions = Object.assign({}, this._flatpickrOptions, options);\n\t}\n\tget flatpickrOptions(): Partial<Options> {\n\t\tconst plugins = [...this.plugins, carbonFlatpickrMonthSelectPlugin];\n\t\tif (this.range) {\n\t\t\tplugins.push(rangePlugin({ input: `#${this.id}-rangeInput`, position: \"left\" }));\n\t\t}\n\t\treturn Object.assign({}, this._flatpickrOptions, this.flatpickrBaseOptions, {\n\t\t\tmode: this.range ? \"range\" : \"single\",\n\t\t\tplugins,\n\t\t\tdateFormat: this.dateFormat,\n\t\t\tlocale: languages.default?.default[this.language] || languages.default[this.language],\n\t\t\t// Little trick force \"readonly mode\" on datepicker input.\n\t\t\t// Docs: Whether clicking on the input should open the picker.\n\t\t\t// You could disable this if you wish to open the calendar manually with.open().\n\t\t\tclickOpens: !this.readonly\n\t\t});\n\t}\n\n\t@ViewChild(\"input\", { static: true }) input: DatePickerInput;\n\t@ViewChild(\"rangeInput\") rangeInput: DatePickerInput;\n\n\t@Output() valueChange: EventEmitter<any> = new EventEmitter();\n\n\t/**\n\t * We are overriding onClose event even if users pass it via flatpickr options\n\t * Emits an event when date picker closes\n\t */\n\t@Output() onClose: EventEmitter<any> = new EventEmitter();\n\n\tprotected _value = [];\n\n\tprotected _flatpickrOptions: Partial<Options> = {\n\t\tallowInput: true\n\t};\n\n\tprotected flatpickrBaseOptions = {\n\t\tmode: \"single\",\n\t\tdateFormat: \"m/d/Y\",\n\t\tplugins: this.plugins,\n\t\tonOpen: () => {\n\t\t\tthis.updateClassNames();\n\t\t\tthis.updateAttributes();\n\t\t\tthis.updateCalendarListeners();\n\t\t},\n\t\tonClose: (date) => {\n\t\t\t// This makes sure that the `flatpickrInstance selectedDates` are in sync with the values of\n\t\t\t// the inputs when the calendar closes.\n\t\t\tif (this.range && this.flatpickrInstance) {\n\t\t\t\tconst inputValue = this.input.input.nativeElement.value;\n\t\t\t\tconst rangeInputValue = this.rangeInput.input.nativeElement.value;\n\t\t\t\tif (inputValue || rangeInputValue) {\n\t\t\t\t\tconst parseDate = (date: string) => this.flatpickrInstance.parseDate(date, this.dateFormat);\n\t\t\t\t\tthis.setDateValues([parseDate(inputValue), parseDate(rangeInputValue || inputValue)]);\n\t\t\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.onClose.emit(date);\n\t\t},\n\t\tonDayCreate: (_dObj, _dStr, _fp, dayElem) => {\n\t\t\tdayElem.classList.add(\"cds--date-picker__day\");\n\t\t},\n\t\tnextArrow: this.rightArrowHTML(),\n\t\tprevArrow: this.leftArrowHTML(),\n\t\tvalue: this.value\n\t};\n\n\tprotected flatpickrInstance = null;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected i18n: I18n\n\t) { }\n\n\tngOnInit() {\n\t\t// if i18n is set to anything other than en we'll want to change the language\n\t\t// otherwise we'll just use the local setting\n\t\tif (this.i18n.getLocale() !== \"en\") {\n\t\t\tthis.i18n.getLocaleObservable().subscribe(locale => {\n\t\t\t\tthis.language = locale;\n\t\t\t\tthis.resetFlatpickrInstance();\n\t\t\t});\n\t\t}\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\t// Reset the flatpickr instance on input changes that affect flatpickr.\n\t\tconst flatpickrChangeKeys = [\n\t\t\t\"range\",\n\t\t\t\"dateFormat\",\n\t\t\t\"language\",\n\t\t\t\"id\",\n\t\t\t\"value\",\n\t\t\t\"plugins\",\n\t\t\t\"flatpickrOptions\",\n\t\t\t\"readonly\"\n\t\t];\n\t\tconst changeKeys = Object.keys(changes);\n\t\tif (changeKeys.some(key => flatpickrChangeKeys.includes(key))) {\n\t\t\tthis.resetFlatpickrInstance(changes.value);\n\t\t}\n\t}\n\n\tngAfterViewInit() {\n\t\tif (!this.skeleton) {\n\t\t\tthis.input.input.nativeElement.value = this._value[0] ?? \"\";\n\t\t\tif (this.range) {\n\t\t\t\tthis.rangeInput.input.nativeElement.value = this._value[1] ?? \"\";\n\t\t\t}\n\t\t}\n\t\tsetTimeout(() => {\n\t\t\tthis.addInputListeners();\n\t\t}, 0);\n\t}\n\n\t// because the actual view may be delayed in loading (think projection into a tab pane)\n\t// and because we rely on a library that operates outside the Angular view of the world\n\t// we need to keep trying to load the library, until the relevant DOM is actually live\n\tngAfterViewChecked() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\t// if (and only if) the initialization succeeded, we can set the date values\n\t\t\tif (this.isFlatpickrLoaded()) {\n\t\t\t\tif (this.value.length > 0) {\n\t\t\t\t\tthis.setDateValues(this.value);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusin\")\n\tonFocus() {\n\t\t// Updates the month manually when calendar mode is range because month\n\t\t// will not update properly without manually updating them on focus.\n\t\tif (this.range) {\n\t\t\tif (this.rangeInput.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[1].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t} else if (this.input.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusout\")\n\tonFocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Writes a value from the model to the component. Expects the value to be `null` or `(Date | string)[]`\n\t * @param value value received from the model\n\t */\n\twriteValue(value: (Date | string)[]) {\n\t\tthis.value = value;\n\t\tsetTimeout(() => {\n\t\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.config) {\n\t\t\t\tthis.setDateValues(this.value);\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the DatePicker.\n\t *\n\t * ex: `this.formGroup.get(\"myDatePicker\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the DatePicker\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tonTouched: () => any = () => { };\n\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Cleans up our flatpickr instance\n\t */\n\tngOnDestroy() {\n\t\tif (!this.isFlatpickrLoaded()) { return; }\n\t\tthis.flatpickrInstance.destroy();\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the primary/single input\n\t */\n\tonValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tif (this.range) {\n\t\t\t\tthis.setDateValues([date, this.flatpickrInstance.selectedDates[1]]);\n\t\t\t} else {\n\t\t\t\tthis.setDateValues([date]);\n\t\t\t}\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the range input\n\t */\n\tonRangeValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.isOpen) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tthis.setDateValues([this.flatpickrInstance.selectedDates[0], date]);\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles opening the calendar \"properly\" when the calendar icon is clicked.\n\t */\n\topenCalendar(datepickerInput: DatePickerInput) {\n\t\tif (this.readonly || this.skeleton) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.range) {\n\t\t\tdatepickerInput.input.nativeElement.click();\n\n\t\t\t// If the first input's calendar icon is clicked when calendar is in range mode, then\n\t\t\t// the month and year needs to be manually changed to the current selected month and\n\t\t\t// year otherwise the calendar view will not be updated upon opening.\n\t\t\tif (datepickerInput === this.input && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t\tthis.flatpickrInstance.currentYear = this.flatpickrInstance.selectedDates[0].getFullYear();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t} else {\n\t\t\t// Single-mode flatpickr handles mousedown but not click, so nativeElement.click() won't\n\t\t\t// work when the calendar icon is clicked. In this case we simply use flatpickr.open().\n\t\t\tthis.flatpickrInstance.open();\n\t\t}\n\t}\n\n\tprotected updateCalendarListeners() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.removeEventListener(\"click\", this.preventCalendarClose);\n\t\t\tcalendar.addEventListener(\"click\", this.preventCalendarClose);\n\t\t});\n\t}\n\n\t/**\n\t * Handles the initialization of event listeners for the datepicker input and range input fields.\n\t */\n\tprotected addInputListeners() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Allows focus transition from the datepicker input or range input field to\n\t\t// flatpickr calendar using a keyboard.\n\t\tconst addFocusCalendarListener = (element: HTMLInputElement) => {\n\t\t\telement.addEventListener(\"keydown\", (event: KeyboardEvent) => {\n\t\t\t\t// Listeners are added just once, so a check is needed here.\n\t\t\t\tif (this.readonly) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (event.key === \"Escape\") {\n\t\t\t\t\tthis.flatpickrInstance.close();\n\t\t\t\t}\n\t\t\t\tif (event.key === \"ArrowDown\") {\n\t\t\t\t\tif (!this.flatpickrInstance.isOpen) {\n\t\t\t\t\t\tthis.flatpickrInstance.open();\n\t\t\t\t\t}\n\n\t\t\t\t\tconst calendarContainer = this.flatpickrInstance.calendarContainer;\n\t\t\t\t\tconst dayElement = calendarContainer && calendarContainer.querySelector(\".flatpickr-day[tabindex]\");\n\t\t\t\t\tconst selectedDateElem = calendarContainer && calendarContainer.querySelector('.selected');\n\t\t\t\t\tconst todayDateElem = calendarContainer && calendarContainer.querySelector('.today');\n\n\t\t\t\t\tif (dayElement) {\n\t\t\t\t\t\t(todayDateElem || selectedDateElem || dayElement).focus();\n\n\t\t\t\t\t\t// If the user manually inputs a value into the date field and presses arrow down,\n\t\t\t\t\t\t// datepicker input onchange will be triggered when focus is removed from it and\n\t\t\t\t\t\t// `flatpickrInstance.setDate` and `flatpickrInstance.changeMonth` will be invoked\n\t\t\t\t\t\t// which will automatically change focus to the beginning of the document.\n\t\t\t\t\t\tif (document.activeElement !== dayElement && this.flatpickrInstance.selectedDateElem) {\n\t\t\t\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\tif (this.input && this.input.input) {\n\t\t\taddFocusCalendarListener(this.input.input.nativeElement);\n\t\t}\n\n\t\tif (this.rangeInput && this.rangeInput.input) {\n\t\t\taddFocusCalendarListener(this.rangeInput.input.nativeElement);\n\t\t}\n\t}\n\n\t/**\n\t * Resets the flatpickr instance while keeping the date values (or updating them if newDates is provided)\n\t *\n\t * Used to pick up input changes or locale changes.\n\t *\n\t * @param newDates An optional SimpleChange of date values\n\t */\n\tprotected resetFlatpickrInstance(newDates?: SimpleChange) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tlet dates = this.flatpickrInstance.selectedDates;\n\t\t\tif (newDates && this.didDateValueChange(newDates.currentValue, newDates.previousValue)) {\n\t\t\t\tdates = newDates.currentValue;\n\t\t\t}\n\t\t\t// only reset the flatpickr instance on Input changes\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\tthis.setDateValues(dates);\n\t\t}\n\t}\n\n\t/**\n\t * Carbon uses a number of specific classnames for parts of the flatpickr - this idempotent method applies them if needed.\n\t */\n\tprotected updateClassNames() {\n\t\tif (!this.elementRef) { return; }\n\t\t// get all the possible flatpickrs in the document - we need to add classes to (potentially) all of them\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tconst monthContainer = document.querySelectorAll(\".flatpickr-month\");\n\t\tconst weekdaysContainer = document.querySelectorAll(\".flatpickr-weekdays\");\n\t\tconst weekdayContainer = document.querySelectorAll(\".flatpickr-weekday\");\n\t\tconst daysContainer = document.querySelectorAll(\".flatpickr-days\");\n\t\tconst dayContainer = document.querySelectorAll(\".flatpickr-day\");\n\n\t\t// add classes to lists of elements\n\t\tconst addClassIfNotExists = (classname: string, elementList: NodeListOf<Element>) => {\n\t\t\tArray.from(elementList).forEach(element => {\n\t\t\t\tif (!element.classList.contains(classname)) {\n\t\t\t\t\telement.classList.add(classname);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\t// add classes (but only if they don't exist, small perf win)\n\t\taddClassIfNotExists(\"cds--date-picker__calendar\", calendarContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__month\", monthContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__weekdays\", weekdaysContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__days\", daysContainer);\n\n\t\t// add weekday classes and format the text\n\t\tArray.from(weekdayContainer).forEach(element => {\n\t\t\telement.innerHTML = element.innerHTML.replace(/\\s+/g, \"\");\n\t\t\telement.classList.add(\"cds--date-picker__weekday\");\n\t\t});\n\n\t\t// add day classes and special case the \"today\" element based on `this.value`\n\t\tArray.from(dayContainer).forEach(element => {\n\t\t\telement.setAttribute('role', 'button');\n\t\t\telement.classList.add(\"cds--date-picker__day\");\n\t\t\tif (!this.value) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (element.classList.contains(\"today\") && this.value.length > 0) {\n\t\t\t\telement.classList.add(\"no-border\");\n\t\t\t} else if (element.classList.contains(\"today\") && this.value.length === 0) {\n\t\t\t\telement.classList.remove(\"no-border\");\n\t\t\t}\n\t\t});\n\t}\n\n\tprotected updateAttributes() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.setAttribute(\"role\", \"application\");\n\t\t\tcalendar.setAttribute(\"aria-label\", this.ariaLabel);\n\t\t});\n\t}\n\n\t/**\n\t * Applies the given date value array to both the flatpickr instance and the `input`(s)\n\t * @param dates the date values to apply\n\t */\n\tprotected setDateValues(dates: (Date | string)[]) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst singleInput = this.elementRef.nativeElement.querySelector(`#${this.id}-input`);\n\t\t\tconst rangeInput = this.elementRef.nativeElement.querySelector(`#${this.id}-rangeInput`);\n\n\t\t\t// `flatpickrInstance.setDate` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.setDate` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\t// set the date on the instance\n\t\t\tthis.flatpickrInstance.setDate(dates);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\tlet singleDate = \"\";\n\t\t\t// if date is a string, parse and format\n\t\t\tif (typeof this.flatpickrInstance.selectedDates[0] === \"string\") {\n\t\t\t\tsingleDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(singleDate, this.dateFormat);\n\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t} else if (!!this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t}\n\n\t\t\tif (rangeInput) {\n\t\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\t\tlet rangeDate = \"\";\n\t\t\t\t// if date is a string, parse and format\n\t\t\t\tif (typeof this.flatpickrInstance.selectedDates[1] === \"string\") {\n\t\t\t\t\trangeDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[1].toString(), this.dateFormat);\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(rangeDate, this.dateFormat);\n\t\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t\t} else if (!!this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[1], this.dateFormat);\n\t\t\t\t}\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t// apply the values\n\t\t\t\t\trangeInput.value = rangeDate;\n\t\t\t\t\tsingleInput.value = singleDate;\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t}\n\n\tprotected preventCalendarClose = event => event.stopPropagation();\n\n\tprotected doSelect(selectedValue: (Date | string)[]) {\n\t\t// In range mode, if a date is selected from the first calendar that is from the previous month,\n\t\t// the month will not be updated on the calendar until the calendar is re-opened.\n\t\t// This will make sure the calendar is updated with the correct month.\n\t\tif (this.range && this.flatpickrInstance.selectedDates[0]) {\n\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t// `flatpickrInstance.changeMonth` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.changeMonth` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t}\n\t\tthis.valueChange.emit(selectedValue);\n\t\tthis.propagateChange(selectedValue);\n\t}\n\n\tprotected didDateValueChange(currentValue, previousValue) {\n\t\treturn currentValue[0] !== previousValue[0] || currentValue[1] !== previousValue[1];\n\t}\n\n\t/**\n\t * More advanced checking of the loaded state of flatpickr\n\t */\n\tprotected isFlatpickrLoaded() {\n\t\t// cast the instance to a boolean, and some method that has to exist for the library to be loaded in this case `setDate`\n\t\treturn !!this.flatpickrInstance && !!this.flatpickrInstance.setDate;\n\t}\n\n\t/**\n\t * Right arrow HTML passed to flatpickr\n\t */\n\tprotected rightArrowHTML() {\n\t\treturn `\n\t\t\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n\t\t\t\t<polygon points=\"11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 \"/>\n\t\t\t\t<rect width=\"16\" height=\"16\" style=\"fill:none\" />\n\t\t\t</svg>`;\n\t}\n\n\t/**\n\t * Left arrow HTML passed to flatpickr\n\t */\n\tprotected leftArrowHTML() {\n\t\treturn `\n\t\t\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n\t\t\t\t<polygon points=\"5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 \"/>\n\t\t\t\t<rect width=\"16\" height=\"16\" style=\"fill:none\" />\n\t\t\t</svg>`;\n\t}\n}\n",
|
|
28021
|
+
"sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tViewEncapsulation,\n\tElementRef,\n\tOnDestroy,\n\tHostListener,\n\tTemplateRef,\n\tOnChanges,\n\tSimpleChanges,\n\tAfterViewChecked,\n\tAfterViewInit,\n\tViewChild,\n\tOnInit,\n\tSimpleChange\n} from \"@angular/core\";\nimport rangePlugin from \"flatpickr/dist/plugins/rangePlugin\";\nimport flatpickr from \"flatpickr\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { carbonFlatpickrMonthSelectPlugin } from \"./carbon-flatpickr-month-select\";\nimport * as languages from \"flatpickr/dist/l10n/index\";\nimport { Options } from \"flatpickr/dist/types/options\";\nimport { DatePickerInput } from \"carbon-components-angular/datepicker-input\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * Due to type error, we have to use square brackets property accessor\n * There is a webpack issue when attempting to access exported languages from flatpickr l10n Angular 14+ apps\n * languages.default[locale] fails in app consuming CCA library but passes in test\n * languages.default.default[locale] fails in test but works in app consuming CCA library.\n *\n * To please both scenarios, we are adding a condition to prevent tests from failing\n */\nif (languages.default?.default[\"en\"]?.weekdays) {\n\t(languages.default.default[\"en\"].weekdays.shorthand as string[]) = languages.default.default[\"en\"].weekdays.longhand.map(day => {\n\t\tif (day === \"Thursday\") {\n\t\t\treturn \"Th\";\n\t\t}\n\t\treturn day.charAt(0);\n\t});\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { DatePickerModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-date-picker--single)\n */\n@Component({\n\tselector: \"cds-date-picker, ibm-date-picker\",\n\ttemplate: `\n\t<div class=\"cds--form-item\">\n\t\t<div\n\t\t\tclass=\"cds--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--date-picker--range' : range,\n\t\t\t\t'cds--date-picker--single' : !range,\n\t\t\t\t'cds--date-picker--light' : theme === 'light',\n\t\t\t\t'cds--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"cds--date-picker-container\">\n\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t#input\n\t\t\t\t\t[label]=\"label\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t[pattern]=\"inputPattern\"\n\t\t\t\t\t[id]=\"id + '-input'\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t[hasIcon]=\"(range ? false : true)\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t[warn]=\"warn\"\n\t\t\t\t\t[warnText]=\"warnText\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t\t(valueChange)=\"onValueChange($event)\"\n\t\t\t\t\t(click)=\"openCalendar(input)\">\n\t\t\t\t</cds-date-picker-input>\n\t\t\t</div>\n\n\t\t\t<div *ngIf=\"range\" class=\"cds--date-picker-container\">\n\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t#rangeInput\n\t\t\t\t\t[label]=\"rangeLabel\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t[pattern]=\"inputPattern\"\n\t\t\t\t\t[id]=\"id + '-rangeInput'\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t[hasIcon]=\"(range ? true : null)\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t[invalid]=\"rangeInvalid\"\n\t\t\t\t\t[invalidText]=\"rangeInvalidText\"\n\t\t\t\t\t[warn]=\"rangeWarn\"\n\t\t\t\t\t[warnText]=\"rangeWarnText\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"rangeHelperText\"\n\t\t\t\t\t(valueChange)=\"onRangeValueChange($event)\"\n\t\t\t\t\t(click)=\"openCalendar(rangeInput)\">\n\t\t\t\t</cds-date-picker-input>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: DatePicker,\n\t\t\tmulti: true\n\t\t}\n\t],\n\tencapsulation: ViewEncapsulation.None\n})\nexport class DatePicker implements\n\tOnInit,\n\tOnDestroy,\n\tOnChanges,\n\tAfterViewChecked,\n\tAfterViewInit {\n\tprivate static datePickerCount = 0;\n\n\t/**\n\t * Select calendar range mode\n\t */\n\t@Input() range = false;\n\n\t/**\n\t * Format of date\n\t *\n\t * For reference: https://flatpickr.js.org/formatting/\n\t */\n\t@Input() dateFormat = \"m/d/Y\";\n\n\t/**\n\t * Language of the flatpickr calendar.\n\t *\n\t * For reference of the possible locales:\n\t * https://github.com/flatpickr/flatpickr/blob/master/src/l10n/index.ts\n\t */\n\t@Input() language = \"en\";\n\n\t@Input() label: string | TemplateRef<any>;\n\t@Input() helperText: string | TemplateRef<any>;\n\t@Input() rangeHelperText: string | TemplateRef<any>;\n\t@Input() rangeLabel: string;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t/**\n\t * Aria label added to datepicker's calendar container.\n\t */\n\t@Input() ariaLabel = \"calendar container\";\n\n\t/**\n\t * The pattern for the underlying input element\n\t */\n\t@Input() inputPattern = \"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\";\n\n\t@Input() id = `datepicker-${DatePicker.datePickerCount++}`;\n\n\t@Input() set value(v: (Date | string)[]) {\n\t\tif (!v) {\n\t\t\tv = [];\n\t\t}\n\t\tthis._value = v;\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() disabled = false;\n\n\t@Input() readonly = false;\n\t/**\n\t * Set to `true` to display the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if datepicker is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Set to `true` to show a warning (contents set by warningText)\n\t */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Set to `true` to display the invalid state for the second datepicker input.\n\t */\n\t@Input() rangeInvalid = false;\n\t/**\n\t * Value displayed if the second datepicker input is in an invalid state.\n\t */\n\t@Input() rangeInvalidText: string | TemplateRef<any>;\n\t/**\n\t * Set to `true` to show a warning in the second datepicker input (contents set by rangeWarningText)\n\t */\n\t@Input() rangeWarn = false;\n\t/**\n\t * Sets the warning text for the second datepicker input\n\t */\n\t@Input() rangeWarnText: string | TemplateRef<any>;\n\n\t@Input() skeleton = false;\n\n\t@Input() plugins = [];\n\n\t@Input()\n\tset flatpickrOptions(options: Partial<Options>) {\n\t\tthis._flatpickrOptions = Object.assign({}, this._flatpickrOptions, options);\n\t}\n\tget flatpickrOptions(): Partial<Options> {\n\t\tconst plugins = [...this.plugins, carbonFlatpickrMonthSelectPlugin];\n\t\tif (this.range) {\n\t\t\tplugins.push(rangePlugin({ input: `#${this.id}-rangeInput`, position: \"left\" }));\n\t\t}\n\t\treturn Object.assign({}, this._flatpickrOptions, this.flatpickrBaseOptions, {\n\t\t\tmode: this.range ? \"range\" : \"single\",\n\t\t\tplugins,\n\t\t\tdateFormat: this.dateFormat,\n\t\t\tlocale: languages.default?.default[this.language] || languages.default[this.language],\n\t\t\t// Little trick force \"readonly mode\" on datepicker input.\n\t\t\t// Docs: Whether clicking on the input should open the picker.\n\t\t\t// You could disable this if you wish to open the calendar manually with.open().\n\t\t\tclickOpens: !this.readonly\n\t\t});\n\t}\n\n\t@ViewChild(\"input\", { static: true }) input: DatePickerInput;\n\t@ViewChild(\"rangeInput\") rangeInput: DatePickerInput;\n\n\t@Output() valueChange: EventEmitter<any> = new EventEmitter();\n\n\t/**\n\t * We are overriding onClose event even if users pass it via flatpickr options\n\t * Emits an event when date picker closes\n\t */\n\t@Output() onClose: EventEmitter<any> = new EventEmitter();\n\n\tprotected _value = [];\n\n\tprotected _flatpickrOptions: Partial<Options> = {\n\t\tallowInput: true\n\t};\n\n\tprotected flatpickrBaseOptions = {\n\t\tmode: \"single\",\n\t\tdateFormat: \"m/d/Y\",\n\t\tplugins: this.plugins,\n\t\tonOpen: () => {\n\t\t\tthis.updateClassNames();\n\t\t\tthis.updateAttributes();\n\t\t\tthis.updateCalendarListeners();\n\t\t},\n\t\tonClose: (date) => {\n\t\t\t// This makes sure that the `flatpickrInstance selectedDates` are in sync with the values of\n\t\t\t// the inputs when the calendar closes.\n\t\t\tif (this.range && this.flatpickrInstance) {\n\t\t\t\tconst inputValue = this.input.input.nativeElement.value;\n\t\t\t\tconst rangeInputValue = this.rangeInput.input.nativeElement.value;\n\t\t\t\tif (inputValue || rangeInputValue) {\n\t\t\t\t\tconst parseDate = (date: string) => this.flatpickrInstance.parseDate(date, this.dateFormat);\n\t\t\t\t\tthis.setDateValues([parseDate(inputValue), parseDate(rangeInputValue || inputValue)]);\n\t\t\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.onClose.emit(date);\n\t\t},\n\t\tonDayCreate: (_dObj, _dStr, _fp, dayElem) => {\n\t\t\tdayElem.classList.add(\"cds--date-picker__day\");\n\t\t},\n\t\tnextArrow: this.rightArrowHTML(),\n\t\tprevArrow: this.leftArrowHTML(),\n\t\tvalue: this.value\n\t};\n\n\tprotected flatpickrInstance = null;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected i18n: I18n\n\t) { }\n\n\tngOnInit() {\n\t\t// if i18n is set to anything other than en we'll want to change the language\n\t\t// otherwise we'll just use the local setting\n\t\tif (this.i18n.getLocale() !== \"en\") {\n\t\t\tthis.i18n.getLocaleObservable().subscribe(locale => {\n\t\t\t\tthis.language = locale;\n\t\t\t\tthis.resetFlatpickrInstance();\n\t\t\t});\n\t\t}\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\t// Reset the flatpickr instance on input changes that affect flatpickr.\n\t\tconst flatpickrChangeKeys = [\n\t\t\t\"range\",\n\t\t\t\"dateFormat\",\n\t\t\t\"language\",\n\t\t\t\"id\",\n\t\t\t\"value\",\n\t\t\t\"plugins\",\n\t\t\t\"flatpickrOptions\",\n\t\t\t\"readonly\"\n\t\t];\n\t\tconst changeKeys = Object.keys(changes);\n\t\tif (changeKeys.some(key => flatpickrChangeKeys.includes(key))) {\n\t\t\tthis.resetFlatpickrInstance(changes.value);\n\t\t}\n\t}\n\n\tngAfterViewInit() {\n\t\tif (!this.skeleton) {\n\t\t\tthis.input.input.nativeElement.value = this._value[0] ?? \"\";\n\t\t\tif (this.range) {\n\t\t\t\tthis.rangeInput.input.nativeElement.value = this._value[1] ?? \"\";\n\t\t\t}\n\t\t}\n\t\tsetTimeout(() => {\n\t\t\tthis.addInputListeners();\n\t\t}, 0);\n\t}\n\n\t// because the actual view may be delayed in loading (think projection into a tab pane)\n\t// and because we rely on a library that operates outside the Angular view of the world\n\t// we need to keep trying to load the library, until the relevant DOM is actually live\n\tngAfterViewChecked() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\t// if (and only if) the initialization succeeded, we can set the date values\n\t\t\tif (this.isFlatpickrLoaded()) {\n\t\t\t\tif (this.value.length > 0) {\n\t\t\t\t\tthis.setDateValues(this.value);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusin\")\n\tonFocus() {\n\t\t// Updates the month manually when calendar mode is range because month\n\t\t// will not update properly without manually updating them on focus.\n\t\tif (this.range) {\n\t\t\tif (this.rangeInput.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[1].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t} else if (this.input.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusout\")\n\tonFocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Writes a value from the model to the component. Expects the value to be `null` or `(Date | string)[]`\n\t * @param value value received from the model\n\t */\n\twriteValue(value: (Date | string)[]) {\n\t\tthis.value = value;\n\t\tsetTimeout(() => {\n\t\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.config) {\n\t\t\t\tthis.setDateValues(this.value);\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the DatePicker.\n\t *\n\t * ex: `this.formGroup.get(\"myDatePicker\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the DatePicker\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tonTouched: () => any = () => { };\n\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Cleans up our flatpickr instance\n\t */\n\tngOnDestroy() {\n\t\tif (!this.isFlatpickrLoaded()) { return; }\n\t\tthis.flatpickrInstance.destroy();\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the primary/single input\n\t */\n\tonValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tif (this.range) {\n\t\t\t\tthis.setDateValues([date, this.flatpickrInstance.selectedDates[1]]);\n\t\t\t} else {\n\t\t\t\tthis.setDateValues([date]);\n\t\t\t}\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the range input\n\t */\n\tonRangeValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.isOpen) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tthis.setDateValues([this.flatpickrInstance.selectedDates[0], date]);\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles opening the calendar \"properly\" when the calendar icon is clicked.\n\t */\n\topenCalendar(datepickerInput: DatePickerInput) {\n\t\tif (this.readonly || this.skeleton) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.range) {\n\t\t\tdatepickerInput.input.nativeElement.click();\n\n\t\t\t// If the first input's calendar icon is clicked when calendar is in range mode, then\n\t\t\t// the month and year needs to be manually changed to the current selected month and\n\t\t\t// year otherwise the calendar view will not be updated upon opening.\n\t\t\tif (datepickerInput === this.input && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t\tthis.flatpickrInstance.currentYear = this.flatpickrInstance.selectedDates[0].getFullYear();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t} else {\n\t\t\t// Single-mode flatpickr handles mousedown but not click, so nativeElement.click() won't\n\t\t\t// work when the calendar icon is clicked. In this case we simply use flatpickr.open().\n\t\t\tthis.flatpickrInstance.open();\n\t\t}\n\t}\n\n\tprotected updateCalendarListeners() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.removeEventListener(\"click\", this.preventCalendarClose);\n\t\t\tcalendar.addEventListener(\"click\", this.preventCalendarClose);\n\t\t});\n\t}\n\n\t/**\n\t * Handles the initialization of event listeners for the datepicker input and range input fields.\n\t */\n\tprotected addInputListeners() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Allows focus transition from the datepicker input or range input field to\n\t\t// flatpickr calendar using a keyboard.\n\t\tconst addFocusCalendarListener = (element: HTMLInputElement) => {\n\t\t\telement.addEventListener(\"keydown\", (event: KeyboardEvent) => {\n\t\t\t\t// Listeners are added just once, so a check is needed here.\n\t\t\t\tif (this.readonly) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (event.key === \"Escape\") {\n\t\t\t\t\tthis.flatpickrInstance.close();\n\t\t\t\t}\n\t\t\t\tif (event.key === \"ArrowDown\") {\n\t\t\t\t\tif (!this.flatpickrInstance.isOpen) {\n\t\t\t\t\t\tthis.flatpickrInstance.open();\n\t\t\t\t\t}\n\n\t\t\t\t\tconst calendarContainer = this.flatpickrInstance.calendarContainer;\n\t\t\t\t\tconst dayElement = calendarContainer && calendarContainer.querySelector(\".flatpickr-day[tabindex]\");\n\t\t\t\t\tconst selectedDateElem = calendarContainer && calendarContainer.querySelector(\".selected\");\n\t\t\t\t\tconst todayDateElem = calendarContainer && calendarContainer.querySelector(\".today\");\n\n\t\t\t\t\tif (dayElement) {\n\t\t\t\t\t\t(todayDateElem || selectedDateElem || dayElement).focus();\n\n\t\t\t\t\t\t// If the user manually inputs a value into the date field and presses arrow down,\n\t\t\t\t\t\t// datepicker input onchange will be triggered when focus is removed from it and\n\t\t\t\t\t\t// `flatpickrInstance.setDate` and `flatpickrInstance.changeMonth` will be invoked\n\t\t\t\t\t\t// which will automatically change focus to the beginning of the document.\n\t\t\t\t\t\tif (document.activeElement !== dayElement && this.flatpickrInstance.selectedDateElem) {\n\t\t\t\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\tif (this.input && this.input.input) {\n\t\t\taddFocusCalendarListener(this.input.input.nativeElement);\n\t\t}\n\n\t\tif (this.rangeInput && this.rangeInput.input) {\n\t\t\taddFocusCalendarListener(this.rangeInput.input.nativeElement);\n\t\t}\n\t}\n\n\t/**\n\t * Resets the flatpickr instance while keeping the date values (or updating them if newDates is provided)\n\t *\n\t * Used to pick up input changes or locale changes.\n\t *\n\t * @param newDates An optional SimpleChange of date values\n\t */\n\tprotected resetFlatpickrInstance(newDates?: SimpleChange) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tlet dates = this.flatpickrInstance.selectedDates;\n\t\t\tif (newDates && this.didDateValueChange(newDates.currentValue, newDates.previousValue)) {\n\t\t\t\tdates = newDates.currentValue;\n\t\t\t}\n\t\t\t// only reset the flatpickr instance on Input changes\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\tthis.setDateValues(dates);\n\t\t}\n\t}\n\n\t/**\n\t * Carbon uses a number of specific classnames for parts of the flatpickr - this idempotent method applies them if needed.\n\t */\n\tprotected updateClassNames() {\n\t\tif (!this.elementRef) { return; }\n\t\t// get all the possible flatpickrs in the document - we need to add classes to (potentially) all of them\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tconst monthContainer = document.querySelectorAll(\".flatpickr-month\");\n\t\tconst weekdaysContainer = document.querySelectorAll(\".flatpickr-weekdays\");\n\t\tconst weekdayContainer = document.querySelectorAll(\".flatpickr-weekday\");\n\t\tconst daysContainer = document.querySelectorAll(\".flatpickr-days\");\n\t\tconst dayContainer = document.querySelectorAll(\".flatpickr-day\");\n\n\t\t// add classes to lists of elements\n\t\tconst addClassIfNotExists = (classname: string, elementList: NodeListOf<Element>) => {\n\t\t\tArray.from(elementList).forEach(element => {\n\t\t\t\tif (!element.classList.contains(classname)) {\n\t\t\t\t\telement.classList.add(classname);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\t// add classes (but only if they don't exist, small perf win)\n\t\taddClassIfNotExists(\"cds--date-picker__calendar\", calendarContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__month\", monthContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__weekdays\", weekdaysContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__days\", daysContainer);\n\n\t\t// add weekday classes and format the text\n\t\tArray.from(weekdayContainer).forEach(element => {\n\t\t\telement.innerHTML = element.innerHTML.replace(/\\s+/g, \"\");\n\t\t\telement.classList.add(\"cds--date-picker__weekday\");\n\t\t});\n\n\t\t// add day classes and special case the \"today\" element based on `this.value`\n\t\tArray.from(dayContainer).forEach(element => {\n\t\t\telement.setAttribute(\"role\", \"button\");\n\t\t\telement.classList.add(\"cds--date-picker__day\");\n\t\t\tif (!this.value) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (element.classList.contains(\"today\") && this.value.length > 0) {\n\t\t\t\telement.classList.add(\"no-border\");\n\t\t\t} else if (element.classList.contains(\"today\") && this.value.length === 0) {\n\t\t\t\telement.classList.remove(\"no-border\");\n\t\t\t}\n\t\t});\n\t}\n\n\tprotected updateAttributes() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.setAttribute(\"role\", \"application\");\n\t\t\tcalendar.setAttribute(\"aria-label\", this.ariaLabel);\n\t\t});\n\t}\n\n\t/**\n\t * Applies the given date value array to both the flatpickr instance and the `input`(s)\n\t * @param dates the date values to apply\n\t */\n\tprotected setDateValues(dates: (Date | string)[]) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst singleInput = this.elementRef.nativeElement.querySelector(`#${this.id}-input`);\n\t\t\tconst rangeInput = this.elementRef.nativeElement.querySelector(`#${this.id}-rangeInput`);\n\n\t\t\t// `flatpickrInstance.setDate` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.setDate` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\t// set the date on the instance\n\t\t\tthis.flatpickrInstance.setDate(dates);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\tlet singleDate = \"\";\n\t\t\t// if date is a string, parse and format\n\t\t\tif (typeof this.flatpickrInstance.selectedDates[0] === \"string\") {\n\t\t\t\tsingleDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(singleDate, this.dateFormat);\n\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t} else if (!!this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t}\n\n\t\t\tif (rangeInput) {\n\t\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\t\tlet rangeDate = \"\";\n\t\t\t\t// if date is a string, parse and format\n\t\t\t\tif (typeof this.flatpickrInstance.selectedDates[1] === \"string\") {\n\t\t\t\t\trangeDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[1].toString(), this.dateFormat);\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(rangeDate, this.dateFormat);\n\t\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t\t} else if (!!this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[1], this.dateFormat);\n\t\t\t\t}\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t// apply the values\n\t\t\t\t\trangeInput.value = rangeDate;\n\t\t\t\t\tsingleInput.value = singleDate;\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t}\n\n\tprotected preventCalendarClose = event => event.stopPropagation();\n\n\tprotected doSelect(selectedValue: (Date | string)[]) {\n\t\t// In range mode, if a date is selected from the first calendar that is from the previous month,\n\t\t// the month will not be updated on the calendar until the calendar is re-opened.\n\t\t// This will make sure the calendar is updated with the correct month.\n\t\tif (this.range && this.flatpickrInstance.selectedDates[0]) {\n\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t// `flatpickrInstance.changeMonth` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.changeMonth` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t}\n\t\tthis.valueChange.emit(selectedValue);\n\t\tthis.propagateChange(selectedValue);\n\t}\n\n\tprotected didDateValueChange(currentValue, previousValue) {\n\t\treturn currentValue[0] !== previousValue[0] || currentValue[1] !== previousValue[1];\n\t}\n\n\t/**\n\t * More advanced checking of the loaded state of flatpickr\n\t */\n\tprotected isFlatpickrLoaded() {\n\t\t// cast the instance to a boolean, and some method that has to exist for the library to be loaded in this case `setDate`\n\t\treturn !!this.flatpickrInstance && !!this.flatpickrInstance.setDate;\n\t}\n\n\t/**\n\t * Right arrow HTML passed to flatpickr\n\t */\n\tprotected rightArrowHTML() {\n\t\treturn `\n\t\t\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n\t\t\t\t<polygon points=\"11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 \"/>\n\t\t\t\t<rect width=\"16\" height=\"16\" style=\"fill:none\" />\n\t\t\t</svg>`;\n\t}\n\n\t/**\n\t * Left arrow HTML passed to flatpickr\n\t */\n\tprotected leftArrowHTML() {\n\t\treturn `\n\t\t\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n\t\t\t\t<polygon points=\"5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 \"/>\n\t\t\t\t<rect width=\"16\" height=\"16\" style=\"fill:none\" />\n\t\t\t</svg>`;\n\t}\n}\n",
|
|
28022
28022
|
"assetsDirs": [],
|
|
28023
28023
|
"styleUrlsData": "",
|
|
28024
28024
|
"stylesData": "",
|
|
@@ -38434,7 +38434,7 @@
|
|
|
38434
38434
|
},
|
|
38435
38435
|
{
|
|
38436
38436
|
"name": "MockQueryCombobox",
|
|
38437
|
-
"id": "component-MockQueryCombobox-
|
|
38437
|
+
"id": "component-MockQueryCombobox-0aa6a59d20da3dbd55a5faa6326bd9712ddf9fa070499d3201edac39f9fe471269cf0c44744a8831c0283e815c44810e0ca0448d1be8120c85d38504019b09db",
|
|
38438
38438
|
"file": "src/combobox/stories/app-mock-query-search.component.ts",
|
|
38439
38439
|
"encapsulation": [],
|
|
38440
38440
|
"entryComponents": [],
|
|
@@ -38520,7 +38520,7 @@
|
|
|
38520
38520
|
"description": "",
|
|
38521
38521
|
"rawdescription": "\n",
|
|
38522
38522
|
"type": "component",
|
|
38523
|
-
"sourceCode": "import { Component } from \"@angular/core\";\n\n@Component({\n\tselector: \"app-mock-query-search\",\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\tappendInline=\"true\"\n\t\t\t[items]=\"filterItems\"\n\t\t\t(search)=\"onSearch($event)\"\n\t\t\t(selected)=\"selected($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t`\n})\nexport class MockQueryCombobox {\n\tfilterItems: any = [];\n\tcurrentlySelected: any;\n\n\tonSearch() {\n\t\t// Call API or search through items list\n\t\tsetTimeout(() => {\n\t\t\tconst array = [\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` }
|
|
38523
|
+
"sourceCode": "import { Component } from \"@angular/core\";\n\n@Component({\n\tselector: \"app-mock-query-search\",\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\tappendInline=\"true\"\n\t\t\t[items]=\"filterItems\"\n\t\t\t(search)=\"onSearch($event)\"\n\t\t\t(selected)=\"selected($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t`\n})\nexport class MockQueryCombobox {\n\tfilterItems: any = [];\n\tcurrentlySelected: any;\n\n\tonSearch() {\n\t\t// Call API or search through items list\n\t\tsetTimeout(() => {\n\t\t\tconst array = [\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` }\n\t\t\t];\n\n\t\t\t// Include current selected in the list to avoid auto clear\n\t\t\tif (this.currentlySelected) {\n\t\t\t\tarray.push(this.currentlySelected);\n\t\t\t}\n\t\t\tthis.filterItems = array;\n\t\t}, 1000);\n\t}\n\n\tselected(event: any) {\n\t\t/**\n\t\t * #ref-1245723\n\t\t * Update this on major release\n\t\t */\n\t\tif (Array.isArray(event) && !event.length) {\n\t\t\tthis.currentlySelected = undefined;\n\t\t} else {\n\t\t\tthis.currentlySelected = event;\n\t\t}\n\t}\n}\n",
|
|
38524
38524
|
"assetsDirs": [],
|
|
38525
38525
|
"styleUrlsData": "",
|
|
38526
38526
|
"stylesData": "",
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[4292],{"./src/context-menu/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{GI:()=>ContextMenuComponent,uh:()=>ContextMenuDividerComponent,Zp:()=>ContextMenuGroupComponent,qX:()=>ContextMenuItemComponent,vI:()=>ContextMenuModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),icon=__webpack_require__("./src/icon/index.ts");let ContextMenuDividerComponent=class ContextMenuDividerComponent{constructor(){this.dividerClass=!0,this.role="separator"}};ContextMenuDividerComponent.propDecorators={dividerClass:[{type:core.HostBinding,args:["class.cds--menu-item-divider"]}],role:[{type:core.HostBinding,args:["attr.role"]}]},ContextMenuDividerComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-menu-divider, cds-context-menu-divider, ibm-context-menu-divider",template:""})],ContextMenuDividerComponent);var Subscription=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/Subscription.js"),ReplaySubject=__webpack_require__("./node_modules/rxjs/dist/esm5/internal/ReplaySubject.js");let ContextMenuSelectionService=class ContextMenuSelectionService{constructor(){this.selectionSubject=new ReplaySubject.t(1),this.value=[],this.selectionObservable=this.selectionSubject.asObservable()}selectRadio(value){value&&(this.selectionSubject.next(value),this.value=[value])}selectCheckbox(value){value&&(this.value.includes(value)?this.value=this.value.filter((v=>v!==value)):this.value.push(value),this.selectionSubject.next(this.value))}selectCheckboxes(value){value&&(this.value=value,this.selectionSubject.next(value))}};ContextMenuSelectionService.ctorParameters=()=>[],ContextMenuSelectionService=(0,tslib_es6.gn)([(0,core.Injectable)()],ContextMenuSelectionService);let ContextMenuGroupComponent=class ContextMenuGroupComponent{constructor(contextMenuSelectionService){this.contextMenuSelectionService=contextMenuSelectionService,this.role="group",this.label=null,this.value=[],this.type=null,this.valueChange=new core.EventEmitter,this.subscription=new Subscription.w0}get radioGroup(){return"radio"===this.type}get group(){return"checkbox"===this.type}ngOnInit(){const{selectionObservable}=this.contextMenuSelectionService,subscription=selectionObservable.subscribe((value=>{this.valueChange.emit(value)}));this.subscription.add(subscription)}ngOnChanges(changes){changes.value&&("radio"===this.type&&this.contextMenuSelectionService.selectRadio(changes.value.currentValue),"checkbox"===this.type&&this.contextMenuSelectionService.selectCheckboxes(changes.value.currentValue))}ngOnDestroy(){this.subscription.unsubscribe()}};ContextMenuGroupComponent.ctorParameters=()=>[{type:ContextMenuSelectionService}],ContextMenuGroupComponent.propDecorators={role:[{type:core.HostBinding,args:["attr.role"]}],radioGroup:[{type:core.HostBinding,args:["class.cds--menu-item-radio-group"]}],group:[{type:core.HostBinding,args:["class.cds--menu-item-group"]}],label:[{type:core.HostBinding,args:["attr.aria-label"]},{type:core.Input}],value:[{type:core.Input}],type:[{type:core.Input}],valueChange:[{type:core.Output}]},ContextMenuGroupComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-menu-group, cds-context-menu-group, ibm-context-menu-group",template:"\n\t\t<ng-content></ng-content>\n\t",providers:[ContextMenuSelectionService]})],ContextMenuGroupComponent);let ContextMenuComponent=class ContextMenuComponent{constructor(elementRef){this.elementRef=elementRef,this.open=!1,this.position={left:0,top:0},this.size="lg",this.role="menu",this.tabindex="-1",this.iconClass=!1}get hostClass(){const open=this.open?"cds--menu--open cds--menu--shown":"";return`cds--menu cds--autoalign cds--menu--${this.size} ${open}`}get leftPosition(){return this.position.left}get topPosition(){return this.position.top}ngOnChanges(changes){changes.open&&changes.open.currentValue&&this.focusMenu()}ngAfterViewInit(){setTimeout((()=>{const nativeElement=this.elementRef.nativeElement;nativeElement&&(this.iconClass=!!nativeElement.querySelector(".cds--menu-item .cds--menu-item__icon svg"))}))}focusMenu(){setTimeout((()=>{this.elementRef.nativeElement.querySelector(".cds--menu-item").focus()}))}handleNavigation(event){const list=this.elementRef.nativeElement,subMenus=Array.from(list.querySelectorAll("cds-context-menu[role=menu]")),menuItems=Array.from(list.querySelectorAll(".cds--menu-item")).filter((menuItem=>!subMenus.some((subMenu=>subMenu.contains(menuItem))))),currentIndex=menuItems.findIndex((menuItem=>0===parseInt(menuItem.getAttribute("tabindex"),10))),currentMenuItem=menuItems[currentIndex];switch(event.key){case"ArrowDown":document.activeElement===list?menuItems[0].focus():-1!==currentIndex&¤tIndex<menuItems.length-1&&menuItems[currentIndex+1].focus();break;case"ArrowUp":document.activeElement===list?menuItems[menuItems.length-1].focus():-1!==currentIndex&¤tIndex>0&&menuItems[currentIndex-1].focus();break;case"ArrowRight":-1!==currentIndex&&subMenus.some((subMenu=>currentMenuItem.contains(subMenu)))&¤tMenuItem.click();break;case"ArrowLeft":{const parent=currentMenuItem.parentElement.closest(".cds--menu-item, .cds--menu-item");parent&&parent.focus();break}}}};ContextMenuComponent.ctorParameters=()=>[{type:core.ElementRef}],ContextMenuComponent.propDecorators={open:[{type:core.Input}],position:[{type:core.Input}],size:[{type:core.Input}],hostClass:[{type:core.HostBinding,args:["class"]}],role:[{type:core.HostBinding,args:["attr.role"]}],tabindex:[{type:core.HostBinding,args:["attr.tabindex"]}],leftPosition:[{type:core.HostBinding,args:["style.left.px"]}],topPosition:[{type:core.HostBinding,args:["style.top.px"]}],iconClass:[{type:core.HostBinding,args:["class.cds--menu--with-icons"]}],handleNavigation:[{type:core.HostListener,args:["keydown",["$event"]]}]},ContextMenuComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-menu, cds-context-menu, ibm-context-menu",template:"\n\t\t\t<ng-content></ng-content>\n\t",styles:["\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t"]})],ContextMenuComponent);let ContextMenuItemComponent=class ContextMenuItemComponent{constructor(elementRef,contextMenuSelectionService){this.elementRef=elementRef,this.contextMenuSelectionService=contextMenuSelectionService,this.optionClass=!0,this.role="menuitem",this.tabindex=-1,this.ariaHasPopup=null,this.ariaExpanded=null,this.disabled=!1,this.danger=!1,this.label="",this.info="",this.type=null,this.checked=!1,this.icon="",this.value="",this.checkedChange=new core.EventEmitter,this.itemClick=new core.EventEmitter,this.hasChildren=!1,this.selectable=!1,this.subscriptions=new Subscription.w0}get ariaChecked(){return"checkbox"===this.type?!!this.checked:null}get ariaDisabled(){return this.disabled}ngOnInit(){switch(this.type){case"checkbox":this.role="menuitemcheckbox",this.selectable=!0;break;case"radio":this.role="menuitemradio",this.selectable=!0;break;default:this.role="menuitem"}if(this.type&&this.contextMenuSelectionService&&this.value){const{selectionObservable}=this.contextMenuSelectionService,subscription=selectionObservable.subscribe((value=>{"radio"===this.type&&this.handleSelection(value===this.value),"checkbox"===this.type&&this.handleSelection(value.includes(this.value))}));this.subscriptions.add(subscription)}}ngAfterContentInit(){this.childContextMenu&&(this.hasChildren=!0,this.ariaHasPopup=!0,this.ariaExpanded=!1)}handleClick(event){event.stopPropagation(),this.disabled||(this.hasChildren&&(this.openSubMenu(),this.childContextMenu.focusMenu()),this.type&&this.handleSelection(!this.checked),this.contextMenuSelectionService&&("radio"===this.type&&this.contextMenuSelectionService.selectRadio(this.value),"checkbox"===this.type&&this.contextMenuSelectionService.selectCheckbox(this.value)),this.disabled||this.itemClick.emit({event,label:this.label,info:this.info,value:this.value,type:this.type}))}handleSelection(selected){this.checked=selected,this.checkedChange.emit(this.checked)}openSubMenu(){if(this.childContextMenu){this.childContextMenu.open=!0,this.ariaExpanded=!0;const dimensions=this.elementRef.nativeElement.getBoundingClientRect();this.childContextMenu.position.left=dimensions.left+dimensions.width,this.childContextMenu.position.top=dimensions.top-4}}closeSubMenu(){this.childContextMenu&&(this.childContextMenu.open=!1,this.ariaExpanded=!1)}handleMouseOver(){this.openSubMenu()}handleMouseOut(){this.closeSubMenu()}handleFocus(){this.tabindex=0,this.hasChildren&&this.ariaExpanded&&this.closeSubMenu()}handleBlur(){this.tabindex=-1}focusItem(){this.elementRef.nativeElement.focus()}ngOnDestroy(){this.subscriptions.unsubscribe()}};ContextMenuItemComponent.ctorParameters=()=>[{type:core.ElementRef},{type:ContextMenuSelectionService,decorators:[{type:core.Optional}]}],ContextMenuItemComponent.propDecorators={optionClass:[{type:core.HostBinding,args:["class.cds--menu-item"]}],role:[{type:core.HostBinding,args:["attr.role"]}],tabindex:[{type:core.HostBinding,args:["attr.tabindex"]}],ariaHasPopup:[{type:core.HostBinding,args:["attr.aria-haspopup"]}],ariaExpanded:[{type:core.HostBinding,args:["attr.aria-expanded"]}],ariaChecked:[{type:core.HostBinding,args:["attr.aria-checked"]}],ariaDisabled:[{type:core.HostBinding,args:["attr.aria-disabled"]}],disabled:[{type:core.Input},{type:core.HostBinding,args:["class.cds--menu-item--disabled"]}],danger:[{type:core.Input},{type:core.HostBinding,args:["class.cds--menu-item--danger"]}],label:[{type:core.Input}],info:[{type:core.Input}],type:[{type:core.Input}],checked:[{type:core.Input}],icon:[{type:core.Input}],value:[{type:core.Input}],checkedChange:[{type:core.Output}],itemClick:[{type:core.Output}],childContextMenu:[{type:core.ContentChild,args:[ContextMenuComponent,{static:!0}]}],handleClick:[{type:core.HostListener,args:["keydown.enter",["$event"]]},{type:core.HostListener,args:["keydown.space",["$event"]]},{type:core.HostListener,args:["click",["$event"]]}],handleMouseOver:[{type:core.HostListener,args:["mouseover"]}],handleMouseOut:[{type:core.HostListener,args:["mouseout"]}],handleFocus:[{type:core.HostListener,args:["focus"]}],handleBlur:[{type:core.HostListener,args:["blur"]}]},ContextMenuItemComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-menu-item, cds-context-menu-item, ibm-context-menu-item",template:'\n\t\t<div class="cds--menu-item__icon">\n\t\t\t<svg *ngIf="selectable && checked" cdsIcon="checkmark" size="16"></svg>\n\t\t\t<svg *ngIf="!selectable && icon" [cdsIcon]="icon" size="16"></svg>\n\t\t</div>\n\t\t<div class="cds--menu-item__label" [title]="label">{{label}}</div>\n\t\t<div class="cds--menu-item__shortcut">\n\t\t\t<ng-container *ngIf="info">{{info}}</ng-container>\n\t\t\t<svg *ngIf="hasChildren" cdsIcon="caret--right" size="16"></svg>\n\t\t</div>\n\t\t<ng-content></ng-content>\n\t',styles:["\n\t\t:host {\n\t\t\tgrid-template-columns: 1rem 1fr max-content;\n\t\t}\n\t"]})],ContextMenuItemComponent);let ContextMenuModule=class ContextMenuModule{};ContextMenuModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[ContextMenuDividerComponent,ContextMenuGroupComponent,ContextMenuItemComponent,ContextMenuComponent],exports:[ContextMenuDividerComponent,ContextMenuGroupComponent,ContextMenuItemComponent,ContextMenuComponent],imports:[common.CommonModule,icon.QX]})],ContextMenuModule)},"./src/icon/icon.directive.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{a:()=>IconDirective});var tslib__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/tslib/tslib.es6.js"),_angular_core__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),_icon_service__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/icon/icon.service.ts"),_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@carbon/icon-helpers/es/index.js");let IconDirective=class IconDirective{constructor(elementRef,iconService){this.elementRef=elementRef,this.iconService=iconService,this.cdsIcon="",this.size="16",this.title="",this.ariaLabel="",this.ariaLabelledBy="",this.ariaHidden="",this.isFocusable=!1}set ibmIcon(iconName){this.cdsIcon=iconName}renderIcon(iconName){const root=this.elementRef.nativeElement;let icon;try{icon=this.iconService.get(iconName,this.size.toString())}catch(error){return void console.warn(error)}const domParser=new DOMParser,rawSVG=icon.svg,svgElement=domParser.parseFromString(rawSVG,"image/svg+xml").documentElement;let node="SVG"!==root.tagName.toUpperCase()?svgElement:svgElement.firstChild;for(root.innerHTML="";node;)root.appendChild(root.ownerDocument.importNode(node,!0)),node=node.nextSibling;const svg="SVG"!==root.tagName.toUpperCase()?svgElement:root,xmlns="http://www.w3.org/2000/svg";svg.setAttribute("xmlns",xmlns);const attributes=(0,_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_1__.u9)({width:icon.attrs.width,height:icon.attrs.height,viewBox:icon.attrs.viewBox,title:this.title,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledBy,"aria-hidden":this.ariaHidden,focusable:this.isFocusable.toString(),fill:icon.attrs.fill}),attrKeys=Object.keys(attributes);for(let i=0;i<attrKeys.length;i++){const key=attrKeys[i],value=attributes[key];"title"!==key&&(value&&svg.setAttribute(key,value))}if(attributes.title){const title=document.createElementNS(xmlns,"title");title.textContent=attributes.title,IconDirective.titleIdCounter++,title.setAttribute("id",`${icon.name}-title-${IconDirective.titleIdCounter}`),svg.insertBefore(title,svg.firstElementChild),svg.setAttribute("aria-labelledby",`${icon.name}-title-${IconDirective.titleIdCounter}`)}}ngAfterViewInit(){this.renderIcon(this.cdsIcon)}ngOnChanges({cdsIcon}){cdsIcon&&!cdsIcon.isFirstChange()&&this.renderIcon(this.cdsIcon)}};IconDirective.titleIdCounter=0,IconDirective.ctorParameters=()=>[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.ElementRef},{type:_icon_service__WEBPACK_IMPORTED_MODULE_0__.C6}],IconDirective.propDecorators={ibmIcon:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],cdsIcon:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],size:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],title:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],ariaLabel:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],ariaLabelledBy:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],ariaHidden:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],isFocusable:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}]},IconDirective=(0,tslib__WEBPACK_IMPORTED_MODULE_3__.gn)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_2__.Directive)({selector:"[cdsIcon], [ibmIcon]"})],IconDirective)},"./src/icon/icon.module.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{QX:()=>IconModule});var tslib__WEBPACK_IMPORTED_MODULE_58__=__webpack_require__("./node_modules/tslib/tslib.es6.js"),_angular_core__WEBPACK_IMPORTED_MODULE_57__=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),_angular_common__WEBPACK_IMPORTED_MODULE_59__=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),_icon_directive__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/icon/icon.directive.ts"),_icon_service__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/icon/icon.service.ts"),_carbon_icons_es_add_16__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@carbon/icons/es/add/16.js"),_carbon_icons_es_add_20__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@carbon/icons/es/add/20.js"),_carbon_icons_es_bee_16__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@carbon/icons/es/bee/16.js"),_carbon_icons_es_bee_20__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@carbon/icons/es/bee/20.js"),_carbon_icons_es_calendar_16__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@carbon/icons/es/calendar/16.js"),_carbon_icons_es_carbon_16__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@carbon/icons/es/carbon/16.js"),_carbon_icons_es_carbon_20__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/@carbon/icons/es/carbon/20.js"),_carbon_icons_es_caret_down_16__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./node_modules/@carbon/icons/es/caret--down/16.js"),_carbon_icons_es_caret_left_16__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./node_modules/@carbon/icons/es/caret--left/16.js"),_carbon_icons_es_caret_right_16__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__("./node_modules/@carbon/icons/es/caret--right/16.js"),_carbon_icons_es_caret_up_16__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("./node_modules/@carbon/icons/es/caret--up/16.js"),_carbon_icons_es_checkmark_16__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark/16.js"),_carbon_icons_es_checkmark_filled_16__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark--filled/16.js"),_carbon_icons_es_checkmark_filled_20__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark--filled/20.js"),_carbon_icons_es_checkmark_outline_16__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark--outline/16.js"),_carbon_icons_es_checkbox_16__WEBPACK_IMPORTED_MODULE_17__=__webpack_require__("./node_modules/@carbon/icons/es/checkbox/16.js"),_carbon_icons_es_checkbox_checked_filled_16__WEBPACK_IMPORTED_MODULE_18__=__webpack_require__("./node_modules/@carbon/icons/es/checkbox--checked--filled/16.js"),_carbon_icons_es_chevron_down_16__WEBPACK_IMPORTED_MODULE_19__=__webpack_require__("./node_modules/@carbon/icons/es/chevron--down/16.js"),_carbon_icons_es_chevron_right_16__WEBPACK_IMPORTED_MODULE_20__=__webpack_require__("./node_modules/@carbon/icons/es/chevron--right/16.js"),_carbon_icons_es_circle_dash_16__WEBPACK_IMPORTED_MODULE_21__=__webpack_require__("./node_modules/@carbon/icons/es/circle-dash/16.js"),_carbon_icons_es_close_16__WEBPACK_IMPORTED_MODULE_22__=__webpack_require__("./node_modules/@carbon/icons/es/close/16.js"),_carbon_icons_es_close_20__WEBPACK_IMPORTED_MODULE_23__=__webpack_require__("./node_modules/@carbon/icons/es/close/20.js"),_carbon_icons_es_copy_16__WEBPACK_IMPORTED_MODULE_24__=__webpack_require__("./node_modules/@carbon/icons/es/copy/16.js"),_carbon_icons_es_copy_20__WEBPACK_IMPORTED_MODULE_25__=__webpack_require__("./node_modules/@carbon/icons/es/copy/20.js"),_carbon_icons_es_data_2_16__WEBPACK_IMPORTED_MODULE_26__=__webpack_require__("./node_modules/@carbon/icons/es/data--2/16.js"),_carbon_icons_es_data_2_20__WEBPACK_IMPORTED_MODULE_27__=__webpack_require__("./node_modules/@carbon/icons/es/data--2/20.js"),_carbon_icons_es_document_16__WEBPACK_IMPORTED_MODULE_28__=__webpack_require__("./node_modules/@carbon/icons/es/document/16.js"),_carbon_icons_es_document_20__WEBPACK_IMPORTED_MODULE_29__=__webpack_require__("./node_modules/@carbon/icons/es/document/20.js"),_carbon_icons_es_download_16__WEBPACK_IMPORTED_MODULE_30__=__webpack_require__("./node_modules/@carbon/icons/es/download/16.js"),_carbon_icons_es_error_filled_16__WEBPACK_IMPORTED_MODULE_31__=__webpack_require__("./node_modules/@carbon/icons/es/error--filled/16.js"),_carbon_icons_es_error_filled_20__WEBPACK_IMPORTED_MODULE_32__=__webpack_require__("./node_modules/@carbon/icons/es/error--filled/20.js"),_carbon_icons_es_fade_16__WEBPACK_IMPORTED_MODULE_33__=__webpack_require__("./node_modules/@carbon/icons/es/fade/16.js"),_carbon_icons_es_fade_20__WEBPACK_IMPORTED_MODULE_34__=__webpack_require__("./node_modules/@carbon/icons/es/fade/20.js"),_carbon_icons_es_folder_16__WEBPACK_IMPORTED_MODULE_35__=__webpack_require__("./node_modules/@carbon/icons/es/folder/16.js"),_carbon_icons_es_incomplete_16__WEBPACK_IMPORTED_MODULE_36__=__webpack_require__("./node_modules/@carbon/icons/es/incomplete/16.js"),_carbon_icons_es_information_filled_16__WEBPACK_IMPORTED_MODULE_37__=__webpack_require__("./node_modules/@carbon/icons/es/information--filled/16.js"),_carbon_icons_es_information_filled_20__WEBPACK_IMPORTED_MODULE_38__=__webpack_require__("./node_modules/@carbon/icons/es/information--filled/20.js"),_carbon_icons_es_information_square_filled_20__WEBPACK_IMPORTED_MODULE_39__=__webpack_require__("./node_modules/@carbon/icons/es/information--square--filled/20.js"),_carbon_icons_es_menu_16__WEBPACK_IMPORTED_MODULE_40__=__webpack_require__("./node_modules/@carbon/icons/es/menu/16.js"),_carbon_icons_es_menu_20__WEBPACK_IMPORTED_MODULE_41__=__webpack_require__("./node_modules/@carbon/icons/es/menu/20.js"),_carbon_icons_es_overflow_menu_vertical_16__WEBPACK_IMPORTED_MODULE_42__=__webpack_require__("./node_modules/@carbon/icons/es/overflow-menu--vertical/16.js"),_carbon_icons_es_overflow_menu_horizontal_16__WEBPACK_IMPORTED_MODULE_43__=__webpack_require__("./node_modules/@carbon/icons/es/overflow-menu--horizontal/16.js"),_carbon_icons_es_save_16__WEBPACK_IMPORTED_MODULE_44__=__webpack_require__("./node_modules/@carbon/icons/es/save/16.js"),_carbon_icons_es_search_16__WEBPACK_IMPORTED_MODULE_45__=__webpack_require__("./node_modules/@carbon/icons/es/search/16.js"),_carbon_icons_es_settings_16__WEBPACK_IMPORTED_MODULE_46__=__webpack_require__("./node_modules/@carbon/icons/es/settings/16.js"),_carbon_icons_es_settings_adjust_16__WEBPACK_IMPORTED_MODULE_47__=__webpack_require__("./node_modules/@carbon/icons/es/settings--adjust/16.js"),_carbon_icons_es_subtract_16__WEBPACK_IMPORTED_MODULE_48__=__webpack_require__("./node_modules/@carbon/icons/es/subtract/16.js"),_carbon_icons_es_trash_can_16__WEBPACK_IMPORTED_MODULE_49__=__webpack_require__("./node_modules/@carbon/icons/es/trash-can/16.js"),_carbon_icons_es_warning_16__WEBPACK_IMPORTED_MODULE_50__=__webpack_require__("./node_modules/@carbon/icons/es/warning/16.js"),_carbon_icons_es_warning_filled_16__WEBPACK_IMPORTED_MODULE_51__=__webpack_require__("./node_modules/@carbon/icons/es/warning--filled/16.js"),_carbon_icons_es_warning_filled_20__WEBPACK_IMPORTED_MODULE_52__=__webpack_require__("./node_modules/@carbon/icons/es/warning--filled/20.js"),_carbon_icons_es_warning_alt_filled_16__WEBPACK_IMPORTED_MODULE_53__=__webpack_require__("./node_modules/@carbon/icons/es/warning--alt--filled/16.js"),_carbon_icons_es_warning_alt_filled_20__WEBPACK_IMPORTED_MODULE_54__=__webpack_require__("./node_modules/@carbon/icons/es/warning--alt--filled/20.js"),_carbon_icons_es_view_16__WEBPACK_IMPORTED_MODULE_55__=__webpack_require__("./node_modules/@carbon/icons/es/view/16.js"),_carbon_icons_es_view_off_16__WEBPACK_IMPORTED_MODULE_56__=__webpack_require__("./node_modules/@carbon/icons/es/view--off/16.js");const ICON_SERVICE_PROVIDER={provide:_icon_service__WEBPACK_IMPORTED_MODULE_1__.C6,deps:[[new _angular_core__WEBPACK_IMPORTED_MODULE_57__.Optional,new _angular_core__WEBPACK_IMPORTED_MODULE_57__.SkipSelf,_icon_service__WEBPACK_IMPORTED_MODULE_1__.C6]],useFactory:function ICON_SERVICE_PROVIDER_FACTORY(parentService){return parentService||new _icon_service__WEBPACK_IMPORTED_MODULE_1__.C6}};let IconModule=class IconModule{constructor(iconService){this.iconService=iconService,iconService.registerAll([_carbon_icons_es_add_16__WEBPACK_IMPORTED_MODULE_2__.Z,_carbon_icons_es_add_20__WEBPACK_IMPORTED_MODULE_3__.Z,_carbon_icons_es_bee_16__WEBPACK_IMPORTED_MODULE_4__.Z,_carbon_icons_es_bee_20__WEBPACK_IMPORTED_MODULE_5__.Z,_carbon_icons_es_calendar_16__WEBPACK_IMPORTED_MODULE_6__.Z,_carbon_icons_es_carbon_16__WEBPACK_IMPORTED_MODULE_7__.Z,_carbon_icons_es_carbon_20__WEBPACK_IMPORTED_MODULE_8__.Z,_carbon_icons_es_caret_down_16__WEBPACK_IMPORTED_MODULE_9__.Z,_carbon_icons_es_caret_left_16__WEBPACK_IMPORTED_MODULE_10__.Z,_carbon_icons_es_caret_right_16__WEBPACK_IMPORTED_MODULE_11__.Z,_carbon_icons_es_caret_up_16__WEBPACK_IMPORTED_MODULE_12__.Z,_carbon_icons_es_checkmark_16__WEBPACK_IMPORTED_MODULE_13__.Z,_carbon_icons_es_checkmark_filled_16__WEBPACK_IMPORTED_MODULE_14__.Z,_carbon_icons_es_checkmark_filled_20__WEBPACK_IMPORTED_MODULE_15__.Z,_carbon_icons_es_checkmark_outline_16__WEBPACK_IMPORTED_MODULE_16__.Z,_carbon_icons_es_checkbox_16__WEBPACK_IMPORTED_MODULE_17__.Z,_carbon_icons_es_checkbox_checked_filled_16__WEBPACK_IMPORTED_MODULE_18__.Z,_carbon_icons_es_chevron_down_16__WEBPACK_IMPORTED_MODULE_19__.Z,_carbon_icons_es_chevron_right_16__WEBPACK_IMPORTED_MODULE_20__.Z,_carbon_icons_es_circle_dash_16__WEBPACK_IMPORTED_MODULE_21__.Z,_carbon_icons_es_close_16__WEBPACK_IMPORTED_MODULE_22__.Z,_carbon_icons_es_close_20__WEBPACK_IMPORTED_MODULE_23__.Z,_carbon_icons_es_copy_16__WEBPACK_IMPORTED_MODULE_24__.Z,_carbon_icons_es_copy_20__WEBPACK_IMPORTED_MODULE_25__.Z,_carbon_icons_es_data_2_16__WEBPACK_IMPORTED_MODULE_26__.Z,_carbon_icons_es_data_2_20__WEBPACK_IMPORTED_MODULE_27__.Z,_carbon_icons_es_document_16__WEBPACK_IMPORTED_MODULE_28__.Z,_carbon_icons_es_document_20__WEBPACK_IMPORTED_MODULE_29__.Z,_carbon_icons_es_download_16__WEBPACK_IMPORTED_MODULE_30__.Z,_carbon_icons_es_error_filled_16__WEBPACK_IMPORTED_MODULE_31__.Z,_carbon_icons_es_error_filled_20__WEBPACK_IMPORTED_MODULE_32__.Z,_carbon_icons_es_fade_16__WEBPACK_IMPORTED_MODULE_33__.Z,_carbon_icons_es_fade_20__WEBPACK_IMPORTED_MODULE_34__.Z,_carbon_icons_es_folder_16__WEBPACK_IMPORTED_MODULE_35__.Z,_carbon_icons_es_incomplete_16__WEBPACK_IMPORTED_MODULE_36__.Z,_carbon_icons_es_information_filled_16__WEBPACK_IMPORTED_MODULE_37__.Z,_carbon_icons_es_information_filled_20__WEBPACK_IMPORTED_MODULE_38__.Z,_carbon_icons_es_information_square_filled_20__WEBPACK_IMPORTED_MODULE_39__.Z,_carbon_icons_es_menu_16__WEBPACK_IMPORTED_MODULE_40__.Z,_carbon_icons_es_menu_20__WEBPACK_IMPORTED_MODULE_41__.Z,_carbon_icons_es_overflow_menu_vertical_16__WEBPACK_IMPORTED_MODULE_42__.Z,_carbon_icons_es_overflow_menu_horizontal_16__WEBPACK_IMPORTED_MODULE_43__.Z,_carbon_icons_es_save_16__WEBPACK_IMPORTED_MODULE_44__.Z,_carbon_icons_es_search_16__WEBPACK_IMPORTED_MODULE_45__.Z,_carbon_icons_es_settings_16__WEBPACK_IMPORTED_MODULE_46__.Z,_carbon_icons_es_settings_adjust_16__WEBPACK_IMPORTED_MODULE_47__.Z,_carbon_icons_es_subtract_16__WEBPACK_IMPORTED_MODULE_48__.Z,_carbon_icons_es_trash_can_16__WEBPACK_IMPORTED_MODULE_49__.Z,_carbon_icons_es_view_16__WEBPACK_IMPORTED_MODULE_55__.Z,_carbon_icons_es_view_off_16__WEBPACK_IMPORTED_MODULE_56__.Z,_carbon_icons_es_warning_16__WEBPACK_IMPORTED_MODULE_50__.Z,_carbon_icons_es_warning_filled_16__WEBPACK_IMPORTED_MODULE_51__.Z,_carbon_icons_es_warning_filled_20__WEBPACK_IMPORTED_MODULE_52__.Z,_carbon_icons_es_warning_alt_filled_16__WEBPACK_IMPORTED_MODULE_53__.Z,_carbon_icons_es_warning_alt_filled_20__WEBPACK_IMPORTED_MODULE_54__.Z])}};IconModule.ctorParameters=()=>[{type:_icon_service__WEBPACK_IMPORTED_MODULE_1__.C6}],IconModule=(0,tslib__WEBPACK_IMPORTED_MODULE_58__.gn)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_57__.NgModule)({declarations:[_icon_directive__WEBPACK_IMPORTED_MODULE_0__.a],exports:[_icon_directive__WEBPACK_IMPORTED_MODULE_0__.a],imports:[_angular_common__WEBPACK_IMPORTED_MODULE_59__.CommonModule],providers:[ICON_SERVICE_PROVIDER]})],IconModule)},"./src/icon/icon.service.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{C6:()=>IconService});var tslib__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/tslib/tslib.es6.js"),_angular_core__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@carbon/icon-helpers/es/index.js");class IconNameNotFoundError extends Error{constructor(name){super(`Icon ${name} not found`)}}class IconSizeNotFoundError extends Error{constructor(size,name){super(`Size ${size} for ${name} not found`)}}class IconMemoryCache extends class IconCache{}{constructor(){super(...arguments),this.iconMap=new Map}get(name,size){if(!this.iconMap.has(name))throw new IconNameNotFoundError(name);const sizeMap=this.iconMap.get(name);if(!sizeMap.has(size))throw new IconSizeNotFoundError(size,name);return sizeMap.get(size)}set(name,size,descriptor){this.iconMap.has(name)||this.iconMap.set(name,new Map);this.iconMap.get(name).set(size,descriptor)}}let IconService=class IconService{constructor(){this.iconCache=new IconMemoryCache}registerAll(descriptors){descriptors.forEach((icon=>this.register(icon)))}register(descriptor){const{name}=descriptor;this.registerAs(name,descriptor)}registerAs(name,descriptor){const{size}=descriptor;this.iconCache.set(name,size.toString(),descriptor)}get(name,size){try{const icon=this.iconCache.get(name,size.toString());return icon.svg||(icon.svg=(0,_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_0__.BB)(icon)),icon}catch(e){throw e}}configure(options){this.iconCache=options.cache}};IconService=(0,tslib__WEBPACK_IMPORTED_MODULE_1__.gn)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_2__.Injectable)()],IconService)},"./src/icon/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{ar:()=>icon_directive.a,QX:()=>icon_module.QX,C6:()=>icon_service.C6});var icon_directive=__webpack_require__("./src/icon/icon.directive.ts"),icon_module=__webpack_require__("./src/icon/icon.module.ts"),icon_service=__webpack_require__("./src/icon/icon.service.ts")}}]);
|
|
@@ -348,8 +348,8 @@
|
|
|
348
348
|
window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":true};</script><script type="module">import './sb-preview/runtime.js';
|
|
349
349
|
|
|
350
350
|
|
|
351
|
-
import './runtime~main.
|
|
351
|
+
import './runtime~main.4617f37a.iframe.bundle.js';
|
|
352
352
|
|
|
353
353
|
import './5478.5fc19af5.iframe.bundle.js';
|
|
354
354
|
|
|
355
|
-
import './main.
|
|
355
|
+
import './main.44f74a26.iframe.bundle.js';</script></body></html>
|