npm - carbon-components-angular - Versions diffs - 5.56.5 → 5.57.0 - Mend

carbon-components-angular 5.56.5 → 5.57.0

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 (587) hide show

package/docs/documentation/index.html CHANGED Viewed

@@ -110,13 +110,24 @@
 <p>Assuming we&#39;re starting with a new @angular/cli project:</p>
 <b>Example :</b><div><pre class="line-numbers"><code class="language-shell">$ npx &#64;angular/cli new my-project --style=scss
 $ cd my-project
-$ npm i --save carbon-components-angular &#64;carbon/styles</code></pre></div><p>Then we need to include carbon-components in <code>src/styles.scss</code>:</p>
-<b>Example :</b><div><pre class="line-numbers"><code class="language-scss">&#64;use &quot;&#64;carbon/styles&quot;;</code></pre></div><blockquote>
-<p><em>Note:</em> For offline usage we&#39;ll need to set <code>$font-path: &#39;~carbon-components/src/globals/fonts&#39;;</code> at the very top of our <code>src/styles.scss</code>. This will copy the fonts to our <code>dist</code> folder upon successful build. If you like the fonts to be a part of your <code>assets</code> folder and not pollute the <code>dist</code> folder then copy the fonts from <code>node_modules/carbon-components/src/globals/fonts</code> into our app&#39;s <code>src/assets/fonts</code> folder and add <code>$font-path: &#39;/assets/fonts/&#39;;</code> at the very top of our <code>src/styles.scss</code>.</p>
-</blockquote>
-<p>That&#39;s it! Now we can run <code>npm start</code> and start building out our application!</p>
+$ npm i --save carbon-components-angular &#64;carbon/styles &#64;carbon/icons</code></pre></div><p>Next, we need to include carbon styles in <code>src/styles.scss</code>:</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-scss">&#64;use &#39;&#64;carbon/styles/scss/config&#39; with (
+    // Use flexbox for grid - stick to CSS Grid or Flexbox
+    // CSS Grid has become the default grid system in v11
+    $use-flexbox-grid: true,
+    // Update path of fonts to exclude tilde, required for vite (Angular 16+)
+    $font-path: &#39;&#64;ibm/plex&#39;
+);
+&#64;use &#39;&#64;carbon/styles&#39;;
+// Import css variables in root
+html {
+    &#64;include styles.theme(styles.$white);
+}</code></pre></div><p>Then we need to declare <code>@carbon/icons</code> as a module by creating a <code>module.d.ts</code> file (or use any existing declaration file - has <code>.d.ts</code> suffix) in your src directory:</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-ts">declare module &#39;&#64;carbon/icons/*&#39;;</code></pre></div><p>That&#39;s it! Now we can run <code>npm start</code> and start building out our application!</p>
 <blockquote>
-<p><em>Note:</em> This isn&#39;t the only way to bootstrap a <code>carbon-components-angular</code> application, but the combination of <code>@angular/cli</code> and the <code>carbon-components</code> scss is our recommended setup.</p>
+<p><em>Note:</em> This isn&#39;t the only way to bootstrap a <code>carbon-components-angular</code> application, but the combination of <code>@angular/cli</code> and the <code>@carbon/styles</code> scss is our recommended setup.</p>
 </blockquote>
 <p><a href="https://stackblitz.com/edit/stackblitz-starters-exxkq4?file=src%2Fmain.ts"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt="Edit Carbon Components Angular" class="img-responsive"></a></p>
 <h3>Support</h3>

package/docs/documentation/interfaces/ItemClickEvent.html ADDED Viewed

