npm - carbon-components-angular - Versions diffs - 5.26.0 → 5.26.2 - Mend

carbon-components-angular 5.26.0 → 5.26.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (354) hide show

package/README.md +2 -1
package/docs/documentation/classes/CheckboxExportedTests.html +168 -108
package/docs/documentation/classes/ComponentTests.html +150 -90
package/docs/documentation/classes/DataGridInteractionModel.html +341 -289
package/docs/documentation/classes/IconCache.html +191 -131
package/docs/documentation/classes/IconMemoryCache.html +194 -134
package/docs/documentation/classes/IconNameNotFoundError.html +70 -6
package/docs/documentation/classes/IconSizeNotFoundError.html +70 -6
package/docs/documentation/classes/NumberChange.html +69 -5
package/docs/documentation/classes/Overridable.html +110 -48
package/docs/documentation/classes/PaginationModel.html +69 -5
package/docs/documentation/classes/RadioChange.html +69 -5
package/docs/documentation/classes/TableAdapter.html +354 -302
package/docs/documentation/classes/TableCellAdapter.html +69 -5
package/docs/documentation/classes/TableDomAdapter.html +610 -566
package/docs/documentation/classes/TableHeaderItem.html +169 -109
package/docs/documentation/classes/TableItem.html +73 -9
package/docs/documentation/classes/TableModel.html +1250 -1234
package/docs/documentation/classes/TableRow.html +70 -6
package/docs/documentation/classes/TableRowAdapter.html +69 -5
package/docs/documentation/components/Accordion.html +90 -26
package/docs/documentation/components/AccordionItem.html +118 -56
package/docs/documentation/components/ActionableNotification.html +146 -84
package/docs/documentation/components/AlertModal.html +175 -115
package/docs/documentation/components/BaseIconButton.html +69 -5
package/docs/documentation/components/BaseNotification.html +134 -72
package/docs/documentation/components/BaseTabHeader.html +186 -126
package/docs/documentation/components/Breadcrumb.html +141 -79
package/docs/documentation/components/BreadcrumbItemComponent.html +114 -52
package/docs/documentation/components/ButtonSet.html +70 -6
package/docs/documentation/components/Checkbox.html +482 -434
package/docs/documentation/components/ClickableTile.html +106 -44
package/docs/documentation/components/CodeSnippet.html +136 -72
package/docs/documentation/components/ComboBox.html +757 -719
package/docs/documentation/components/ContainedList.html +112 -50
package/docs/documentation/components/ContainedListItem.html +122 -60
package/docs/documentation/components/ContentSwitcher.html +127 -65
package/docs/documentation/components/ContextMenuComponent.html +167 -107
package/docs/documentation/components/ContextMenuDividerComponent.html +69 -5
package/docs/documentation/components/ContextMenuGroupComponent.html +127 -65
package/docs/documentation/components/ContextMenuItemComponent.html +281 -221
package/docs/documentation/components/DatePicker.html +743 -703
package/docs/documentation/components/DatePickerInput.html +269 -215
package/docs/documentation/components/Dialog.html +318 -264
package/docs/documentation/components/Documentation.html +96 -32
package/docs/documentation/components/Dropdown.html +661 -617
package/docs/documentation/components/DropdownList.html +679 -639
package/docs/documentation/components/ExpandableTile.html +99 -35
package/docs/documentation/components/FileComponent.html +78 -14
package/docs/documentation/components/FileUploader.html +475 -431
package/docs/documentation/components/Hamburger.html +81 -17
package/docs/documentation/components/Header.html +143 -83
package/docs/documentation/components/HeaderAction.html +79 -15
package/docs/documentation/components/HeaderGlobal.html +69 -5
package/docs/documentation/components/HeaderItem.html +105 -43
package/docs/documentation/components/HeaderMenu.html +200 -140
package/docs/documentation/components/HeaderNavigation.html +69 -5
package/docs/documentation/components/IconButton.html +138 -76
package/docs/documentation/components/InlineLoading.html +70 -6
package/docs/documentation/components/Label.html +129 -67
package/docs/documentation/components/ListColumn.html +70 -6
package/docs/documentation/components/ListHeader.html +90 -26
package/docs/documentation/components/ListRow.html +166 -104
package/docs/documentation/components/Loading.html +70 -6
package/docs/documentation/components/Modal.html +191 -131
package/docs/documentation/components/ModalFooter.html +69 -5
package/docs/documentation/components/ModalHeader.html +83 -19
package/docs/documentation/components/Notification.html +146 -84
package/docs/documentation/components/NumberComponent.html +389 -337
package/docs/documentation/components/OverflowMenu.html +110 -48
package/docs/documentation/components/OverflowMenuCustomPane.html +398 -346
package/docs/documentation/components/OverflowMenuOption.html +106 -42
package/docs/documentation/components/OverflowMenuPane.html +426 -374
package/docs/documentation/components/Overlay.html +106 -44
package/docs/documentation/components/Pagination.html +73 -9
package/docs/documentation/components/PaginationNav.html +188 -128
package/docs/documentation/components/PaginationNavItem.html +71 -7
package/docs/documentation/components/PaginationOverflow.html +107 -45
package/docs/documentation/components/Panel.html +69 -5
package/docs/documentation/components/PasswordInputLabelComponent.html +137 -75
package/docs/documentation/components/Placeholder.html +80 -16
package/docs/documentation/components/PopoverContent.html +78 -14
package/docs/documentation/components/ProgressBar.html +106 -44
package/docs/documentation/components/ProgressIndicator.html +216 -158
package/docs/documentation/components/Radio.html +237 -181
package/docs/documentation/components/RadioGroup.html +412 -360
package/docs/documentation/components/Search.html +509 -463
package/docs/documentation/components/Select.html +337 -285
package/docs/documentation/components/SelectionTile.html +158 -98
package/docs/documentation/components/SideNav.html +78 -14
package/docs/documentation/components/SideNavItem.html +183 -121
package/docs/documentation/components/SideNavMenu.html +107 -43
package/docs/documentation/components/SkeletonPlaceholder.html +70 -6
package/docs/documentation/components/SkeletonText.html +124 -62
package/docs/documentation/components/Slider.html +840 -810
package/docs/documentation/components/StructuredList.html +211 -153
package/docs/documentation/components/SwitcherList.html +70 -6
package/docs/documentation/components/SwitcherListItem.html +105 -43
package/docs/documentation/components/Tab.html +267 -53
package/docs/documentation/components/TabHeaderGroup.html +316 -260
package/docs/documentation/components/TabHeaders.html +425 -373
package/docs/documentation/components/TabSkeleton.html +69 -5
package/docs/documentation/components/Table.html +973 -947
package/docs/documentation/components/TableBody.html +241 -185
package/docs/documentation/components/TableCheckbox.html +119 -57
package/docs/documentation/components/TableContainer.html +78 -14
package/docs/documentation/components/TableData.html +69 -5
package/docs/documentation/components/TableExpandButton.html +78 -14
package/docs/documentation/components/TableExpandedRow.html +141 -81
package/docs/documentation/components/TableHead.html +124 -60
package/docs/documentation/components/TableHeadCell.html +116 -52
package/docs/documentation/components/TableHeadCheckbox.html +78 -14
package/docs/documentation/components/TableHeadExpand.html +69 -5
package/docs/documentation/components/TableHeader.html +69 -5
package/docs/documentation/components/TableRadio.html +119 -57
package/docs/documentation/components/TableRowComponent.html +123 -59
package/docs/documentation/components/TableToolbar.html +79 -15
package/docs/documentation/components/TableToolbarActions.html +69 -5
package/docs/documentation/components/TableToolbarContent.html +69 -5
package/docs/documentation/components/TableToolbarSearch.html +563 -517
package/docs/documentation/components/Tabs.html +130 -68
package/docs/documentation/components/Tag.html +70 -6
package/docs/documentation/components/TagFilter.html +150 -90
package/docs/documentation/components/TextInputLabelComponent.html +118 -56
package/docs/documentation/components/TextareaLabelComponent.html +118 -56
package/docs/documentation/components/Tile.html +70 -6
package/docs/documentation/components/TileGroup.html +247 -191
package/docs/documentation/components/TimePicker.html +321 -269
package/docs/documentation/components/TimePickerSelect.html +382 -330
package/docs/documentation/components/Toast.html +155 -93
package/docs/documentation/components/Toggle.html +568 -522
package/docs/documentation/components/Toggletip.html +491 -441
package/docs/documentation/components/Tooltip.html +578 -534
package/docs/documentation/components/TooltipDefinition.html +559 -513
package/docs/documentation/components/TreeNodeComponent.html +353 -303
package/docs/documentation/components/TreeViewComponent.html +155 -93
package/docs/documentation/coverage.html +71 -7
package/docs/documentation/dependencies.html +69 -5
package/docs/documentation/directives/AbstractDropdownView.html +347 -291
package/docs/documentation/directives/ActionableButton.html +69 -5
package/docs/documentation/directives/ActionableSubtitle.html +69 -5
package/docs/documentation/directives/ActionableTitle.html +69 -5
package/docs/documentation/directives/BaseModal.html +79 -15
package/docs/documentation/directives/Button.html +71 -7
package/docs/documentation/directives/ColumnDirective.html +108 -44
package/docs/documentation/directives/ContentSwitcherOption.html +162 -102
package/docs/documentation/directives/DialogDirective.html +322 -268
package/docs/documentation/directives/ExpandableTileAboveFoldDirective.html +69 -5
package/docs/documentation/directives/ExpandableTileBelowFoldDirective.html +69 -5
package/docs/documentation/directives/ExpandedRowHover.html +145 -85
package/docs/documentation/directives/GridDirective.html +89 -25
package/docs/documentation/directives/IconDirective.html +158 -98
package/docs/documentation/directives/LayerDirective.html +79 -15
package/docs/documentation/directives/Link.html +70 -6
package/docs/documentation/directives/List.html +70 -6
package/docs/documentation/directives/ListItemDirective.html +69 -5
package/docs/documentation/directives/ModalContent.html +69 -5
package/docs/documentation/directives/ModalContentText.html +69 -5
package/docs/documentation/directives/ModalHeaderHeading.html +69 -5
package/docs/documentation/directives/ModalHeaderLabel.html +69 -5
package/docs/documentation/directives/NotificationSubtitle.html +69 -5
package/docs/documentation/directives/NotificationTitle.html +69 -5
package/docs/documentation/directives/OptGroup.html +69 -5
package/docs/documentation/directives/Option.html +69 -5
package/docs/documentation/directives/OverflowMenuDirective.html +377 -323
package/docs/documentation/directives/PasswordInput.html +78 -14
package/docs/documentation/directives/PopoverContainer.html +305 -249
package/docs/documentation/directives/RowDirective.html +69 -5
package/docs/documentation/directives/ScrollableList.html +419 -371
package/docs/documentation/directives/StackDirective.html +70 -6
package/docs/documentation/directives/TabHeader.html +107 -43
package/docs/documentation/directives/TableDirective.html +69 -5
package/docs/documentation/directives/TableHeadCellLabel.html +69 -5
package/docs/documentation/directives/TableHeaderDescription.html +69 -5
package/docs/documentation/directives/TableHeaderTitle.html +69 -5
package/docs/documentation/directives/TextArea.html +70 -6
package/docs/documentation/directives/TextInput.html +70 -6
package/docs/documentation/directives/ThemeDirective.html +79 -15
package/docs/documentation/directives/ToastCaption.html +69 -5
package/docs/documentation/directives/ToastSubtitle.html +69 -5
package/docs/documentation/directives/ToastTitle.html +69 -5
package/docs/documentation/directives/ToggletipAction.html +69 -5
package/docs/documentation/directives/ToggletipButton.html +69 -5
package/docs/documentation/directives/ToggletipContent.html +69 -5
package/docs/documentation/directives/ToggletipLabel.html +69 -5
package/docs/documentation/index.html +78 -8
package/docs/documentation/injectables/AnimationFrameService.html +69 -5
package/docs/documentation/injectables/AnimationFrameServiceSingleton.html +120 -58
package/docs/documentation/injectables/BaseModalService.html +159 -99
package/docs/documentation/injectables/ContextMenuSelectionService.html +189 -131
package/docs/documentation/injectables/DialogService.html +212 -152
package/docs/documentation/injectables/DocumentService.html +170 -110
package/docs/documentation/injectables/DropdownService.html +285 -229
package/docs/documentation/injectables/ElementService.html +127 -65
package/docs/documentation/injectables/EventService.html +194 -134
package/docs/documentation/injectables/ExperimentalService.html +276 -220
package/docs/documentation/injectables/GridService.html +110 -48
package/docs/documentation/injectables/I18n.html +506 -458
package/docs/documentation/injectables/IconService.html +309 -255
package/docs/documentation/injectables/ModalService.html +215 -157
package/docs/documentation/injectables/NotificationDisplayService.html +110 -48
package/docs/documentation/injectables/NotificationService.html +349 -295
package/docs/documentation/injectables/PlaceholderService.html +475 -427
package/docs/documentation/injectables/TreeViewService.html +115 -53
package/docs/documentation/interfaces/ActionableContent.html +70 -6
package/docs/documentation/interfaces/AlertModalData.html +69 -5
package/docs/documentation/interfaces/BreadcrumbItem.html +69 -5
package/docs/documentation/interfaces/CloseMeta.html +69 -5
package/docs/documentation/interfaces/DataGridPosition.html +69 -5
package/docs/documentation/interfaces/DialogConfig.html +69 -5
package/docs/documentation/interfaces/ElementVisibilityEvent.html +69 -5
package/docs/documentation/interfaces/ExpandableTileTranslations.html +69 -5
package/docs/documentation/interfaces/Experiment.html +69 -5
package/docs/documentation/interfaces/FileItem.html +69 -5
package/docs/documentation/interfaces/HeaderItemInterface.html +69 -5
package/docs/documentation/interfaces/IconDescriptor.html +69 -5
package/docs/documentation/interfaces/ListItem.html +70 -6
package/docs/documentation/interfaces/ModalButton.html +69 -5
package/docs/documentation/interfaces/NavigationItem.html +69 -5
package/docs/documentation/interfaces/Node.html +69 -5
package/docs/documentation/interfaces/NotificationAction.html +69 -5
package/docs/documentation/interfaces/NotificationContent.html +69 -5
package/docs/documentation/interfaces/NotificationLink.html +69 -5
package/docs/documentation/interfaces/PaginationNavTranslations.html +69 -5
package/docs/documentation/interfaces/PaginationTranslations.html +69 -5
package/docs/documentation/interfaces/ScrollCustomEvent.html +70 -6
package/docs/documentation/interfaces/SideNavItemInterface.html +70 -6
package/docs/documentation/interfaces/Step.html +69 -5
package/docs/documentation/interfaces/TableTranslations.html +69 -5
package/docs/documentation/interfaces/TileSelection.html +69 -5
package/docs/documentation/interfaces/ToastContent.html +70 -6
package/docs/documentation/interfaces/TooltipConfig.html +69 -5
package/docs/documentation/js/libs/bootstrap-native.js +2 -1
package/docs/documentation/js/libs/es6-shim.min.js +11 -10
package/docs/documentation/js/libs/tablesort.min.js +3 -3
package/docs/documentation/js/libs/tablesort.number.min.js +2 -2
package/docs/documentation/js/libs/vis.min.js +1 -1
package/docs/documentation/js/menu-wc_es5.js +17 -19
package/docs/documentation/js/menu.js +0 -55
package/docs/documentation/js/search/search.js +71 -56
package/docs/documentation/js/search/search_index.js +2 -2
package/docs/documentation/license.html +72 -8
package/docs/documentation/miscellaneous/enumerations.html +69 -5
package/docs/documentation/miscellaneous/functions.html +831 -819
package/docs/documentation/miscellaneous/typealiases.html +69 -5
package/docs/documentation/miscellaneous/variables.html +70 -6
package/docs/documentation/modules/AccordionModule.html +69 -5
package/docs/documentation/modules/BreadcrumbModule.html +69 -5
package/docs/documentation/modules/ButtonModule.html +69 -5
package/docs/documentation/modules/CheckboxModule.html +69 -5
package/docs/documentation/modules/CodeSnippetModule/dependencies.svg +4 -4
package/docs/documentation/modules/CodeSnippetModule.html +73 -9
package/docs/documentation/modules/ComboBoxModule/dependencies.svg +4 -4
package/docs/documentation/modules/ComboBoxModule.html +73 -9
package/docs/documentation/modules/ContainedListModule.html +69 -5
package/docs/documentation/modules/ContentSwitcherModule/dependencies.svg +4 -4
package/docs/documentation/modules/ContentSwitcherModule.html +73 -9
package/docs/documentation/modules/ContextMenuModule.html +69 -5
package/docs/documentation/modules/DatePickerInputModule/dependencies.svg +20 -20
package/docs/documentation/modules/DatePickerInputModule.html +89 -25
package/docs/documentation/modules/DatePickerModule/dependencies.svg +50 -46
package/docs/documentation/modules/DatePickerModule.html +119 -51
package/docs/documentation/modules/DialogModule.html +69 -5
package/docs/documentation/modules/DocumentationModule.html +69 -5
package/docs/documentation/modules/DropdownModule.html +69 -5
package/docs/documentation/modules/ExperimentalModule.html +69 -5
package/docs/documentation/modules/FileUploaderModule/dependencies.svg +58 -58
package/docs/documentation/modules/FileUploaderModule.html +127 -63
package/docs/documentation/modules/GridModule.html +69 -5
package/docs/documentation/modules/HeaderModule.html +69 -5
package/docs/documentation/modules/I18nModule.html +69 -5
package/docs/documentation/modules/IconModule.html +69 -5
package/docs/documentation/modules/InlineLoadingModule.html +69 -5
package/docs/documentation/modules/InputModule.html +69 -5
package/docs/documentation/modules/LayerModule.html +69 -5
package/docs/documentation/modules/LayoutModule.html +69 -5
package/docs/documentation/modules/LinkModule.html +69 -5
package/docs/documentation/modules/ListModule.html +69 -5
package/docs/documentation/modules/LoadingModule.html +69 -5
package/docs/documentation/modules/ModalModule.html +69 -5
package/docs/documentation/modules/NFormsModule.html +69 -5
package/docs/documentation/modules/NotificationModule.html +69 -5
package/docs/documentation/modules/NumberModule/dependencies.svg +4 -4
package/docs/documentation/modules/NumberModule.html +73 -9
package/docs/documentation/modules/PaginationModule.html +69 -5
package/docs/documentation/modules/PanelModule/dependencies.svg +36 -36
package/docs/documentation/modules/PanelModule.html +105 -41
package/docs/documentation/modules/PlaceholderModule.html +69 -5
package/docs/documentation/modules/PopoverModule.html +69 -5
package/docs/documentation/modules/ProgressBarModule.html +69 -5
package/docs/documentation/modules/ProgressIndicatorModule.html +69 -5
package/docs/documentation/modules/RadioModule/dependencies.svg +43 -47
package/docs/documentation/modules/RadioModule.html +112 -52
package/docs/documentation/modules/SearchModule/dependencies.svg +4 -4
package/docs/documentation/modules/SearchModule.html +73 -9
package/docs/documentation/modules/SelectModule/dependencies.svg +34 -34
package/docs/documentation/modules/SelectModule.html +103 -39
package/docs/documentation/modules/SideNavModule.html +69 -5
package/docs/documentation/modules/SkeletonModule.html +69 -5
package/docs/documentation/modules/SliderModule/dependencies.svg +4 -4
package/docs/documentation/modules/SliderModule.html +73 -9
package/docs/documentation/modules/StructuredListModule.html +69 -5
package/docs/documentation/modules/TableModule.html +68 -4
package/docs/documentation/modules/TabsModule.html +69 -5
package/docs/documentation/modules/TagModule/dependencies.svg +28 -28
package/docs/documentation/modules/TagModule.html +97 -33
package/docs/documentation/modules/ThemeModule/dependencies.svg +15 -15
package/docs/documentation/modules/ThemeModule.html +84 -20
package/docs/documentation/modules/TilesModule/dependencies.svg +98 -98
package/docs/documentation/modules/TilesModule.html +167 -103
package/docs/documentation/modules/TimePickerModule/dependencies.svg +45 -41
package/docs/documentation/modules/TimePickerModule.html +114 -46
package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +46 -42
package/docs/documentation/modules/TimePickerSelectModule.html +115 -47
package/docs/documentation/modules/ToggleModule/dependencies.svg +26 -26
package/docs/documentation/modules/ToggleModule.html +95 -31
package/docs/documentation/modules/ToggletipModule/dependencies.svg +4 -4
package/docs/documentation/modules/ToggletipModule.html +73 -9
package/docs/documentation/modules/TooltipModule/dependencies.svg +4 -4
package/docs/documentation/modules/TooltipModule.html +73 -9
package/docs/documentation/modules/TreeviewModule/dependencies.svg +32 -32
package/docs/documentation/modules/TreeviewModule.html +101 -37
package/docs/documentation/modules/UIShellModule.html +69 -5
package/docs/documentation/modules/UtilsModule.html +69 -5
package/docs/documentation/modules.html +68 -4
package/docs/documentation/overview.html +68 -4
package/docs/documentation/pipes/ReplacePipe.html +114 -52
package/docs/documentation/properties.html +69 -5
package/docs/documentation/styles/compodoc.css +11 -8
package/docs/documentation.json +2158 -1848
package/docs/storybook/{3348.9d9f3238.iframe.bundle.js → 3348.03939d46.iframe.bundle.js} +1 -1
package/docs/storybook/{959.4248791c.iframe.bundle.js → 959.05fb42da.iframe.bundle.js} +3 -3
package/docs/storybook/{959.4248791c.iframe.bundle.js.map → 959.05fb42da.iframe.bundle.js.map} +1 -1
package/docs/storybook/iframe.html +3 -3
package/docs/storybook/main.cfffa2d2.iframe.bundle.js +1 -0
package/docs/storybook/main.css +2 -4
package/docs/storybook/project.json +1 -1
package/docs/storybook/{runtime~main.33c694dd.iframe.bundle.js → runtime~main.c3f8e5ba.iframe.bundle.js} +1 -1
package/docs/storybook/sb-addons/essentials-controls-1/manager-bundle.js +29 -29
package/docs/storybook/{tabs-tabs-stories.183f4129.iframe.bundle.js → tabs-tabs-stories.066fa432.iframe.bundle.js} +1 -1
package/esm2020/tabs/tab.component.mjs +20 -3
package/esm2020/ui-shell/sidenav/sidenav-item.component.mjs +15 -13
package/fesm2015/carbon-components-angular-tabs.mjs +24 -7
package/fesm2015/carbon-components-angular-tabs.mjs.map +1 -1
package/fesm2015/carbon-components-angular-ui-shell.mjs +14 -12
package/fesm2015/carbon-components-angular-ui-shell.mjs.map +1 -1
package/fesm2020/carbon-components-angular-tabs.mjs +24 -7
package/fesm2020/carbon-components-angular-tabs.mjs.map +1 -1
package/fesm2020/carbon-components-angular-ui-shell.mjs +14 -12
package/fesm2020/carbon-components-angular-ui-shell.mjs.map +1 -1
package/package.json +1 -1
package/tabs/tab.component.d.ts +10 -1
package/docs/storybook/main.67c70a42.iframe.bundle.js +0 -1
/package/docs/storybook/{959.4248791c.iframe.bundle.js.LICENSE.txt → 959.05fb42da.iframe.bundle.js.LICENSE.txt} +0 -0

