carbon-components-angular 5.24.7 → 5.24.8

package/docs/documentation.json

@@ -21430,7 +21430,7 @@
         },
         {
             "name": "CodeSnippet",
-            "id": "component-CodeSnippet-01866e185f9515d76fc82300564aa4d98b740eaf72ba485f93e8eab93bff3d2e10f894ce21bcee7980aae36e72bc9186b7924add78537f8df229b5c05657ec40",
+            "id": "component-CodeSnippet-c3a1b7fec13daa1d2f52b8c4c93ea7e2b66a1759daee08ca1125a3593a3af8bf5c62ef7465771b862d6a11c58fab82a0b8c81ac2ae2ca8cf1295aa293c4d8357",
             "file": "src/code-snippet/code-snippet.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -21440,7 +21440,7 @@
             "selector": "cds-code-snippet, ibm-code-snippet",
             "styleUrls": [],
             "styles": [],
-            "template": "<ng-container *ngIf=\"display === 'inline'; else notInline\">\n\t<ng-container *ngIf=\"!hideCopyButton; else noBtnInline\">\n\t\t<ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n\t</ng-container>\n\t<ng-template #noBtnInline>\n\t\t<span\n\t\t\tclass=\"cds--snippet cds--snippet--inline cds--snippet--no-copy\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--snippet--light': theme === 'light'\n\t\t\t}\">\n\t\t\t<code #code>\n\t\t\t\t<ng-container *ngTemplateOutlet=\"codeTemplate\"></ng-container>\n\t\t\t</code>\n\t\t</span>\n\t</ng-template>\n</ng-container>\n\n<ng-template #notInline>\n\t<div\n\t\t#codeContainer\n\t\tclass=\"cds--snippet-container\"\n\t\t[attr.aria-label]=\"translations.CODE_SNIPPET_TEXT\"\n\t\t[attr.tabindex]=\"display === 'single' && !disabled ? '0' : null\"\n\t\t[attr.role]=\"display==='single' ? 'textarea' : null\"\n\t\t[ngStyle]=\"styles\"\n\t\t(scroll)=\"(display === 'single' ? handleScroll() : null)\">\n\t\t<ng-container *ngIf=\"skeleton\">\n\t\t\t<span *ngIf=\"display === 'single'; else multiSkeleton\"></span>\n\t\t\t<ng-template #multiSkeleton>\n\t\t\t\t<span></span>\n\t\t\t\t<span></span>\n\t\t\t\t<span></span>\n\t\t\t</ng-template>\n\t\t</ng-container>\n\t\t<pre\n\t\t\t#codeContent\n\t\t\t*ngIf=\"!skeleton\"\n\t\t\t(scroll)=\"(display === 'multi' ? handleScroll() : null)\"><code #code><ng-container *ngTemplateOutlet=\"codeTemplate\"></ng-container></code></pre>\n\t</div>\n\t<div *ngIf=\"hasLeft\" class=\"cds--snippet__overflow-indicator--left\"></div>\n\t<div *ngIf=\"hasRight\" class=\"cds--snippet__overflow-indicator--right\"></div>\n\t<ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n\t<button\n\t\t*ngIf=\"isExpandable\"\n\t\tclass=\"cds--btn cds--btn--ghost cds--btn--sm cds--snippet-btn--expand\"\n\t\t(click)=\"toggleSnippetExpansion()\"\n\t\ttype=\"button\">\n\t\t<span class=\"cds--snippet-btn--text\">{{expanded ? translations.SHOW_LESS : translations.SHOW_MORE}}</span>\n\t\t<svg cdsIcon=\"chevron--down\" size=\"16\" class=\"cds--icon-chevron--down\" [attr.aria-label]=\"translations.SHOW_MORE_ICON\"></svg>\n\t</button>\n</ng-template>\n\n<ng-template #buttonTemplate>\n\t<cds-icon-button\n\t\t*ngIf=\"!skeleton\"\n\t\t[description]=\"showFeedback ? feedbackText : copyButtonDescription\"\n\t\t[align]=\"align\"\n\t\t[dropShadow]=\"dropShadow\"\n\t\t[caret]=\"caret\"\n\t\t[highContrast]=\"highContrast\"\n\t\t[isOpen]=\"isOpen\"\n\t\t[enterDelayMs]=\"enterDelayMs\"\n\t\t[leaveDelayMs]=\"leaveDelayMs\"\n\t\ttype=\"button\"\n\t\tkind=\"primary\"\n\t\tsize=\"md\"\n\t\t(click)=\"onCopyButtonClicked($event)\"\n\t\t[buttonNgClass]=\"{\n\t\t\t'cds--snippet--light': theme === 'light',\n\t\t\t'cds--snippet--inline': display === 'inline',\n\t\t\t'cds--btn--icon-only': display !== 'inline',\n\t\t\t'cds--copy-btn': display !== 'inline',\n\t\t\t'cds--copy-btn--animating': animating,\n\t\t\t'cds--copy-btn--fade-in': showFeedback,\n\t\t\t'cds--copy-btn--fade-out': !showFeedback && animating,\n\t\t\t'cds--snippet cds--copy': true\n\t\t}\"\n\t\t[buttonAttributes]=\"{\n\t\t\t'aria-label': translations.COPY_CODE,\n\t\t\t'aria-live': 'polite',\n\t\t\t'tabindex': '0'\n\t\t}\">\n\t\t<ng-container *ngIf=\"display === 'inline'\">\n\t\t\t<code #code>\n\t\t\t\t<ng-container *ngTemplateOutlet=\"codeTemplate\"></ng-container>\n\t\t\t</code>\n\t\t</ng-container>\n\t\t<ng-container *ngIf=\"display !== 'inline'\">\n\t\t\t<svg cdsIcon=\"copy\" size=\"16\" class=\"cds--snippet__icon\"></svg>\n\t\t</ng-container>\n\t</cds-icon-button>\n</ng-template>\n\n<ng-template #codeTemplate>\n\t<ng-content></ng-content>\n</ng-template>\n\t",
+            "template": "<ng-container *ngIf=\"display === 'inline'; else notInline\">\n\t<ng-container *ngIf=\"!hideCopyButton; else noBtnInline\">\n\t\t<ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n\t</ng-container>\n\t<ng-template #noBtnInline>\n\t\t<span\n\t\t\tclass=\"cds--snippet cds--snippet--inline cds--snippet--no-copy\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--snippet--light': theme === 'light'\n\t\t\t}\">\n\t\t\t<code #code>\n\t\t\t\t<ng-container *ngTemplateOutlet=\"codeTemplate\"></ng-container>\n\t\t\t</code>\n\t\t</span>\n\t</ng-template>\n</ng-container>\n\n<ng-template #notInline>\n\t<div\n\t\t#codeContainer\n\t\tclass=\"cds--snippet-container\"\n\t\t[attr.aria-label]=\"translations.CODE_SNIPPET_TEXT\"\n\t\t[attr.tabindex]=\"display === 'single' && !disabled ? '0' : null\"\n\t\t[attr.role]=\"display==='single' ? 'textarea' : null\"\n\t\t[ngStyle]=\"styles\"\n\t\t(scroll)=\"(display === 'single' ? handleScroll() : null)\">\n\t\t<ng-container *ngIf=\"skeleton\">\n\t\t\t<span *ngIf=\"display === 'single'; else multiSkeleton\"></span>\n\t\t\t<ng-template #multiSkeleton>\n\t\t\t\t<span></span>\n\t\t\t\t<span></span>\n\t\t\t\t<span></span>\n\t\t\t</ng-template>\n\t\t</ng-container>\n\t\t<pre\n\t\t\t#codeContent\n\t\t\t*ngIf=\"!skeleton\"\n\t\t\t(scroll)=\"(display === 'multi' ? handleScroll() : null)\"><code #code><ng-container *ngTemplateOutlet=\"codeTemplate\"></ng-container></code></pre>\n\t</div>\n\t<div *ngIf=\"hasLeft\" class=\"cds--snippet__overflow-indicator--left\"></div>\n\t<div *ngIf=\"hasRight\" class=\"cds--snippet__overflow-indicator--right\"></div>\n\t<ng-container *ngIf=\"!hideCopyButton;\">\n\t\t<ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n\t</ng-container>\n\t<button\n\t\t*ngIf=\"isExpandable\"\n\t\tclass=\"cds--btn cds--btn--ghost cds--btn--sm cds--snippet-btn--expand\"\n\t\t(click)=\"toggleSnippetExpansion()\"\n\t\ttype=\"button\">\n\t\t<span class=\"cds--snippet-btn--text\">{{expanded ? translations.SHOW_LESS : translations.SHOW_MORE}}</span>\n\t\t<svg cdsIcon=\"chevron--down\" size=\"16\" class=\"cds--icon-chevron--down\" [attr.aria-label]=\"translations.SHOW_MORE_ICON\"></svg>\n\t</button>\n</ng-template>\n\n<ng-template #buttonTemplate>\n\t<cds-icon-button\n\t\t*ngIf=\"!skeleton\"\n\t\t[description]=\"showFeedback ? feedbackText : copyButtonDescription\"\n\t\t[align]=\"align\"\n\t\t[dropShadow]=\"dropShadow\"\n\t\t[caret]=\"caret\"\n\t\t[highContrast]=\"highContrast\"\n\t\t[isOpen]=\"isOpen\"\n\t\t[enterDelayMs]=\"enterDelayMs\"\n\t\t[leaveDelayMs]=\"leaveDelayMs\"\n\t\ttype=\"button\"\n\t\tkind=\"primary\"\n\t\tsize=\"md\"\n\t\t(click)=\"onCopyButtonClicked($event)\"\n\t\t[buttonNgClass]=\"{\n\t\t\t'cds--snippet--light': theme === 'light',\n\t\t\t'cds--snippet--inline': display === 'inline',\n\t\t\t'cds--btn--icon-only': display !== 'inline',\n\t\t\t'cds--copy-btn': display !== 'inline',\n\t\t\t'cds--copy-btn--animating': animating,\n\t\t\t'cds--copy-btn--fade-in': showFeedback,\n\t\t\t'cds--copy-btn--fade-out': !showFeedback && animating,\n\t\t\t'cds--snippet cds--copy': true\n\t\t}\"\n\t\t[buttonAttributes]=\"{\n\t\t\t'aria-label': translations.COPY_CODE,\n\t\t\t'aria-live': 'polite',\n\t\t\t'tabindex': '0'\n\t\t}\">\n\t\t<ng-container *ngIf=\"display === 'inline'\">\n\t\t\t<code #code>\n\t\t\t\t<ng-container *ngTemplateOutlet=\"codeTemplate\"></ng-container>\n\t\t\t</code>\n\t\t</ng-container>\n\t\t<ng-container *ngIf=\"display !== 'inline'\">\n\t\t\t<svg cdsIcon=\"copy\" size=\"16\" class=\"cds--snippet__icon\"></svg>\n\t\t</ng-container>\n\t</cds-icon-button>\n</ng-template>\n\n<ng-template #codeTemplate>\n\t<ng-content></ng-content>\n</ng-template>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -21451,7 +21451,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\ncopy button description to show on hover\n",
                     "description": "<p>copy button description to show on hover</p>\n",
-                    "line": 161,
+                    "line": 163,
                     "type": "string",
                     "decorators": []
                 },
