Merging 'master' branch into 'next'

.editorconfig

@@ -10,6 +10,14 @@ indent_size = 4
 trim_trailing_whitespace = true
 insert_final_newline = true
 
+[*.json]
+charset = utf-8
+end_of_file = lf
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
+
 [*.yml]
 charset = utf-8
 indent_style = space

.github/workflows/check-build.yml

@@ -11,9 +11,10 @@ jobs:
 
     runs-on: ubuntu-latest
 
+    # We use Node v18 for building since CCA@v5 is using Angular 14.
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
 
     steps:
     - uses: actions/checkout@v3
@@ -39,10 +40,11 @@ jobs:
 
     runs-on: ubuntu-latest
 
+    # We use Node v20 for building since it is current lts. Node v16 is no longer supported in Angular 17.
     strategy:
       matrix:
-        angular-version: [14, 15, 16]
-        node-version: [16.x]
+        angular-version: [14, 15, 16, 17, 18]
+        node-version: [20.x]
 
     steps:
     - uses: actions/checkout@v3

.github/workflows/publish.yml

@@ -8,22 +8,30 @@ on:
   # Allows us to run this workflow manually from the Actions tab
   workflow_dispatch:
 
+permissions:
+  contents: read # for checkout
+
 jobs:
   # Single deploy job since we're just deploying
   publish:
     environment:
       name: Deploy
     runs-on: ubuntu-latest
+    permissions:
+      contents: write # to be able to publish a GitHub release
+      issues: write # to be able to comment on released issues
+      pull-requests: write # to be able to comment on pull requests
+      id-token: write # to enable use of ODIC for npm provenance
     steps:
       # Checkout to branch
       - name: Checkout
         uses: actions/checkout@v3
 
-      # Set up node to use v16
+      # Set up node to use v18
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: "18"
           cache: "npm"
           cache-dependency-path: "package-lock.json"
 

.gitignore

@@ -1,4 +1,4 @@
-/.angular/cache
+.angular/cache
 .DS_Store
 *.log*
 *.swp

.storybook/main.js

@@ -10,7 +10,8 @@ module.exports = {
 				backgrounds: false
 			}
 		},
-		"@storybook/addon-a11y"
+		"@storybook/addon-a11y",
+		"@storybook/addon-storysource"
 	],
 	framework: {
 		name: "@storybook/angular",

.storybook/manager-head.html

@@ -10,19 +10,63 @@
 <meta name="twitter:image" content="https://angular.carbondesignsystem.com/carbon.jpg">
 <meta name="twitter:card" content="summary_large_image">
 
+<footer>
+	<dds-footer-container key="footer" disable-locale-button="true" size="micro" />
+</footer>
+
+<script
+	key="8"
+	type="module"
+	src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/footer.min.js">
+</script>
+
 <!-- Storybook override -->
 <script>
 	document.title = "Carbon Components Angular";
 </script>
 
-<!-- Google Analytics v4 setup -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-G070S732G6"></script>
-<script>
-	window.dataLayer = window.dataLayer || [];
-	function gtag() { dataLayer.push(arguments); }
-	gtag('js', new Date());
-
-	gtag('config', 'G-G070S732G6', {
-		send_page_view: false
-	});
+<!-- Tealium/GA Set up -->
+<script type="text/javascript">
+	window._ibmAnalytics = {
+		settings: {
+			name: 'CarbonAngularStorybook',
+			isSpa: true,
+			tealiumProfileName: 'ibm-web-app',
+		},
+		onLoad: [['ibmStats.pageview', []]],
+	};
+	digitalData = {
+		page: {
+			pageInfo: {
+				ibm: {
+					siteId: 'IBM_' + _ibmAnalytics.settings.name,
+				},
+			},
+			category: {
+				primaryCategory: 'PC100',
+			},
+		},
+	};
+</script>
+<script
+	src="//1.www.s81c.com/common/stats/ibm-common.js"
+	type="text/javascript"
+	async="async">
 </script>
+
+<style>
+	footer {
+		position: absolute;
+		bottom: 0;
+		width: 100%;
+		z-index: 9999;
+	}
+
+	#root > div {
+		/*
+		 * Subtracting the height of the footer to prevent
+		 * overlaying the footer ontop of content
+		 */
+		height: calc(100vh - 48px);
+	}
+</style>

.storybook/preview.scss

@@ -6,6 +6,14 @@ html {
 	@include styles.theme(styles.$white);
 }
 
+.innerZoomElementWrapper {
+	min-width: 55rem;
+}
+
+.docblock-argstable {
+	margin-bottom: 10rem;
+}
+
 /*
  * Story batch styling, we are wrapping the storybook decorator function to ensure
  * styles do not leak to other components

README.md

@@ -55,7 +55,7 @@ That's it! Now we can run `npm start` and start building out our application!
   - IBMers should use our #carbon-ng Slack channel
 
 Angular version support matrix:
-| Angular | v3 | v4 | v5 (future release) |
+| Angular | v3 | v4 | v5 |
 | ------- | -- | -- | ------------------- |
 | 6       | ✅ | ❌ | ❌                   |
 | 7       | ✅ | ✅ | ❌                   |
@@ -68,6 +68,8 @@ Angular version support matrix:
 | 14      | ❌ | ✅ | ✅                   |
 | 15      | ❌ | ✅ | ✅                   |
 | 16      | ❌ | ❌ | ✅                   |
+| 17      | ❌ | ❌ | ✅                   |
+| 18      | ❌ | ❌ | ✅                   |
 
 Carbon Components Angular version support matrix:
 | Carbon Components Angular version | Community support | Active support |
@@ -99,7 +101,7 @@ How to read this table:
 - **if you are contributing a fix**:
   - add your fix, update the documentation as needed
   - consider adding or modifying a test case to cover the fix
-- follow the [Angular style guide](https://angular.io/styleguide)
+- follow the [Angular style guide](https://angular.dev/style-guide)
 - be sure to run `npm test` and `npm run lint` to make sure the tests and linter pass
 - submit a PR
 
@@ -163,3 +165,11 @@ To keep our build dependencies local we use npm scripts to run our webpack, gulp
 
 ## Code of Conduct
 Read our code of conduct [here](./.github/CODE_OF_CONDUCT.md)
+
+## <picture><source height="20" width="20" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg"><source height="20" width="20" media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"><img height="20" width="20" alt="IBM Telemetry" src="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"></picture> IBM Telemetry
+
+This package uses IBM Telemetry to collect de-identified and anonymized metrics data. By installing
+this package as a dependency you are agreeing to telemetry collection. To opt out, see
+[Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).
+For more information on the data being collected, please see the
+[IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).

angular.json

@@ -71,7 +71,8 @@
 							"-t"
 						],
 						"configDir": ".storybook",
-						"outputDir": "dist/docs/storybook"
+						"outputDir": "dist/docs/storybook",
+						"enableProdMode": false
 					}
 				}
 			}