package/docs/documentation/components/Hamburger.html CHANGED Viewed

@@ -12,10 +12,61 @@
         <link rel="stylesheet" href="../styles/dark.css">
     </head>
     <body>
-        <div class="navbar navbar-default navbar-fixed-top d-block d-sm-none">
-            <a href="../" class="navbar-brand">carbon-components-angular documentation</a>
-            <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
+          <script>
+               // Blocking script to avoid flickering dark mode
+               // Dark mode toggle button
+               var useDark = window.matchMedia('(prefers-color-scheme: dark)');
+               var darkModeState = useDark.matches;
+               var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
+               var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
+               var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
+               function checkToggle(check) {
+                    for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
+                         $darkModeToggleSwitchers[i].checked = check;
+                    }
+               }
+               function toggleDarkMode(state) {
+                    if (window.localStorage) {
+                         localStorage.setItem('compodoc_darkmode-state', state);
+                    }
+                    checkToggle(state);
+                    const hasClass = document.body.classList.contains('dark');
+                    if (state) {
+                         for (var i = 0; i < $darkModeToggles.length; i++) {
+                              $darkModeToggles[i].classList.add('dark');
+                         }
+                         if (!hasClass) {
+                              document.body.classList.add('dark');
+                         }
+                    } else {
+                         for (var i = 0; i < $darkModeToggles.length; i++) {
+                              $darkModeToggles[i].classList.remove('dark');
+                         }
+                         if (hasClass) {
+                              document.body.classList.remove('dark');
+                         }
+                    }
+               }
+               useDark.addEventListener('change', function (evt) {
+                    toggleDarkMode(evt.matches);
+               });
+               if (darkModeStateLocal) {
+                    darkModeState = darkModeStateLocal === 'true';
+               }
+               toggleDarkMode(darkModeState);
+          </script>
+        <div class="navbar navbar-default navbar-fixed-top d-md-none p-0">
+               <div class="d-flex">
+                    <a href="../" class="navbar-brand">carbon-components-angular documentation</a>
+                    <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
+               </div>
         </div>
         <div class="xs-menu menu" id="mobile-menu">