@@ -0,0 +1,437 @@
+<!doctype html>
+<html class="no-js" lang="">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <title>carbon-components-angular documentation</title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="icon" type="image/x-icon" href="../images/favicon.ico">
+	   <link rel="stylesheet" href="../styles/style.css">
+        <link rel="stylesheet" href="../styles/dark.css">
+    </head>
+    <body>
+          <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">
+                <div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div>            <compodoc-menu></compodoc-menu>
+        </div>
+        <div class="container-fluid main">
+           <div class="row main">
+               <div class="d-none d-md-block menu">
+                   <compodoc-menu mode="normal"></compodoc-menu>
+               </div>
+               <!-- START CONTENT -->
+               <div class="content interface">
+                   <div class="content-data">
+<ol class="breadcrumb">
+  <li class="breadcrumb-item">Interfaces</li>
+  <li class="breadcrumb-item"
+  >
+  ItemClickEvent</li>
+</ol>
+<ul class="nav nav-tabs" role="tablist">
+        <li class="nav-item">
+            <a href="#info"
+                class="nav-link"
+                class="nav-link active"
+                role="tab" id="info-tab" data-bs-toggle="tab" data-link="info">Info</a>
+        </li>
+        <li class="nav-item">
+            <a href="#source"
+                class="nav-link"
+                role="tab" id="source-tab" data-bs-toggle="tab" data-link="source">Source</a>
+        </li>
+</ul>
+<div class="tab-content">
+    <div class="tab-pane fade active in" id="info">
+        <p class="comment">
+            <h3>File</h3>
+        </p>
+        <p class="comment">
+            <code>src/context-menu/context-menu.types.ts</code>
+        </p>
+        <section data-compodoc="block-index">
+            <h3 id="index">Index</h3>
+            <table class="table table-sm table-bordered index-table">
+                <tbody>
+                    <tr>
+                        <td class="col-md-4">
+                            <h6><b>Properties</b></h6>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="col-md-4">
+                            <ul class="index-list">
+                                <li>
+                                        <a href="#event"
+>
+                                            event
+                                        </a>
+                                </li>
+                                <li>
+                                        <a href="#info"
+>
+                                            info
+                                        </a>
+                                </li>
+                                <li>
+                                        <a href="#label"
+>
+                                            label
+                                        </a>
+                                </li>
+                                <li>
+                                        <a href="#type"
+>
+                                            type
+                                        </a>
+                                </li>
+                                <li>
+                                        <a href="#value"
+>
+                                            value
+                                        </a>
+                                </li>
+                            </ul>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </section>
+            <section data-compodoc="block-properties">
+                <h3 id="inputs">Properties</h3>
+                    <table class="table table-sm table-bordered">
+                        <tbody>
+                                <tr>
+                                    <td class="col-md-4">
+                                        <a name="event"></a>
+                                        <span class="name "><b>event</b>
+                                            <a href="#event">
+                                                <span class="icon ion-ios-link"></span>
+                                            </a>
+                                        </span>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="col-md-4">
+                                        <code>event:     <code></code>
+</code>
+                                    </td>
+                                </tr>
+                        </tbody>
+                    </table>
+                    <table class="table table-sm table-bordered">
+                        <tbody>
+                                <tr>
+                                    <td class="col-md-4">
+                                        <a name="info"></a>
+                                        <span class="name "><b>info</b>
+                                            <a href="#info">
+                                                <span class="icon ion-ios-link"></span>
+                                            </a>
+                                        </span>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="col-md-4">
+                                        <code>info:         <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+</code>
+                                    </td>
+                                </tr>
+                                    <tr>
+                                        <td class="col-md-4">
+                                            <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+                                        </td>
+                                    </tr>
+                        </tbody>
+                    </table>
+                    <table class="table table-sm table-bordered">
+                        <tbody>
+                                <tr>
+                                    <td class="col-md-4">
+                                        <a name="label"></a>
+                                        <span class="name "><b>label</b>
+                                            <a href="#label">
+                                                <span class="icon ion-ios-link"></span>
+                                            </a>
+                                        </span>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="col-md-4">
+                                        <code>label:         <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+</code>
+                                    </td>
+                                </tr>
+                                    <tr>
+                                        <td class="col-md-4">
+                                            <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+                                        </td>
+                                    </tr>
+                        </tbody>
+                    </table>
+                    <table class="table table-sm table-bordered">
+                        <tbody>
+                                <tr>
+                                    <td class="col-md-4">
+                                        <a name="type"></a>
+                                        <span class="name "><b>type</b>
+                                            <a href="#type">
+                                                <span class="icon ion-ios-link"></span>
+                                            </a>
+                                        </span>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="col-md-4">
+                                        <code>type:     <code>null | &quot;checkbox&quot; | &quot;radio&quot;</code>
+</code>
+                                    </td>
+                                </tr>
+                                    <tr>
+                                        <td class="col-md-4">
+                                            <i>Type : </i>    <code>null | &quot;checkbox&quot; | &quot;radio&quot;</code>
+                                        </td>
+                                    </tr>
+                        </tbody>
+                    </table>
+                    <table class="table table-sm table-bordered">
+                        <tbody>
+                                <tr>
+                                    <td class="col-md-4">
+                                        <a name="value"></a>
+                                        <span class="name "><b>value</b>
+                                            <a href="#value">
+                                                <span class="icon ion-ios-link"></span>
+                                            </a>
+                                        </span>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="col-md-4">
+                                        <code>value:         <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+</code>
+                                    </td>
+                                </tr>
+                                    <tr>
+                                        <td class="col-md-4">
+                                            <i>Type : </i>        <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
+                                        </td>
+                                    </tr>
+                        </tbody>
+                    </table>
+            </section>
+    </div>
+    <div class="tab-pane fade  tab-source-code" id="source">
+        <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">export interface ItemClickEvent {
+	type: null | &quot;checkbox&quot; | &quot;radio&quot;;
+	label: string;
+	info: string;
+	value: string;
+	event: MouseEvent &amp; KeyboardEvent;
+}
+</code></pre>
+    </div>
+</div>
+                   </div><div class="search-results">
+    <div class="has-results">
+        <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
+        <ul class="search-results-list"></ul>
+    </div>
+    <div class="no-results">
+        <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
+    </div>
+</div>
+</div>
+               <!-- END CONTENT -->
+           </div>
+       </div>
+          <label class="dark-mode-switch">
+               <input type="checkbox">
+               <span class="slider">
+                    <svg class="slider-icon" viewBox="0 0 24 24" fill="none" height="20" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
+                    </svg>
+               </span>
+          </label>
+       <script>
+            var COMPODOC_CURRENT_PAGE_DEPTH = 1;
+            var COMPODOC_CURRENT_PAGE_CONTEXT = 'interface';
+            var COMPODOC_CURRENT_PAGE_URL = 'ItemClickEvent.html';
+            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>
+       <script src="../js/menu-wc.js" defer></script>
+       <script nomodule src="../js/menu-wc_es5.js" defer></script>
+       <script src="../js/libs/bootstrap-native.js"></script>
+       <script src="../js/libs/es6-shim.min.js"></script>
+       <script src="../js/libs/EventDispatcher.js"></script>
+       <script src="../js/libs/promise.min.js"></script>
+       <script src="../js/libs/zepto.min.js"></script>
+       <script src="../js/compodoc.js"></script>
+       <script src="../js/tabs.js"></script>
+       <script src="../js/menu.js"></script>
+       <script src="../js/libs/clipboard.min.js"></script>
+       <script src="../js/libs/prism.js"></script>
+       <script src="../js/sourceCode.js"></script>
+          <script src="../js/search/search.js"></script>
+          <script src="../js/search/lunr.min.js"></script>
+          <script src="../js/search/search-lunr.js"></script>
+          <script src="../js/search/search_index.js"></script>
+       <script src="../js/lazy-load-graphs.js"></script>
+    </body>
+</html>