@@ -21462,7 +21462,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to disable the code snippet\n",
                     "description": "<p>Set to <code>true</code> to disable the code snippet</p>\n",
-                    "line": 169,
+                    "line": 171,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -21473,7 +21473,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nIt can be `\"single\"`, `\"multi\"` or `\"inline\"`\n",
                     "description": "<p>It can be <code>&quot;single&quot;</code>, <code>&quot;multi&quot;</code> or <code>&quot;inline&quot;</code></p>\n",
-                    "line": 156,
+                    "line": 158,
                     "type": "SnippetType",
                     "decorators": []
                 },
@@ -21482,7 +21482,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 209,
+                    "line": 211,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -21493,7 +21493,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nText displayed in the tooltip when user clicks button to copy code.\n",
                     "description": "<p>Text displayed in the tooltip when user clicks button to copy code.</p>\n",
-                    "line": 202,
+                    "line": 204,
                     "type": "any",
                     "decorators": []
                 },
@@ -21504,7 +21504,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTime in miliseconds to keep the feedback tooltip displayed.\nDefaults to 2 seconds\n",
                     "description": "<p>Time in miliseconds to keep the feedback tooltip displayed.\nDefaults to 2 seconds</p>\n",
-                    "line": 207,
+                    "line": 209,
                     "type": "number",
                     "decorators": []
                 },