@@ -24,7 +75,7 @@
         <div class="container-fluid main">
            <div class="row main">
-               <div class="hidden-xs menu">
+               <div class="d-none d-md-block menu">
                    <compodoc-menu mode="normal"></compodoc-menu>
                </div>
                <!-- START CONTENT -->
@@ -397,7 +448,7 @@
                 <td class="col-md-4">
                     <a name="doClick"></a>
                     <span class="name">
-                        <span class="modifier">Public</span>
+                            <span class="modifier">Public</span>
                         <span ><b>doClick</b></span>
                         <a href="#doClick"><span class="icon ion-ios-link"></span></a>
                     </span>
@@ -405,29 +456,29 @@
             </tr>
             <tr>
                 <td class="col-md-4">
-                    <span class="modifier-icon icon ion-ios-reset"></span>
+                        <span class="modifier-icon icon ion-ios-reset"></span>
                     <code>doClick()</code>
                 </td>
             </tr>
-            <tr>
-                <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="53"
-                            class="link-to-prism">src/ui-shell/header/hamburger.component.ts:53</a></div>
-                </td>
-            </tr>
+                    <tr>
+                        <td class="col-md-4">
+                            <div class="io-line">Defined in <a href="" data-line="53"
+                                    class="link-to-prism">src/ui-shell/header/hamburger.component.ts:53</a></div>
+                        </td>
+                    </tr>
             <tr>
                 <td class="col-md-4">