package/docs/documentation/js/menu-wc.js CHANGED Viewed

@@ -202,6 +202,23 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                     </ul>
                                 </li>
                             </li>
+                            <li class="link">
+                                <a href="modules/ComboButtonModule.html" data-type="entity-link" >ComboButtonModule</a>
+                                    <li class="chapter inner">
+                                        <div class="simple menu-toggler" data-bs-toggle="collapse" ${ isNormalMode ?
+                                            'data-bs-target="#components-links-module-ComboButtonModule-705867ddb65364729d381c1f3180d6accbff37c0c8955fb5b71071da1f580561068f24f40d7675aa28ba456befe39edbb845b798e00ccd09f8cc6b11b4c002be"' : 'data-bs-target="#xs-components-links-module-ComboButtonModule-705867ddb65364729d381c1f3180d6accbff37c0c8955fb5b71071da1f580561068f24f40d7675aa28ba456befe39edbb845b798e00ccd09f8cc6b11b4c002be"' }>
+                                            <span class="icon ion-md-cog"></span>
+                                            <span>Components</span>
+                                            <span class="icon ion-ios-arrow-down"></span>
+                                        </div>
+                                        <ul class="links collapse" ${ isNormalMode ? 'id="components-links-module-ComboButtonModule-705867ddb65364729d381c1f3180d6accbff37c0c8955fb5b71071da1f580561068f24f40d7675aa28ba456befe39edbb845b798e00ccd09f8cc6b11b4c002be"' :
+                                            'id="xs-components-links-module-ComboButtonModule-705867ddb65364729d381c1f3180d6accbff37c0c8955fb5b71071da1f580561068f24f40d7675aa28ba456befe39edbb845b798e00ccd09f8cc6b11b4c002be"' }>
+                                            <li class="link">
+                                                <a href="components/ComboButtonComponent.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules" >ComboButtonComponent</a>
+                                            </li>
+                                        </ul>
+                                    </li>
+                            </li>
                             <li class="link">
                                 <a href="modules/ContainedListModule.html" data-type="entity-link" >ContainedListModule</a>
                                     <li class="chapter inner">
