carbon-components-angular 5.20.0 → 5.20.1

package/docs/documentation.json

@@ -21342,7 +21342,7 @@
         },
         {
             "name": "CodeSnippet",
-            "id": "component-CodeSnippet-e4b5e5629b1682db3ee73c2b2a7ea13448e9147af4fd2c696485f6dbedd1eb219a17788e144c2cb4897b8dcbe2d40bbb337a04508395956cd3db28dad7fad4d9",
+            "id": "component-CodeSnippet-01866e185f9515d76fc82300564aa4d98b740eaf72ba485f93e8eab93bff3d2e10f894ce21bcee7980aae36e72bc9186b7924add78537f8df229b5c05657ec40",
             "file": "src/code-snippet/code-snippet.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -21352,7 +21352,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<ng-container *ngTemplateOutlet=\"codeTemplate\"></ng-container>\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)\"><ng-container *ngTemplateOutlet=\"codeTemplate\"></ng-container></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<ng-container *ngTemplateOutlet=\"codeTemplate\"></ng-container>\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<code #code><ng-content></ng-content></code>\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 *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",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -21363,7 +21363,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\ncopy button description to show on hover\n",
                     "description": "<p>copy button description to show on hover</p>\n",
-                    "line": 157,
+                    "line": 161,
                     "type": "string",
                     "decorators": []
                 },
@@ -21374,7 +21374,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": 165,
+                    "line": 169,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -21385,7 +21385,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": 152,
+                    "line": 156,
                     "type": "SnippetType",
                     "decorators": []
                 },
@@ -21394,7 +21394,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 205,
+                    "line": 209,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -21405,7 +21405,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": 198,
+                    "line": 202,
                     "type": "any",
                     "decorators": []
                 },
@@ -21416,7 +21416,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": 203,
+                    "line": 207,
                     "type": "number",
                     "decorators": []
                 },
@@ -21427,7 +21427,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": 161,
+                    "line": 165,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -21438,7 +21438,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": 170,
+                    "line": 174,
                     "type": "number",
                     "decorators": []
                 },
@@ -21449,7 +21449,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": 180,
+                    "line": 184,
                     "type": "number",
                     "decorators": []
                 },
@@ -21460,7 +21460,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": 175,
+                    "line": 179,
                     "type": "number",
                     "decorators": []
                 },
@@ -21471,7 +21471,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": 185,
+                    "line": 189,
                     "type": "number",
                     "decorators": []
                 },
@@ -21480,7 +21480,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 206,
+                    "line": 210,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -21491,15 +21491,15 @@
                     "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\nSet to `\"light\"` to apply the light style",
                     "jsdoctags": [
                         {
-                            "pos": 5970,
-                            "end": 6074,
+                            "pos": 6034,
+                            "end": 6138,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 334,
                             "tagName": {
-                                "pos": 5971,
-                                "end": 5981,
+                                "pos": 6035,
+                                "end": 6045,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -21509,7 +21509,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": 194,
+                    "line": 198,
                     "type": "\"light\" | \"dark\"",
                     "decorators": []
                 },
@@ -21518,7 +21518,7 @@
                     "defaultValue": "this.i18n.get().CODE_SNIPPET",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 153,
+                    "line": 157,
                     "type": "any",
                     "decorators": []
                 },
@@ -21529,7 +21529,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": 189,
+                    "line": 193,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -21642,7 +21642,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 214
+                    "line": 218
                 },
                 {
                     "name": "code",
@@ -21651,7 +21651,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 209,
+                    "line": 213,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -21669,7 +21669,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 211,
+                    "line": 215,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -21687,7 +21687,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 210,
+                    "line": 214,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -21706,7 +21706,7 @@
                     "type": "null",
                     "optional": false,
                     "description": "",
-                    "line": 215
+                    "line": 219
                 },
                 {
                     "name": "hasLeft",
@@ -21716,7 +21716,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 220
+                    "line": 224
                 },
                 {
                     "name": "hasRight",
@@ -21726,7 +21726,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 219
+                    "line": 223
                 },
                 {
                     "name": "hasRightOverflow",
@@ -21736,7 +21736,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 217
+                    "line": 221
                 },
                 {
                     "name": "isExpandable",
@@ -21746,7 +21746,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 216
+                    "line": 220
                 },
                 {
                     "name": "rowHeightInPixel",
@@ -21756,7 +21756,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "",
-                    "line": 147,
+                    "line": 151,
                     "modifierKind": [
                         146
                     ]
@@ -21769,7 +21769,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 213
+                    "line": 217
                 },
                 {
                     "name": "styles",
@@ -21779,7 +21779,7 @@
                     "type": "any",
                     "optional": false,
                     "description": "",
-                    "line": 207
+                    "line": 211
                 }
             ],
             "methodsClass": [
@@ -21789,7 +21789,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 290,
+                    "line": 296,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -21799,7 +21799,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 230,
+                    "line": 234,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -21809,7 +21809,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 259,
+                    "line": 267,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -21819,7 +21819,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 254,
+                    "line": 262,
                     "deprecated": false,
                     "deprecationMessage": ""
                 }