-                    <div class="io-description"><p>Emit the Hamburger click event upwards.</p>
+                        <div class="io-description"><p>Emit the Hamburger click event upwards.</p>
 </div>
-                    <div class="io-description">
-                        <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
+                        <div class="io-description">
+                            <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
-                    </div>
+                        </div>
                 </td>
             </tr>
         </tbody>
@@ -610,6 +661,19 @@ export class Hamburger {
             var MAX_SEARCH_RESULTS = 15;
        </script>
+       <script>
+               $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
+               checkToggle(darkModeState);
+               if ($darkModeToggleSwitchers.length > 0) {
+                    for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
+                         $darkModeToggleSwitchers[i].addEventListener('change', function (event) {
+                              darkModeState = !darkModeState;
+                              toggleDarkMode(darkModeState);
+                         });
+                    }
+               }
+          </script>
        <script src="../js/libs/custom-elements.min.js"></script>
        <script src="../js/libs/lit-html.js"></script>

package/docs/documentation/components/Header.html CHANGED Viewed

@@ -12,10 +12,61 @@
         <link rel="stylesheet" href="../styles/dark.css">
     </head>
     <body>
-        <div class="navbar navbar-default navbar-fixed-top d-block d-sm-none">
-            <a href="../" class="navbar-brand">carbon-components-angular documentation</a>
-            <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
+          <script>
+               // Blocking script to avoid flickering dark mode
+               // Dark mode toggle button
+               var useDark = window.matchMedia('(prefers-color-scheme: dark)');
+               var darkModeState = useDark.matches;
+               var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
+               var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
+               var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
+               function checkToggle(check) {
+                    for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
+                         $darkModeToggleSwitchers[i].checked = check;
+                    }
+               }
+               function toggleDarkMode(state) {
+                    if (window.localStorage) {
+                         localStorage.setItem('compodoc_darkmode-state', state);
+                    }
+                    checkToggle(state);
+                    const hasClass = document.body.classList.contains('dark');
+                    if (state) {
+                         for (var i = 0; i < $darkModeToggles.length; i++) {
+                              $darkModeToggles[i].classList.add('dark');
+                         }
+                         if (!hasClass) {
+                              document.body.classList.add('dark');
+                         }
+                    } else {
+                         for (var i = 0; i < $darkModeToggles.length; i++) {
+                              $darkModeToggles[i].classList.remove('dark');
+                         }
+                         if (hasClass) {
+                              document.body.classList.remove('dark');
+                         }
+                    }
+               }
+               useDark.addEventListener('change', function (evt) {
+                    toggleDarkMode(evt.matches);
+               });
+               if (darkModeStateLocal) {
+                    darkModeState = darkModeStateLocal === 'true';
+               }
+               toggleDarkMode(darkModeState);
+          </script>
+        <div class="navbar navbar-default navbar-fixed-top d-md-none p-0">
+               <div class="d-flex">
+                    <a href="../" class="navbar-brand">carbon-components-angular documentation</a>
+                    <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
+               </div>
         </div>
         <div class="xs-menu menu" id="mobile-menu">