@@ -752,6 +769,23 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                         </ul>
                                     </li>
                             </li>
+                            <li class="link">
+                                <a href="modules/MenuButtonModule.html" data-type="entity-link" >MenuButtonModule</a>
+                                    <li class="chapter inner">
+                                        <div class="simple menu-toggler" data-bs-toggle="collapse" ${ isNormalMode ?
+                                            'data-bs-target="#components-links-module-MenuButtonModule-a2df7769bd937428742a3e946e0288a88c29ba93b25b8e09901809b47c5d729a417d06557fd6bbd05530b891ff5302f6f08371d670740544f0addfa7e7781a8a"' : 'data-bs-target="#xs-components-links-module-MenuButtonModule-a2df7769bd937428742a3e946e0288a88c29ba93b25b8e09901809b47c5d729a417d06557fd6bbd05530b891ff5302f6f08371d670740544f0addfa7e7781a8a"' }>
+                                            <span class="icon ion-md-cog"></span>
+                                            <span>Components</span>
+                                            <span class="icon ion-ios-arrow-down"></span>
+                                        </div>
+                                        <ul class="links collapse" ${ isNormalMode ? 'id="components-links-module-MenuButtonModule-a2df7769bd937428742a3e946e0288a88c29ba93b25b8e09901809b47c5d729a417d06557fd6bbd05530b891ff5302f6f08371d670740544f0addfa7e7781a8a"' :
+                                            'id="xs-components-links-module-MenuButtonModule-a2df7769bd937428742a3e946e0288a88c29ba93b25b8e09901809b47c5d729a417d06557fd6bbd05530b891ff5302f6f08371d670740544f0addfa7e7781a8a"' }>
+                                            <li class="link">
+                                                <a href="components/MenuButtonComponent.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules" >MenuButtonComponent</a>
+                                            </li>
+                                        </ul>
+                                    </li>
+                            </li>
                             <li class="link">
                                 <a href="modules/ModalModule.html" data-type="entity-link" >ModalModule</a>
                                     <li class="chapter inner">
@@ -1757,6 +1791,9 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                             <li class="link">
                                 <a href="interfaces/IconDescriptor.html" data-type="entity-link" >IconDescriptor</a>
                             </li>
+                            <li class="link">
+                                <a href="interfaces/ItemClickEvent.html" data-type="entity-link" >ItemClickEvent</a>
+                            </li>
                             <li class="link">
                                 <a href="interfaces/ListItem.html" data-type="entity-link" >ListItem</a>
                             </li>