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

carbon-components-angular 5.26.1 → 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 (336) 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 +149 -89
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.html +69 -5
package/docs/documentation/modules/ComboBoxModule.html +69 -5
package/docs/documentation/modules/ContainedListModule.html +69 -5
package/docs/documentation/modules/ContentSwitcherModule.html +69 -5
package/docs/documentation/modules/ContextMenuModule.html +69 -5
package/docs/documentation/modules/DatePickerInputModule.html +69 -5
package/docs/documentation/modules/DatePickerModule.html +69 -5
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.html +69 -5
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.html +69 -5
package/docs/documentation/modules/PaginationModule.html +69 -5
package/docs/documentation/modules/PanelModule.html +69 -5
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.html +69 -5
package/docs/documentation/modules/SearchModule.html +69 -5
package/docs/documentation/modules/SelectModule.html +69 -5
package/docs/documentation/modules/SideNavModule.html +69 -5
package/docs/documentation/modules/SkeletonModule.html +69 -5
package/docs/documentation/modules/SliderModule.html +69 -5
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.html +69 -5
package/docs/documentation/modules/ThemeModule/dependencies.svg +4 -4
package/docs/documentation/modules/ThemeModule.html +73 -9
package/docs/documentation/modules/TilesModule/dependencies.svg +4 -4
package/docs/documentation/modules/TilesModule.html +73 -9
package/docs/documentation/modules/TimePickerModule/dependencies.svg +17 -17
package/docs/documentation/modules/TimePickerModule.html +86 -22
package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +4 -4
package/docs/documentation/modules/TimePickerSelectModule.html +73 -9
package/docs/documentation/modules/ToggleModule/dependencies.svg +4 -4
package/docs/documentation/modules/ToggleModule.html +73 -9
package/docs/documentation/modules/ToggletipModule/dependencies.svg +37 -37
package/docs/documentation/modules/ToggletipModule.html +106 -42
package/docs/documentation/modules/TooltipModule/dependencies.svg +4 -4
package/docs/documentation/modules/TooltipModule.html +73 -9
package/docs/documentation/modules/TreeviewModule/dependencies.svg +34 -34
package/docs/documentation/modules/TreeviewModule.html +103 -39
package/docs/documentation/modules/UIShellModule/dependencies.svg +4 -4
package/docs/documentation/modules/UIShellModule.html +73 -9
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 +2067 -1757
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.b589439b.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/fesm2015/carbon-components-angular-tabs.mjs +24 -7
package/fesm2015/carbon-components-angular-tabs.mjs.map +1 -1
package/fesm2020/carbon-components-angular-tabs.mjs +24 -7
package/fesm2020/carbon-components-angular-tabs.mjs.map +1 -1
package/package.json +1 -1
package/tabs/tab.component.d.ts +10 -1
package/docs/storybook/main.5c20d10a.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/ModalHeaderLabel.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 ModalHeaderLabel {
             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/NotificationSubtitle.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 NotificationSubtitle {
             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/NotificationTitle.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 NotificationTitle {
             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/OptGroup.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 -->
@@ -280,6 +331,19 @@ export class OptGroup {
             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/Option.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 -->
@@ -280,6 +331,19 @@ export class Option {
             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>