@@ -24,7 +75,7 @@
         <div class="container-fluid main">
            <div class="row main">
-               <div class="hidden-xs menu">
+               <div class="d-none d-md-block menu">
                    <compodoc-menu mode="normal"></compodoc-menu>
                </div>
                <!-- START CONTENT -->
@@ -586,7 +637,7 @@ See: <a href="https://angular.io/api/router/Router#navigate">https://angular.io/
                 <td class="col-md-4">
                     <a name="isTemplate"></a>
                     <span class="name">
-                        <span class="modifier">Public</span>
+                            <span class="modifier">Public</span>
                         <span ><b>isTemplate</b></span>
                         <a href="#isTemplate"><span class="icon ion-ios-link"></span></a>
                     </span>
@@ -594,55 +645,53 @@ See: <a href="https://angular.io/api/router/Router#navigate">https://angular.io/
             </tr>
             <tr>
                 <td class="col-md-4">
-                    <span class="modifier-icon icon ion-ios-reset"></span>
+                        <span class="modifier-icon icon ion-ios-reset"></span>
                     <code>isTemplate(value)</code>
                 </td>
             </tr>
-            <tr>
-                <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="112"
-                            class="link-to-prism">src/ui-shell/header/header.component.ts:112</a></div>
-                </td>
-            </tr>
+                    <tr>
+                        <td class="col-md-4">
+                            <div class="io-line">Defined in <a href="" data-line="112"
+                                    class="link-to-prism">src/ui-shell/header/header.component.ts:112</a></div>
+                        </td>
+                    </tr>
             <tr>
                 <td class="col-md-4">