@@ -21515,7 +21515,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to hide copy button\n",
                     "description": "<p>Set to <code>true</code> to hide copy button</p>\n",
-                    "line": 165,
+                    "line": 167,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -21526,7 +21526,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSpecify the max number of rows to show when collapsed\nDefault is `15`\n",
                     "description": "<p>Specify the max number of rows to show when collapsed\nDefault is <code>15</code></p>\n",
-                    "line": 174,
+                    "line": 176,
                     "type": "number",
                     "decorators": []
                 },
@@ -21537,7 +21537,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSpecify the max number of rows to show when expanded\nDefault is `0`, hence all content will be visible when expanded\n",
                     "description": "<p>Specify the max number of rows to show when expanded\nDefault is <code>0</code>, hence all content will be visible when expanded</p>\n",
-                    "line": 184,
+                    "line": 186,
                     "type": "number",
                     "decorators": []
                 },
@@ -21548,7 +21548,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSpecify the min number of rows to show when collapsed\nDefault is `3`\n",
                     "description": "<p>Specify the min number of rows to show when collapsed\nDefault is <code>3</code></p>\n",
-                    "line": 179,
+                    "line": 181,
                     "type": "number",
                     "decorators": []
                 },
@@ -21559,7 +21559,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSpecify the min number of rows to show when expanded\nDefault is `16`, hence height of expanded row will be 16 * rowHeightInPixel (16) =  256px\n",
                     "description": "<p>Specify the min number of rows to show when expanded\nDefault is <code>16</code>, hence height of expanded row will be 16 * rowHeightInPixel (16) =  256px</p>\n",
-                    "line": 189,
+                    "line": 191,
                     "type": "number",
                     "decorators": []
                 },
@@ -21568,7 +21568,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 210,
+                    "line": 212,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -21579,15 +21579,15 @@
                     "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\nSet to `\"light\"` to apply the light style",
                     "jsdoctags": [
                         {
-                            "pos": 6034,
-                            "end": 6138,
+                            "pos": 6097,
+                            "end": 6201,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 334,
                             "tagName": {
-                                "pos": 6035,
-                                "end": 6045,
+                                "pos": 6098,
+                                "end": 6108,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -21597,7 +21597,7 @@
                             "comment": "<p>since v5 - Use <code>cdsLayer</code> directive instead\nSet to <code>&quot;light&quot;</code> to apply the light style</p>\n"
                         }
                     ],
-                    "line": 198,
+                    "line": 200,
                     "type": "\"light\" | \"dark\"",
                     "decorators": []
                 },
@@ -21606,7 +21606,7 @@
                     "defaultValue": "this.i18n.get().CODE_SNIPPET",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 157,
+                    "line": 159,
                     "type": "any",
                     "decorators": []
                 },
@@ -21617,7 +21617,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to wrap the text\n",
                     "description": "<p>Set to <code>true</code> to wrap the text</p>\n",
-                    "line": 193,
+                    "line": 195,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -21744,7 +21744,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 218
+                    "line": 220
                 },
                 {
                     "name": "code",
@@ -21753,7 +21753,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 213,
+                    "line": 215,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -21771,7 +21771,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 215,
+                    "line": 217,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -21789,7 +21789,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 214,
+                    "line": 216,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -21808,7 +21808,7 @@
                     "type": "null",
                     "optional": false,
                     "description": "",
-                    "line": 219
+                    "line": 221
                 },
                 {
                     "name": "hasLeft",
@@ -21818,7 +21818,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 224
+                    "line": 226
                 },
                 {
                     "name": "hasRight",
@@ -21828,7 +21828,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 223
+                    "line": 225
                 },
                 {
                     "name": "hasRightOverflow",
@@ -21838,7 +21838,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 221
+                    "line": 223
                 },
                 {
                     "name": "isExpandable",
@@ -21848,7 +21848,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 220
+                    "line": 222
                 },
                 {
                     "name": "rowHeightInPixel",
@@ -21858,7 +21858,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "",
-                    "line": 151,
+                    "line": 153,
                     "modifierKind": [
                         146
                     ]
@@ -21871,7 +21871,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 217
+                    "line": 219
                 },
                 {
                     "name": "styles",
@@ -21881,7 +21881,7 @@
                     "type": "any",
                     "optional": false,
                     "description": "",
-                    "line": 211
+                    "line": 213
                 }
             ],
             "methodsClass": [
@@ -21891,7 +21891,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 296,
+                    "line": 298,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -21901,7 +21901,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 234,
+                    "line": 236,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -21911,7 +21911,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 267,
+                    "line": 269,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -21921,7 +21921,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 262,
+                    "line": 264,
                     "deprecated": false,
                     "deprecationMessage": ""
                 }
@@ -21933,7 +21933,7 @@
                     "name": "class.cds--snippet",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 135,
+                    "line": 137,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -21941,7 +21941,7 @@
                     "name": "class.cds--snippet--disabled",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 144,
+                    "line": 146,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -21949,7 +21949,7 @@
                     "name": "class.cds--snippet--light",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 147,
