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/directives/TableHeaderTitle.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 -->
@@ -358,6 +409,19 @@ export class TableHeaderTitle {
             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/directives/TextArea.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 -->
@@ -73,7 +124,7 @@
             <p class="comment">
                 <p>A directive for applying styling to a textarea element.</p>
 <p>Example:</p>
-<div><pre class="line-numbers"><code class="language-html">&lt;textarea cdsTextArea&gt;&lt;/textarea&gt;</code></pre></div><p>See the <a href="http://www.carbondesignsystem.com/components/text-input/code">vanilla carbon docs</a> for more detail.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;textarea cdsTextArea&gt;&lt;/textarea&gt;</code></pre></div><p>See the <a href="http://www.carbondesignsystem.com/components/text-input/code">vanilla carbon docs</a> for more detail.</p>
             </p>
@@ -474,6 +525,19 @@ export class TextArea {
             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/directives/TextInput.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 -->
@@ -73,7 +124,7 @@
             <p class="comment">
                 <p>A directive for applying styling to an input element.</p>
 <p>Example:</p>
-<div><pre class="line-numbers"><code class="language-html">&lt;input cdsText/&gt;</code></pre></div><p>See the <a href="http://www.carbondesignsystem.com/components/text-input/code">vanilla carbon docs</a> for more detail.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;input cdsText/&gt;</code></pre></div><p>See the <a href="http://www.carbondesignsystem.com/components/text-input/code">vanilla carbon docs</a> for more detail.</p>
             </p>
@@ -900,6 +951,19 @@ export class TextInput {
             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/directives/ThemeDirective.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 -->
@@ -72,7 +123,7 @@
             </p>
             <p class="comment">
                 <p>Applies theme styles to the div container it is applied to. Get started with importing the module:</p>
-<div><pre class="line-numbers"><code class="language-typescript">import { ThemeModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href="../../?path=/story/components-theme--basic">See demo</a></p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">import { ThemeModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href="../../?path=/story/components-theme--basic">See demo</a></p>
             </p>
@@ -451,21 +502,21 @@ overwrite user added classes</p>
             </tr>
-            <tr>
-                <td class="col-md-4">
-                    <div class="io-line">Defined in <a href="" data-line="65"
-                            class="link-to-prism">src/theme/theme.directive.ts:65</a></div>
-                </td>
-            </tr>
+                    <tr>
+                        <td class="col-md-4">
+                            <div class="io-line">Defined in <a href="" data-line="65"
+                                    class="link-to-prism">src/theme/theme.directive.ts:65</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>
@@ -838,6 +889,19 @@ export class ThemeDirective implements AfterContentChecked {
             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/directives/ToastCaption.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 -->
@@ -273,6 +324,19 @@ export class ToastCaption {
             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/directives/ToastSubtitle.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 -->
@@ -273,6 +324,19 @@ export class ToastSubtitle {
             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>