-                    <div class="io-description">
-                        <b>Parameters :</b>
-                        <table class="params">
-                            <thead>
-                                <tr>
-                                    <td>Name</td>
-                                    <td>Optional</td>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>value</td>
-                                    <td>
-                                        No
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    <div>
-                    </div>
-                    <div class="io-description">
-                        <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
-                    </div>
-                    <div class="io-description">
-                    </div>
+                            <div class="io-description">
+                                <b>Parameters :</b>
+                                <table class="params">
+                                    <thead>
+                                        <tr>
+                                            <td>Name</td>
+                                            <td>Optional</td>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                                <td>value</td>
+                                            <td>
+                                                    No
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        <div class="io-description">
+                            <b>Returns : </b>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
+                        </div>
+                            <div class="io-description">
+                            </div>
                 </td>
             </tr>
         </tbody>
@@ -665,49 +714,47 @@ See: <a href="https://angular.io/api/router/Router#navigate">https://angular.io/
             </tr>
-            <tr>
-                <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="116"
-                            class="link-to-prism">src/ui-shell/header/header.component.ts:116</a></div>
-                </td>
-            </tr>
+                    <tr>
+                        <td class="col-md-4">
+                            <div class="io-line">Defined in <a href="" data-line="116"
+                                    class="link-to-prism">src/ui-shell/header/header.component.ts:116</a></div>
+                        </td>
+                    </tr>
             <tr>
                 <td class="col-md-4">