@@ -21831,7 +21831,7 @@
                     "name": "class.cds--snippet",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 131,
+                    "line": 135,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -21839,7 +21839,7 @@
                     "name": "class.cds--snippet--disabled",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 140,
+                    "line": 144,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -21847,7 +21847,7 @@
                     "name": "class.cds--snippet--light",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 143,
+                    "line": 147,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -21855,7 +21855,7 @@
                     "name": "class.cds--snippet--multi",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 137,
+                    "line": 141,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -21863,7 +21863,7 @@
                     "name": "class.cds--snippet--single",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 134,
+                    "line": 138,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -21874,7 +21874,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<ng-container *ngTemplateOutlet=\"codeTemplate\"></ng-container>\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)\"><ng-container *ngTemplateOutlet=\"codeTemplate\"></ng-container></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<ng-container *ngTemplateOutlet=\"codeTemplate\"></ng-container>\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<code #code><ng-content></ng-content></code>\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\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.nativeElement.innerText || this.code.nativeElement.textContent).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\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\tngAfterViewInit() {\n\t\tsetTimeout(() => {\n\t\t\tthis.canExpand();\n\t\t\tthis.handleScroll();\n\t\t});\n\t}\n\n\tcalculateContainerHeight() {\n\t\tif (this.display === \"multi\") {\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\") {\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 *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",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -21897,7 +21897,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 220,
+                "line": 224,
                 "rawdescription": "\n\nCreates an instance of CodeSnippet.\n",
                 "jsdoctags": [
                     {
@@ -21932,7 +21932,7 @@
                         "name": "snippetClass",
                         "type": "",
                         "returnType": "",
-                        "line": 131
+                        "line": 135
                     }
                 },
                 "snippetSingleClass": {
@@ -21941,7 +21941,7 @@
                         "name": "snippetSingleClass",
                         "type": "",
                         "returnType": "",
-                        "line": 134
+                        "line": 138
                     }
                 },
                 "snippetMultiClass": {
@@ -21950,7 +21950,7 @@
                         "name": "snippetMultiClass",
                         "type": "",
                         "returnType": "",
-                        "line": 137
+                        "line": 141
                     }
                 },
                 "snippetDisabledClass": {
@@ -21959,7 +21959,7 @@
                         "name": "snippetDisabledClass",
                         "type": "",
                         "returnType": "",
-                        "line": 140
+                        "line": 144
                     }
                 },
                 "snippetInlineLightClass": {
@@ -21968,7 +21968,7 @@
                         "name": "snippetInlineLightClass",
                         "type": "",
                         "returnType": "",
-                        "line": 143
+                        "line": 147
                     }
                 }
             }