+                    "line": 149,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -21957,7 +21957,7 @@
                     "name": "class.cds--snippet--multi",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 141,
+                    "line": 143,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -21965,7 +21965,7 @@
                     "name": "class.cds--snippet--single",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 138,
+                    "line": 140,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -21976,7 +21976,7 @@
             "description": "<p>Get started with importing the module:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { CodeSnippetModule } from &#39;carbon-components-angular&#39;;</code></pre></div><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-code-snippet&gt;Code&lt;/cds-code-snippet&gt;</code></pre></div><p><a href=\"../../?path=/story/components-code-snippet--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { CodeSnippetModule } from 'carbon-components-angular';\n```\n\n```html\n<cds-code-snippet>Code</cds-code-snippet>\n```\n\n[See demo](../../?path=/story/components-code-snippet--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tViewChild,\n\tAfterViewInit,\n\tOnInit\n} from \"@angular/core\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { EventService } from \"carbon-components-angular/utils\";\nimport { BaseIconButton } from \"carbon-components-angular/button\";\n\nexport enum SnippetType {\n\tsingle = \"single\",\n\tmulti = \"multi\",\n\tinline = \"inline\"\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { CodeSnippetModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-code-snippet>Code</cds-code-snippet>\n * ```\n *\n * [See demo](../../?path=/story/components-code-snippet--basic)\n */\n@Component({\n\tselector: \"cds-code-snippet, ibm-code-snippet\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"display === 'inline'; else notInline\">\n\t\t\t<ng-container *ngIf=\"!hideCopyButton; else noBtnInline\">\n\t\t\t\t<ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n\t\t\t</ng-container>\n\t\t\t<ng-template #noBtnInline>\n\t\t\t\t<span\n\t\t\t\t\tclass=\"cds--snippet cds--snippet--inline cds--snippet--no-copy\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--snippet--light': theme === 'light'\n\t\t\t\t\t}\">\n\t\t\t\t\t<code #code>\n\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"codeTemplate\"></ng-container>\n\t\t\t\t\t</code>\n\t\t\t\t</span>\n\t\t\t</ng-template>\n\t\t</ng-container>\n\n\t\t<ng-template #notInline>\n\t\t\t<div\n\t\t\t\t#codeContainer\n\t\t\t\tclass=\"cds--snippet-container\"\n\t\t\t\t[attr.aria-label]=\"translations.CODE_SNIPPET_TEXT\"\n\t\t\t\t[attr.tabindex]=\"display === 'single' && !disabled ? '0' : null\"\n\t\t\t\t[attr.role]=\"display==='single' ? 'textarea' : null\"\n\t\t\t\t[ngStyle]=\"styles\"\n\t\t\t\t(scroll)=\"(display === 'single' ? handleScroll() : null)\">\n\t\t\t\t<ng-container *ngIf=\"skeleton\">\n\t\t\t\t\t<span *ngIf=\"display === 'single'; else multiSkeleton\"></span>\n\t\t\t\t\t<ng-template #multiSkeleton>\n\t\t\t\t\t\t<span></span>\n\t\t\t\t\t\t<span></span>\n\t\t\t\t\t\t<span></span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</ng-container>\n\t\t\t\t<pre\n\t\t\t\t\t#codeContent\n\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\t(scroll)=\"(display === 'multi' ? handleScroll() : null)\"><code #code><ng-container *ngTemplateOutlet=\"codeTemplate\"></ng-container></code></pre>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"hasLeft\" class=\"cds--snippet__overflow-indicator--left\"></div>\n\t\t\t<div *ngIf=\"hasRight\" class=\"cds--snippet__overflow-indicator--right\"></div>\n\t\t\t<ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n\t\t\t<button\n\t\t\t\t*ngIf=\"isExpandable\"\n\t\t\t\tclass=\"cds--btn cds--btn--ghost cds--btn--sm cds--snippet-btn--expand\"\n\t\t\t\t(click)=\"toggleSnippetExpansion()\"\n\t\t\t\ttype=\"button\">\n\t\t\t\t<span class=\"cds--snippet-btn--text\">{{expanded ? translations.SHOW_LESS : translations.SHOW_MORE}}</span>\n\t\t\t\t<svg cdsIcon=\"chevron--down\" size=\"16\" class=\"cds--icon-chevron--down\" [attr.aria-label]=\"translations.SHOW_MORE_ICON\"></svg>\n\t\t\t</button>\n\t\t</ng-template>\n\n\t\t<ng-template #buttonTemplate>\n\t\t\t<cds-icon-button\n\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t[description]=\"showFeedback ? feedbackText : copyButtonDescription\"\n\t\t\t\t[align]=\"align\"\n\t\t\t\t[dropShadow]=\"dropShadow\"\n\t\t\t\t[caret]=\"caret\"\n\t\t\t\t[highContrast]=\"highContrast\"\n\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t[enterDelayMs]=\"enterDelayMs\"\n\t\t\t\t[leaveDelayMs]=\"leaveDelayMs\"\n\t\t\t\ttype=\"button\"\n\t\t\t\tkind=\"primary\"\n\t\t\t\tsize=\"md\"\n\t\t\t\t(click)=\"onCopyButtonClicked($event)\"\n\t\t\t\t[buttonNgClass]=\"{\n\t\t\t\t\t'cds--snippet--light': theme === 'light',\n\t\t\t\t\t'cds--snippet--inline': display === 'inline',\n\t\t\t\t\t'cds--btn--icon-only': display !== 'inline',\n\t\t\t\t\t'cds--copy-btn': display !== 'inline',\n\t\t\t\t\t'cds--copy-btn--animating': animating,\n\t\t\t\t\t'cds--copy-btn--fade-in': showFeedback,\n\t\t\t\t\t'cds--copy-btn--fade-out': !showFeedback && animating,\n\t\t\t\t\t'cds--snippet cds--copy': true\n\t\t\t\t}\"\n\t\t\t\t[buttonAttributes]=\"{\n\t\t\t\t\t'aria-label': translations.COPY_CODE,\n\t\t\t\t\t'aria-live': 'polite',\n\t\t\t\t\t'tabindex': '0'\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"display === 'inline'\">\n\t\t\t\t\t<code #code>\n\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"codeTemplate\"></ng-container>\n\t\t\t\t\t</code>\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-container *ngIf=\"display !== 'inline'\">\n\t\t\t\t\t<svg cdsIcon=\"copy\" size=\"16\" class=\"cds--snippet__icon\"></svg>\n\t\t\t\t</ng-container>\n\t\t\t</cds-icon-button>\n\t\t</ng-template>\n\n\t\t<ng-template #codeTemplate>\n\t\t\t<ng-content></ng-content>\n\t\t</ng-template>\n\t`\n})\nexport class CodeSnippet extends BaseIconButton implements OnInit, AfterViewInit {\n\t@HostBinding(\"class.cds--snippet\") get snippetClass() {\n\t\treturn this.display !== SnippetType.inline;\n\t}\n\t@HostBinding(\"class.cds--snippet--single\") get snippetSingleClass() {\n\t\treturn this.display === SnippetType.single;\n\t}\n\t@HostBinding(\"class.cds--snippet--multi\") get snippetMultiClass() {\n\t\treturn this.display === SnippetType.multi;\n\t}\n\t@HostBinding(\"class.cds--snippet--disabled\") get snippetDisabledClass() {\n\t\treturn this.display !== \"inline\" && this.disabled;\n\t}\n\t@HostBinding(\"class.cds--snippet--light\") get snippetInlineLightClass() {\n\t\treturn this.theme === \"light\";\n\t}\n\n\treadonly rowHeightInPixel: number = 16;\n\n\t/**\n\t * It can be `\"single\"`, `\"multi\"` or `\"inline\"`\n\t */\n\t@Input() display: SnippetType = SnippetType.single;\n\t@Input() translations = this.i18n.get().CODE_SNIPPET;\n\t/**\n\t * copy button description to show on hover\n\t */\n\t@Input() copyButtonDescription: string;\n\t/**\n\t * Set to `true` to hide copy button\n\t */\n\t@Input() hideCopyButton = false;\n\t/**\n\t * Set to `true` to disable the code snippet\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Specify the max number of rows to show when collapsed\n\t * Default is `15`\n\t */\n\t@Input() maxCollapsedNumberOfRows = 15;\n\t/**\n\t * Specify the min number of rows to show when collapsed\n\t * Default is `3`\n\t */\n\t@Input() minCollapsedNumberOfRows = 3;\n\t/**\n\t * Specify the max number of rows to show when expanded\n\t * Default is `0`, hence all content will be visible when expanded\n\t */\n\t@Input() maxExpandedNumberOfRows = 0;\n\t/**\n\t * Specify the min number of rows to show when expanded\n\t * Default is `16`, hence height of expanded row will be 16 * rowHeightInPixel (16) =  256px\n\t */\n\t@Input() minExpandedNumberOfRows = 16;\n\t/**\n\t * Set to `true` to wrap the text\n\t */\n\t@HostBinding(\"class.cds--snippet--wraptext\") @Input() wrapText = false;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Text displayed in the tooltip when user clicks button to copy code.\n\t */\n\t@Input() feedbackText = this.translations.COPIED;\n\t/**\n\t * Time in miliseconds to keep the feedback tooltip displayed.\n\t * Defaults to 2 seconds\n\t */\n\t@Input() feedbackTimeout = 2000;\n\n\t@HostBinding(\"class.cds--snippet--expand\") @Input() expanded = false;\n\t@HostBinding(\"class.cds--skeleton\") @Input() skeleton = false;\n\tstyles: any = {};\n\n\t@ViewChild(\"code\") code;\n\t@ViewChild(\"codeContent\") codeContent;\n\t@ViewChild(\"codeContainer\") codeContainer;\n\n\tshowFeedback = false;\n\tanimating = false;\n\thasExpandButton = null;\n\tisExpandable = false;\n\thasRightOverflow = false;\n\n\thasRight = false;\n\thasLeft = false;\n\n\t/**\n\t * Creates an instance of CodeSnippet.\n\t */\n\tconstructor(protected i18n: I18n, protected eventService: EventService) {\n\t\tsuper();\n\t\tthis.dropShadow = false;\n\t}\n\n\thandleScroll() {\n\t\tif (this.skeleton) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet ref;\n\t\tswitch (this.display) {\n\t\t\tcase \"multi\":\n\t\t\t\tref = this.codeContent.nativeElement;\n\t\t\t\tbreak;\n\t\t\tcase \"single\":\n\t\t\t\tref = this.codeContainer.nativeElement;\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\treturn;\n\t\t}\n\t\tif (ref) {\n\t\t\tconst {\n\t\t\t\tscrollWidth,\n\t\t\t\tclientWidth,\n\t\t\t\tscrollLeft\n\t\t\t} = ref;\n\t\t\tconst horizontalOverflow = scrollWidth > clientWidth;\n\t\t\tthis.hasLeft = horizontalOverflow && !!scrollLeft;\n\t\t\tthis.hasRight = horizontalOverflow && scrollLeft + clientWidth !== scrollWidth;\n\t\t}\n\t}\n\n\ttoggleSnippetExpansion() {\n\t\tthis.expanded = !this.expanded;\n\t\tthis.calculateContainerHeight();\n\t}\n\n\tonCopyButtonClicked() {\n\t\tif (!this.disabled) {\n\t\t\twindow.navigator.clipboard\n\t\t\t\t.writeText(this.code).then(() => {\n\t\t\t\t\tthis.showFeedback = true;\n\t\t\t\t\tthis.animating = true;\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tthis.showFeedback = false;\n\t\t\t\t\t\tthis.animating = false;\n\t\t\t\t\t}, this.feedbackTimeout);\n\t\t\t\t});\n\t\t}\n\t}\n\n\tngOnInit() {\n\t\tthis.calculateContainerHeight();\n\t}\n\n\tngAfterViewInit() {\n\t\tthis.canExpand();\n\t\tthis.handleScroll();\n\t\tif (window) {\n\t\t\tthis.eventService.on(window as any, \"resize\", () => {\n\t\t\t\tthis.canExpand();\n\t\t\t\tthis.handleScroll();\n\t\t\t});\n\t\t}\n\t}\n\n\tcalculateContainerHeight() {\n\t\tif (this.display === \"multi\" && !this.skeleton) {\n\t\t\tthis.styles = {};\n\t\t\tif (this.expanded) {\n\t\t\t\tif (this.maxExpandedNumberOfRows > 0) {\n\t\t\t\t\tthis.styles[\"max-height\"] = `${this.maxExpandedNumberOfRows * this.rowHeightInPixel}px`;\n\t\t\t\t}\n\t\t\t\tif (this.minExpandedNumberOfRows > 0) {\n\t\t\t\t\tthis.styles[\"min-height\"] = `${this.minExpandedNumberOfRows * this.rowHeightInPixel}px`;\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (this.maxCollapsedNumberOfRows > 0) {\n\t\t\t\t\tthis.styles[\"max-height\"] = `${this.maxCollapsedNumberOfRows * this.rowHeightInPixel}px`;\n\t\t\t\t}\n\t\t\t\tif (this.minCollapsedNumberOfRows > 0) {\n\t\t\t\t\tthis.styles[\"min-height\"] = `${this.minCollapsedNumberOfRows * this.rowHeightInPixel}px`;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprotected canExpand() {\n\t\tif (this.display === \"multi\" && !this.skeleton) {\n\t\t\tconst height = this.codeContent.nativeElement.getBoundingClientRect().height;\n\t\t\tif (\n\t\t\t\tthis.maxCollapsedNumberOfRows > 0 &&\n\t\t\t\t(this.maxExpandedNumberOfRows <= 0 ||\n\t\t\t\t\tthis.maxExpandedNumberOfRows > this.maxCollapsedNumberOfRows) &&\n\t\t\t\theight > this.maxCollapsedNumberOfRows * this.rowHeightInPixel\n\t\t\t) {\n\t\t\t\tthis.isExpandable = true;\n\t\t\t} else {\n\t\t\t\tthis.isExpandable = false;\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\tthis.expanded &&\n\t\t\t\tthis.minExpandedNumberOfRows > 0 &&\n\t\t\t\theight <= this.minExpandedNumberOfRows * this.rowHeightInPixel\n\t\t\t) {\n\t\t\t\tthis.isExpandable = false;\n\t\t\t}\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tViewChild,\n\tAfterViewInit,\n\tOnInit\n} from \"@angular/core\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { EventService } from \"carbon-components-angular/utils\";\nimport { BaseIconButton } from \"carbon-components-angular/button\";\n\nexport enum SnippetType {\n\tsingle = \"single\",\n\tmulti = \"multi\",\n\tinline = \"inline\"\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { CodeSnippetModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-code-snippet>Code</cds-code-snippet>\n * ```\n *\n * [See demo](../../?path=/story/components-code-snippet--basic)\n */\n@Component({\n\tselector: \"cds-code-snippet, ibm-code-snippet\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"display === 'inline'; else notInline\">\n\t\t\t<ng-container *ngIf=\"!hideCopyButton; else noBtnInline\">\n\t\t\t\t<ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n\t\t\t</ng-container>\n\t\t\t<ng-template #noBtnInline>\n\t\t\t\t<span\n\t\t\t\t\tclass=\"cds--snippet cds--snippet--inline cds--snippet--no-copy\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--snippet--light': theme === 'light'\n\t\t\t\t\t}\">\n\t\t\t\t\t<code #code>\n\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"codeTemplate\"></ng-container>\n\t\t\t\t\t</code>\n\t\t\t\t</span>\n\t\t\t</ng-template>\n\t\t</ng-container>\n\n\t\t<ng-template #notInline>\n\t\t\t<div\n\t\t\t\t#codeContainer\n\t\t\t\tclass=\"cds--snippet-container\"\n\t\t\t\t[attr.aria-label]=\"translations.CODE_SNIPPET_TEXT\"\n\t\t\t\t[attr.tabindex]=\"display === 'single' && !disabled ? '0' : null\"\n\t\t\t\t[attr.role]=\"display==='single' ? 'textarea' : null\"\n\t\t\t\t[ngStyle]=\"styles\"\n\t\t\t\t(scroll)=\"(display === 'single' ? handleScroll() : null)\">\n\t\t\t\t<ng-container *ngIf=\"skeleton\">\n\t\t\t\t\t<span *ngIf=\"display === 'single'; else multiSkeleton\"></span>\n\t\t\t\t\t<ng-template #multiSkeleton>\n\t\t\t\t\t\t<span></span>\n\t\t\t\t\t\t<span></span>\n\t\t\t\t\t\t<span></span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</ng-container>\n\t\t\t\t<pre\n\t\t\t\t\t#codeContent\n\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\t(scroll)=\"(display === 'multi' ? handleScroll() : null)\"><code #code><ng-container *ngTemplateOutlet=\"codeTemplate\"></ng-container></code></pre>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"hasLeft\" class=\"cds--snippet__overflow-indicator--left\"></div>\n\t\t\t<div *ngIf=\"hasRight\" class=\"cds--snippet__overflow-indicator--right\"></div>\n\t\t\t<ng-container *ngIf=\"!hideCopyButton;\">\n\t\t\t\t<ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n\t\t\t</ng-container>\n\t\t\t<button\n\t\t\t\t*ngIf=\"isExpandable\"\n\t\t\t\tclass=\"cds--btn cds--btn--ghost cds--btn--sm cds--snippet-btn--expand\"\n\t\t\t\t(click)=\"toggleSnippetExpansion()\"\n\t\t\t\ttype=\"button\">\n\t\t\t\t<span class=\"cds--snippet-btn--text\">{{expanded ? translations.SHOW_LESS : translations.SHOW_MORE}}</span>\n\t\t\t\t<svg cdsIcon=\"chevron--down\" size=\"16\" class=\"cds--icon-chevron--down\" [attr.aria-label]=\"translations.SHOW_MORE_ICON\"></svg>\n\t\t\t</button>\n\t\t</ng-template>\n\n\t\t<ng-template #buttonTemplate>\n\t\t\t<cds-icon-button\n\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t[description]=\"showFeedback ? feedbackText : copyButtonDescription\"\n\t\t\t\t[align]=\"align\"\n\t\t\t\t[dropShadow]=\"dropShadow\"\n\t\t\t\t[caret]=\"caret\"\n\t\t\t\t[highContrast]=\"highContrast\"\n\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t[enterDelayMs]=\"enterDelayMs\"\n\t\t\t\t[leaveDelayMs]=\"leaveDelayMs\"\n\t\t\t\ttype=\"button\"\n\t\t\t\tkind=\"primary\"\n\t\t\t\tsize=\"md\"\n\t\t\t\t(click)=\"onCopyButtonClicked($event)\"\n\t\t\t\t[buttonNgClass]=\"{\n\t\t\t\t\t'cds--snippet--light': theme === 'light',\n\t\t\t\t\t'cds--snippet--inline': display === 'inline',\n\t\t\t\t\t'cds--btn--icon-only': display !== 'inline',\n\t\t\t\t\t'cds--copy-btn': display !== 'inline',\n\t\t\t\t\t'cds--copy-btn--animating': animating,\n\t\t\t\t\t'cds--copy-btn--fade-in': showFeedback,\n\t\t\t\t\t'cds--copy-btn--fade-out': !showFeedback && animating,\n\t\t\t\t\t'cds--snippet cds--copy': true\n\t\t\t\t}\"\n\t\t\t\t[buttonAttributes]=\"{\n\t\t\t\t\t'aria-label': translations.COPY_CODE,\n\t\t\t\t\t'aria-live': 'polite',\n\t\t\t\t\t'tabindex': '0'\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"display === 'inline'\">\n\t\t\t\t\t<code #code>\n\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"codeTemplate\"></ng-container>\n\t\t\t\t\t</code>\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-container *ngIf=\"display !== 'inline'\">\n\t\t\t\t\t<svg cdsIcon=\"copy\" size=\"16\" class=\"cds--snippet__icon\"></svg>\n\t\t\t\t</ng-container>\n\t\t\t</cds-icon-button>\n\t\t</ng-template>\n\n\t\t<ng-template #codeTemplate>\n\t\t\t<ng-content></ng-content>\n\t\t</ng-template>\n\t`\n})\nexport class CodeSnippet extends BaseIconButton implements OnInit, AfterViewInit {\n\t@HostBinding(\"class.cds--snippet\") get snippetClass() {\n\t\treturn this.display !== SnippetType.inline;\n\t}\n\t@HostBinding(\"class.cds--snippet--single\") get snippetSingleClass() {\n\t\treturn this.display === SnippetType.single;\n\t}\n\t@HostBinding(\"class.cds--snippet--multi\") get snippetMultiClass() {\n\t\treturn this.display === SnippetType.multi;\n\t}\n\t@HostBinding(\"class.cds--snippet--disabled\") get snippetDisabledClass() {\n\t\treturn this.display !== \"inline\" && this.disabled;\n\t}\n\t@HostBinding(\"class.cds--snippet--light\") get snippetInlineLightClass() {\n\t\treturn this.theme === \"light\";\n\t}\n\n\treadonly rowHeightInPixel: number = 16;\n\n\t/**\n\t * It can be `\"single\"`, `\"multi\"` or `\"inline\"`\n\t */\n\t@Input() display: SnippetType = SnippetType.single;\n\t@Input() translations = this.i18n.get().CODE_SNIPPET;\n\t/**\n\t * copy button description to show on hover\n\t */\n\t@Input() copyButtonDescription: string;\n\t/**\n\t * Set to `true` to hide copy button\n\t */\n\t@Input() hideCopyButton = false;\n\t/**\n\t * Set to `true` to disable the code snippet\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Specify the max number of rows to show when collapsed\n\t * Default is `15`\n\t */\n\t@Input() maxCollapsedNumberOfRows = 15;\n\t/**\n\t * Specify the min number of rows to show when collapsed\n\t * Default is `3`\n\t */\n\t@Input() minCollapsedNumberOfRows = 3;\n\t/**\n\t * Specify the max number of rows to show when expanded\n\t * Default is `0`, hence all content will be visible when expanded\n\t */\n\t@Input() maxExpandedNumberOfRows = 0;\n\t/**\n\t * Specify the min number of rows to show when expanded\n\t * Default is `16`, hence height of expanded row will be 16 * rowHeightInPixel (16) =  256px\n\t */\n\t@Input() minExpandedNumberOfRows = 16;\n\t/**\n\t * Set to `true` to wrap the text\n\t */\n\t@HostBinding(\"class.cds--snippet--wraptext\") @Input() wrapText = false;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Text displayed in the tooltip when user clicks button to copy code.\n\t */\n\t@Input() feedbackText = this.translations.COPIED;\n\t/**\n\t * Time in miliseconds to keep the feedback tooltip displayed.\n\t * Defaults to 2 seconds\n\t */\n\t@Input() feedbackTimeout = 2000;\n\n\t@HostBinding(\"class.cds--snippet--expand\") @Input() expanded = false;\n\t@HostBinding(\"class.cds--skeleton\") @Input() skeleton = false;\n\tstyles: any = {};\n\n\t@ViewChild(\"code\") code;\n\t@ViewChild(\"codeContent\") codeContent;\n\t@ViewChild(\"codeContainer\") codeContainer;\n\n\tshowFeedback = false;\n\tanimating = false;\n\thasExpandButton = null;\n\tisExpandable = false;\n\thasRightOverflow = false;\n\n\thasRight = false;\n\thasLeft = false;\n\n\t/**\n\t * Creates an instance of CodeSnippet.\n\t */\n\tconstructor(protected i18n: I18n, protected eventService: EventService) {\n\t\tsuper();\n\t\tthis.dropShadow = false;\n\t}\n\n\thandleScroll() {\n\t\tif (this.skeleton) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet ref;\n\t\tswitch (this.display) {\n\t\t\tcase \"multi\":\n\t\t\t\tref = this.codeContent.nativeElement;\n\t\t\t\tbreak;\n\t\t\tcase \"single\":\n\t\t\t\tref = this.codeContainer.nativeElement;\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\treturn;\n\t\t}\n\t\tif (ref) {\n\t\t\tconst {\n\t\t\t\tscrollWidth,\n\t\t\t\tclientWidth,\n\t\t\t\tscrollLeft\n\t\t\t} = ref;\n\t\t\tconst horizontalOverflow = scrollWidth > clientWidth;\n\t\t\tthis.hasLeft = horizontalOverflow && !!scrollLeft;\n\t\t\tthis.hasRight = horizontalOverflow && scrollLeft + clientWidth !== scrollWidth;\n\t\t}\n\t}\n\n\ttoggleSnippetExpansion() {\n\t\tthis.expanded = !this.expanded;\n\t\tthis.calculateContainerHeight();\n\t}\n\n\tonCopyButtonClicked() {\n\t\tif (!this.disabled) {\n\t\t\twindow.navigator.clipboard\n\t\t\t\t.writeText(this.code).then(() => {\n\t\t\t\t\tthis.showFeedback = true;\n\t\t\t\t\tthis.animating = true;\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tthis.showFeedback = false;\n\t\t\t\t\t\tthis.animating = false;\n\t\t\t\t\t}, this.feedbackTimeout);\n\t\t\t\t});\n\t\t}\n\t}\n\n\tngOnInit() {\n\t\tthis.calculateContainerHeight();\n\t}\n\n\tngAfterViewInit() {\n\t\tthis.canExpand();\n\t\tthis.handleScroll();\n\t\tif (window) {\n\t\t\tthis.eventService.on(window as any, \"resize\", () => {\n\t\t\t\tthis.canExpand();\n\t\t\t\tthis.handleScroll();\n\t\t\t});\n\t\t}\n\t}\n\n\tcalculateContainerHeight() {\n\t\tif (this.display === \"multi\" && !this.skeleton) {\n\t\t\tthis.styles = {};\n\t\t\tif (this.expanded) {\n\t\t\t\tif (this.maxExpandedNumberOfRows > 0) {\n\t\t\t\t\tthis.styles[\"max-height\"] = `${this.maxExpandedNumberOfRows * this.rowHeightInPixel}px`;\n\t\t\t\t}\n\t\t\t\tif (this.minExpandedNumberOfRows > 0) {\n\t\t\t\t\tthis.styles[\"min-height\"] = `${this.minExpandedNumberOfRows * this.rowHeightInPixel}px`;\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (this.maxCollapsedNumberOfRows > 0) {\n\t\t\t\t\tthis.styles[\"max-height\"] = `${this.maxCollapsedNumberOfRows * this.rowHeightInPixel}px`;\n\t\t\t\t}\n\t\t\t\tif (this.minCollapsedNumberOfRows > 0) {\n\t\t\t\t\tthis.styles[\"min-height\"] = `${this.minCollapsedNumberOfRows * this.rowHeightInPixel}px`;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprotected canExpand() {\n\t\tif (this.display === \"multi\" && !this.skeleton) {\n\t\t\tconst height = this.codeContent.nativeElement.getBoundingClientRect().height;\n\t\t\tif (\n\t\t\t\tthis.maxCollapsedNumberOfRows > 0 &&\n\t\t\t\t(this.maxExpandedNumberOfRows <= 0 ||\n\t\t\t\t\tthis.maxExpandedNumberOfRows > this.maxCollapsedNumberOfRows) &&\n\t\t\t\theight > this.maxCollapsedNumberOfRows * this.rowHeightInPixel\n\t\t\t) {\n\t\t\t\tthis.isExpandable = true;\n\t\t\t} else {\n\t\t\t\tthis.isExpandable = false;\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\tthis.expanded &&\n\t\t\t\tthis.minExpandedNumberOfRows > 0 &&\n\t\t\t\theight <= this.minExpandedNumberOfRows * this.rowHeightInPixel\n\t\t\t) {\n\t\t\t\tthis.isExpandable = false;\n\t\t\t}\n\t\t}\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -21999,7 +21999,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 224,
+                "line": 226,
                 "rawdescription": "\n\nCreates an instance of CodeSnippet.\n",
                 "jsdoctags": [
                     {
@@ -22034,7 +22034,7 @@
                         "name": "snippetClass",
                         "type": "",
                         "returnType": "",
-                        "line": 135
+                        "line": 137
                     }
                 },
                 "snippetSingleClass": {
@@ -22043,7 +22043,7 @@
                         "name": "snippetSingleClass",
                         "type": "",
                         "returnType": "",
-                        "line": 138
+                        "line": 140
                     }
                 },
                 "snippetMultiClass": {
@@ -22052,7 +22052,7 @@
                         "name": "snippetMultiClass",
                         "type": "",
                         "returnType": "",
-                        "line": 141
+                        "line": 143
                     }
                 },
                 "snippetDisabledClass": {
@@ -22061,7 +22061,7 @@
                         "name": "snippetDisabledClass",
                         "type": "",
                         "returnType": "",
-                        "line": 144
+                        "line": 146
                     }
                 },
                 "snippetInlineLightClass": {
@@ -22070,7 +22070,7 @@
                         "name": "snippetInlineLightClass",
                         "type": "",
                         "returnType": "",
-                        "line": 147
+                        "line": 149
                     }
                 }
             }