-                    <div class="io-description">
-                        <b>Parameters :</b>
-                        <table class="params">
-                            <thead>
-                                <tr>
-                                    <td>Name</td>
-                                    <td>Optional</td>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>event</td>
-                                    <td>
-                                        No
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    <div>
-                    </div>
-                    <div class="io-description">
-                        <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
-                    </div>
-                    <div class="io-description">
-                    </div>
+                            <div class="io-description">
+                                <b>Parameters :</b>
+                                <table class="params">
+                                    <thead>
+                                        <tr>
+                                            <td>Name</td>
+                                            <td>Optional</td>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                                <td>event</td>
+                                            <td>
+                                                    No
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        <div class="io-description">
+                            <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
+                        </div>
+                            <div class="io-description">
+                            </div>
                 </td>
             </tr>
         </tbody>
@@ -1067,6 +1114,19 @@ export class Header {
             var MAX_SEARCH_RESULTS = 15;
        </script>
+       <script>
+               $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
+               checkToggle(darkModeState);
+               if ($darkModeToggleSwitchers.length > 0) {
+                    for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
+                         $darkModeToggleSwitchers[i].addEventListener('change', function (event) {
+                              darkModeState = !darkModeState;
+                              toggleDarkMode(darkModeState);
+                         });
+                    }
+               }
+          </script>
        <script src="../js/libs/custom-elements.min.js"></script>
        <script src="../js/libs/lit-html.js"></script>

package/docs/documentation/components/HeaderAction.html CHANGED Viewed

@@ -12,10 +12,61 @@
         <link rel="stylesheet" href="../styles/dark.css">
     </head>
     <body>
-        <div class="navbar navbar-default navbar-fixed-top d-block d-sm-none">
-            <a href="../" class="navbar-brand">carbon-components-angular documentation</a>
-            <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
+          <script>
+               // Blocking script to avoid flickering dark mode
+               // Dark mode toggle button
+               var useDark = window.matchMedia('(prefers-color-scheme: dark)');
+               var darkModeState = useDark.matches;
+               var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
+               var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
+               var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
+               function checkToggle(check) {
+                    for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
+                         $darkModeToggleSwitchers[i].checked = check;
+                    }
+               }
+               function toggleDarkMode(state) {
+                    if (window.localStorage) {
+                         localStorage.setItem('compodoc_darkmode-state', state);
+                    }
+                    checkToggle(state);
+                    const hasClass = document.body.classList.contains('dark');
+                    if (state) {
+                         for (var i = 0; i < $darkModeToggles.length; i++) {
+                              $darkModeToggles[i].classList.add('dark');
+                         }
+                         if (!hasClass) {
+                              document.body.classList.add('dark');
+                         }
+                    } else {
+                         for (var i = 0; i < $darkModeToggles.length; i++) {
+                              $darkModeToggles[i].classList.remove('dark');
+                         }
+                         if (hasClass) {
+                              document.body.classList.remove('dark');
+                         }
+                    }
+               }
+               useDark.addEventListener('change', function (evt) {
+                    toggleDarkMode(evt.matches);
+               });
+               if (darkModeStateLocal) {
+                    darkModeState = darkModeStateLocal === 'true';
+               }
+               toggleDarkMode(darkModeState);
+          </script>
+        <div class="navbar navbar-default navbar-fixed-top d-md-none p-0">
+               <div class="d-flex">
+                    <a href="../" class="navbar-brand">carbon-components-angular documentation</a>
+                    <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
+               </div>
         </div>
         <div class="xs-menu menu" id="mobile-menu">
@@ -24,7 +75,7 @@
         <div class="container-fluid main">
            <div class="row main">
-               <div class="hidden-xs menu">
+               <div class="d-none d-md-block menu">
                    <compodoc-menu mode="normal"></compodoc-menu>
                </div>
                <!-- START CONTENT -->
@@ -77,7 +128,7 @@
         <h3>Extends</h3>
     </p>
     <p class="comment">
-                <code><a href="../components/BaseIconButton.html" target="_self" >BaseIconButton</a></code>
+                    <code><a href="../components/BaseIconButton.html" target="_self" >BaseIconButton</a></code>
     </p>
@@ -717,21 +768,21 @@ This is not toggleable - should be assigned once</p>
             </tr>
-            <tr>
-                <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="59"
-                            class="link-to-prism">src/ui-shell/header/header-action.component.ts:59</a></div>
-                </td>
-            </tr>
+                    <tr>
+                        <td class="col-md-4">
+                            <div class="io-line">Defined in <a href="" data-line="59"
+                                    class="link-to-prism">src/ui-shell/header/header-action.component.ts:59</a></div>
+                        </td>
+                    </tr>
             <tr>
                 <td class="col-md-4">
-                    <div class="io-description">
-                        <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
+                        <div class="io-description">
+                            <b>Returns : </b>        <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
-                    </div>
+                        </div>
                 </td>
             </tr>
         </tbody>
@@ -889,6 +940,19 @@ export class HeaderAction extends BaseIconButton {
             var MAX_SEARCH_RESULTS = 15;
        </script>
+       <script>
+               $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
+               checkToggle(darkModeState);
+               if ($darkModeToggleSwitchers.length > 0) {
+                    for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
+                         $darkModeToggleSwitchers[i].addEventListener('change', function (event) {
+                              darkModeState = !darkModeState;
+                              toggleDarkMode(darkModeState);
+                         });
+                    }
+               }
+          </script>
        <script src="../js/libs/custom-elements.min.js"></script>
        <script src="../js/libs/lit-html.js"></script>

package/docs/documentation/components/HeaderGlobal.html CHANGED Viewed

@@ -12,10 +12,61 @@
         <link rel="stylesheet" href="../styles/dark.css">
     </head>
     <body>
-        <div class="navbar navbar-default navbar-fixed-top d-block d-sm-none">
-            <a href="../" class="navbar-brand">carbon-components-angular documentation</a>
-            <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
+          <script>
+               // Blocking script to avoid flickering dark mode
+               // Dark mode toggle button
+               var useDark = window.matchMedia('(prefers-color-scheme: dark)');
+               var darkModeState = useDark.matches;
+               var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
+               var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
+               var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
+               function checkToggle(check) {
+                    for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
+                         $darkModeToggleSwitchers[i].checked = check;
+                    }
+               }
+               function toggleDarkMode(state) {
+                    if (window.localStorage) {
+                         localStorage.setItem('compodoc_darkmode-state', state);
+                    }
+                    checkToggle(state);
+                    const hasClass = document.body.classList.contains('dark');
+                    if (state) {
+                         for (var i = 0; i < $darkModeToggles.length; i++) {
+                              $darkModeToggles[i].classList.add('dark');
+                         }
+                         if (!hasClass) {
+                              document.body.classList.add('dark');
+                         }
+                    } else {
+                         for (var i = 0; i < $darkModeToggles.length; i++) {
+                              $darkModeToggles[i].classList.remove('dark');
+                         }
+                         if (hasClass) {
+                              document.body.classList.remove('dark');
+                         }
+                    }
+               }
+               useDark.addEventListener('change', function (evt) {
+                    toggleDarkMode(evt.matches);
+               });
+               if (darkModeStateLocal) {
+                    darkModeState = darkModeStateLocal === 'true';
+               }
+               toggleDarkMode(darkModeState);
+          </script>
+        <div class="navbar navbar-default navbar-fixed-top d-md-none p-0">
+               <div class="d-flex">
+                    <a href="../" class="navbar-brand">carbon-components-angular documentation</a>
+                    <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
+               </div>
         </div>
         <div class="xs-menu menu" id="mobile-menu">
@@ -24,7 +75,7 @@
         <div class="container-fluid main">
            <div class="row main">
-               <div class="hidden-xs menu">
+               <div class="d-none d-md-block menu">
                    <compodoc-menu mode="normal"></compodoc-menu>
                </div>
                <!-- START CONTENT -->
@@ -344,6 +395,19 @@ export class HeaderGlobal {
             var MAX_SEARCH_RESULTS = 15;
        </script>
+       <script>
+               $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
+               checkToggle(darkModeState);
+               if ($darkModeToggleSwitchers.length > 0) {
+                    for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
+                         $darkModeToggleSwitchers[i].addEventListener('change', function (event) {
+                              darkModeState = !darkModeState;
+                              toggleDarkMode(darkModeState);
+                         });
+                    }
+               }
+          </script>
        <script src="../js/libs/custom-elements.min.js"></script>
        <script src="../js/libs/lit-html.js"></script>