carbon-components-angular 5.25.0 → 5.25.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/documentation/components/CodeSnippet.html +1 -1
- package/docs/documentation/js/search/search_index.js +2 -2
- package/docs/documentation/modules/ComboBoxModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ComboBoxModule.html +4 -4
- package/docs/documentation/modules/ContentSwitcherModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ContentSwitcherModule.html +4 -4
- package/docs/documentation/modules/DatePickerInputModule/dependencies.svg +7 -7
- package/docs/documentation/modules/DatePickerInputModule.html +7 -7
- package/docs/documentation/modules/DatePickerModule/dependencies.svg +57 -53
- package/docs/documentation/modules/DatePickerModule.html +57 -53
- package/docs/documentation/modules/DialogModule/dependencies.svg +34 -34
- package/docs/documentation/modules/DialogModule.html +34 -34
- package/docs/documentation/modules/GridModule/dependencies.svg +60 -60
- package/docs/documentation/modules/GridModule.html +60 -60
- package/docs/documentation/modules/LoadingModule/dependencies.svg +4 -4
- package/docs/documentation/modules/LoadingModule.html +4 -4
- package/docs/documentation/modules/NFormsModule/dependencies.svg +4 -4
- package/docs/documentation/modules/NFormsModule.html +4 -4
- package/docs/documentation/modules/NumberModule/dependencies.svg +4 -4
- package/docs/documentation/modules/NumberModule.html +4 -4
- package/docs/documentation/modules/ProgressIndicatorModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ProgressIndicatorModule.html +4 -4
- package/docs/documentation/modules/RadioModule/dependencies.svg +4 -4
- package/docs/documentation/modules/RadioModule.html +4 -4
- package/docs/documentation/modules/SearchModule/dependencies.svg +4 -4
- package/docs/documentation/modules/SearchModule.html +4 -4
- package/docs/documentation/modules/SelectModule/dependencies.svg +58 -58
- package/docs/documentation/modules/SelectModule.html +58 -58
- package/docs/documentation/modules/SliderModule/dependencies.svg +4 -4
- package/docs/documentation/modules/SliderModule.html +4 -4
- package/docs/documentation/modules/StructuredListModule/dependencies.svg +66 -66
- package/docs/documentation/modules/StructuredListModule.html +66 -66
- package/docs/documentation/modules/TabsModule/dependencies.svg +69 -69
- package/docs/documentation/modules/TabsModule.html +69 -69
- package/docs/documentation/modules/TagModule/dependencies.svg +4 -4
- package/docs/documentation/modules/TagModule.html +4 -4
- package/docs/documentation/modules/ThemeModule/dependencies.svg +4 -4
- package/docs/documentation/modules/ThemeModule.html +4 -4
- package/docs/documentation/modules/TilesModule/dependencies.svg +98 -98
- package/docs/documentation/modules/TilesModule.html +98 -98
- package/docs/documentation/modules/TimePickerModule/dependencies.svg +41 -45
- package/docs/documentation/modules/TimePickerModule.html +41 -45
- package/docs/documentation/modules/ToggleModule/dependencies.svg +42 -46
- package/docs/documentation/modules/ToggleModule.html +42 -46
- package/docs/documentation/modules/ToggletipModule/dependencies.svg +37 -37
- package/docs/documentation/modules/ToggletipModule.html +37 -37
- package/docs/documentation/modules/TooltipModule/dependencies.svg +4 -4
- package/docs/documentation/modules/TooltipModule.html +4 -4
- package/docs/documentation/modules/TreeviewModule/dependencies.svg +35 -35
- package/docs/documentation/modules/TreeviewModule.html +35 -35
- package/docs/documentation.json +8 -8
- package/docs/storybook/{code-snippet-code-snippet-stories.e78f3090.iframe.bundle.js → code-snippet-code-snippet-stories.cdd672a6.iframe.bundle.js} +1 -1
- package/docs/storybook/iframe.html +2 -2
- package/docs/storybook/main.9d6fe5aa.iframe.bundle.js +1 -0
- package/docs/storybook/project.json +1 -1
- package/docs/storybook/{runtime~main.febf8cc7.iframe.bundle.js → runtime~main.a0e00005.iframe.bundle.js} +1 -1
- package/esm2020/code-snippet/code-snippet.component.mjs +2 -2
- package/fesm2015/carbon-components-angular-code-snippet.mjs +1 -1
- package/fesm2015/carbon-components-angular-code-snippet.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-code-snippet.mjs +1 -1
- package/fesm2020/carbon-components-angular-code-snippet.mjs.map +1 -1
- package/package.json +1 -1
- package/docs/storybook/main.82f7534c.iframe.bundle.js +0 -1
|
@@ -64,101 +64,101 @@
|
|
|
64
64
|
<text text-anchor="start" x="429.73" y="-15.4" font-family="Times-12" font-size="14.00">  Exports</text>
|
|
65
65
|
<g id="clust1" class="cluster">
|
|
66
66
|
<title>cluster_TreeviewModule</title>
|
|
67
|
-
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="
|
|
67
|
+
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="18,-70 18,-333 478,-333 478,-70 18,-70"/>
|
|
68
68
|
</g>
|
|
69
|
-
<g id="
|
|
70
|
-
<title>
|
|
71
|
-
<polygon fill="none" stroke="black" points="
|
|
69
|
+
<g id="clust6" class="cluster">
|
|
70
|
+
<title>cluster_TreeviewModule_exports</title>
|
|
71
|
+
<polygon fill="none" stroke="black" points="91,-273 91,-325 406,-325 406,-273 91,-273"/>
|
|
72
72
|
</g>
|
|
73
73
|
<g id="clust4" class="cluster">
|
|
74
74
|
<title>cluster_TreeviewModule_TreeViewComponent_providers</title>
|
|
75
|
-
<polygon fill="none" stroke="black" points="
|
|
75
|
+
<polygon fill="none" stroke="black" points="296,-78 296,-195 470,-195 470,-78 296,-78"/>
|
|
76
76
|
</g>
|
|
77
77
|
<g id="clust5" class="cluster">
|
|
78
78
|
<title>cluster_TreeviewModule_imports</title>
|
|
79
|
-
<polygon fill="none" stroke="black" points="
|
|
79
|
+
<polygon fill="none" stroke="black" points="188,-143 188,-195 288,-195 288,-143 188,-143"/>
|
|
80
80
|
</g>
|
|
81
|
-
<g id="
|
|
82
|
-
<title>
|
|
83
|
-
<polygon fill="none" stroke="black" points="
|
|
81
|
+
<g id="clust2" class="cluster">
|
|
82
|
+
<title>cluster_TreeviewModule_declarations</title>
|
|
83
|
+
<polygon fill="none" stroke="black" points="26,-143 26,-195 180,-195 180,-143 26,-143"/>
|
|
84
84
|
</g>
|
|
85
85
|
<!-- TreeNodeComponent -->
|
|
86
86
|
<g id="node1" class="node">
|
|
87
87
|
<title>TreeNodeComponent</title>
|
|
88
|
-
<polygon fill="#ffffb3" stroke="black" points="
|
|
89
|
-
<text text-anchor="middle" x="
|
|
88
|
+
<polygon fill="#ffffb3" stroke="black" points="171.8,-187 34.2,-187 34.2,-151 171.8,-151 171.8,-187"/>
|
|
89
|
+
<text text-anchor="middle" x="103" y="-164.8" font-family="Times,serif" font-size="14.00">TreeNodeComponent</text>
|
|
90
90
|
</g>
|
|
91
91
|
<!-- TreeviewModule -->
|
|
92
92
|
<g id="node3" class="node">
|
|
93
93
|
<title>TreeviewModule</title>
|
|
94
|
-
<polygon fill="#8dd3c7" stroke="black" points="
|
|
95
|
-
<text text-anchor="middle" x="
|
|
94
|
+
<polygon fill="#8dd3c7" stroke="black" points="294.4,-252 291.4,-256 270.4,-256 267.4,-252 181.6,-252 181.6,-216 294.4,-216 294.4,-252"/>
|
|
95
|
+
<text text-anchor="middle" x="238" y="-229.8" font-family="Times,serif" font-size="14.00">TreeviewModule</text>
|
|
96
96
|
</g>
|
|
97
97
|
<!-- TreeNodeComponent->TreeviewModule -->
|
|
98
98
|
<g id="edge1" class="edge">
|
|
99
99
|
<title>TreeNodeComponent->TreeviewModule</title>
|
|
100
|
-
<path fill="none" stroke="black" d="
|
|
101
|
-
<polygon fill="black" stroke="black" points="
|
|
100
|
+
<path fill="none" stroke="black" d="M171.84,-169C181.82,-169 188.79,-169 188.79,-169 188.79,-169 188.79,-205.89 188.79,-205.89"/>
|
|
101
|
+
<polygon fill="black" stroke="black" points="185.29,-205.89 188.79,-215.89 192.29,-205.89 185.29,-205.89"/>
|
|
102
102
|
</g>
|
|
103
103
|
<!-- TreeViewComponent -->
|
|
104
104
|
<g id="node2" class="node">
|
|
105
105
|
<title>TreeViewComponent</title>
|
|
106
|
-
<polygon fill="#ffffb3" stroke="black" points="
|
|
107
|
-
<text text-anchor="middle" x="
|
|
106
|
+
<polygon fill="#ffffb3" stroke="black" points="446.79,-187 309.21,-187 309.21,-151 446.79,-151 446.79,-187"/>
|
|
107
|
+
<text text-anchor="middle" x="378" y="-164.8" font-family="Times,serif" font-size="14.00">TreeViewComponent</text>
|
|
108
108
|
</g>
|
|
109
109
|
<!-- TreeViewComponent->TreeviewModule -->
|
|
110
110
|
<g id="edge2" class="edge">
|
|
111
111
|
<title>TreeViewComponent->TreeviewModule</title>
|
|
112
|
-
<path fill="none" stroke="black" d="
|
|
113
|
-
<polygon fill="black" stroke="black" points="
|
|
112
|
+
<path fill="none" stroke="black" d="M309.19,-169C296.52,-169 287.21,-169 287.21,-169 287.21,-169 287.21,-205.89 287.21,-205.89"/>
|
|
113
|
+
<polygon fill="black" stroke="black" points="283.71,-205.89 287.21,-215.89 290.71,-205.89 283.71,-205.89"/>
|
|
114
114
|
</g>
|
|
115
115
|
<!-- TreeNodeComponent -->
|
|
116
116
|
<g id="node6" class="node">
|
|
117
117
|
<title>TreeNodeComponent </title>
|
|
118
|
-
<polygon fill="#fb8072" stroke="black" points="
|
|
119
|
-
<text text-anchor="middle" x="
|
|
118
|
+
<polygon fill="#fb8072" stroke="black" points="398.3,-317 257.7,-317 257.7,-281 398.3,-281 398.3,-317"/>
|
|
119
|
+
<text text-anchor="middle" x="328" y="-294.8" font-family="Times,serif" font-size="14.00">TreeNodeComponent </text>
|
|
120
120
|
</g>
|
|
121
121
|
<!-- TreeviewModule->TreeNodeComponent -->
|
|
122
122
|
<g id="edge5" class="edge">
|
|
123
123
|
<title>TreeviewModule->TreeNodeComponent </title>
|
|
124
|
-
<path fill="none" stroke="black" stroke-dasharray="5,2" d="
|
|
125
|
-
<polygon fill="black" stroke="black" points="
|
|
124
|
+
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M275.9,-252.11C275.9,-252.11 275.9,-270.99 275.9,-270.99"/>
|
|
125
|
+
<polygon fill="black" stroke="black" points="272.4,-270.99 275.9,-280.99 279.4,-270.99 272.4,-270.99"/>
|
|
126
126
|
</g>
|
|
127
127
|
<!-- TreeViewComponent -->
|
|
128
128
|
<g id="node7" class="node">
|
|
129
129
|
<title>TreeViewComponent </title>
|
|
130
|
-
<polygon fill="#fb8072" stroke="black" points="
|
|
131
|
-
<text text-anchor="middle" x="
|
|
130
|
+
<polygon fill="#fb8072" stroke="black" points="239.29,-317 98.71,-317 98.71,-281 239.29,-281 239.29,-317"/>
|
|
131
|
+
<text text-anchor="middle" x="169" y="-294.8" font-family="Times,serif" font-size="14.00">TreeViewComponent </text>
|
|
132
132
|
</g>
|
|
133
133
|
<!-- TreeviewModule->TreeViewComponent -->
|
|
134
134
|
<g id="edge6" class="edge">
|
|
135
135
|
<title>TreeviewModule->TreeViewComponent </title>
|
|
136
|
-
<path fill="none" stroke="black" stroke-dasharray="5,2" d="
|
|
137
|
-
<polygon fill="black" stroke="black" points="
|
|
136
|
+
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M210.6,-252.11C210.6,-252.11 210.6,-270.99 210.6,-270.99"/>
|
|
137
|
+
<polygon fill="black" stroke="black" points="207.1,-270.99 210.6,-280.99 214.1,-270.99 207.1,-270.99"/>
|
|
138
138
|
</g>
|
|
139
139
|
<!-- TreeViewService -->
|
|
140
140
|
<g id="node4" class="node">
|
|
141
141
|
<title>TreeViewService</title>
|
|
142
|
-
<ellipse fill="#fdb462" stroke="black" cx="
|
|
143
|
-
<text text-anchor="middle" x="
|
|
142
|
+
<ellipse fill="#fdb462" stroke="black" cx="383" cy="-104" rx="78.69" ry="18"/>
|
|
143
|
+
<text text-anchor="middle" x="383" y="-99.8" font-family="Times,serif" font-size="14.00">TreeViewService</text>
|
|
144
144
|
</g>
|
|
145
145
|
<!-- TreeViewService->TreeViewComponent -->
|
|
146
146
|
<g id="edge3" class="edge">
|
|
147
147
|
<title>TreeViewService->TreeViewComponent</title>
|
|
148
|
-
<path fill="none" stroke="black" d="
|
|
149
|
-
<polygon fill="black" stroke="black" points="
|
|
148
|
+
<path fill="none" stroke="black" d="M378,-122.11C378,-122.11 378,-140.99 378,-140.99"/>
|
|
149
|
+
<polygon fill="black" stroke="black" points="374.5,-140.99 378,-150.99 381.5,-140.99 374.5,-140.99"/>
|
|
150
150
|
</g>
|
|
151
151
|
<!-- IconModule -->
|
|
152
152
|
<g id="node5" class="node">
|
|
153
153
|
<title>IconModule</title>
|
|
154
|
-
<polygon fill="#8dd3c7" stroke="black" points="
|
|
155
|
-
<text text-anchor="middle" x="
|
|
154
|
+
<polygon fill="#8dd3c7" stroke="black" points="280.43,-187 277.43,-191 256.43,-191 253.43,-187 195.57,-187 195.57,-151 280.43,-151 280.43,-187"/>
|
|
155
|
+
<text text-anchor="middle" x="238" y="-164.8" font-family="Times,serif" font-size="14.00">IconModule</text>
|
|
156
156
|
</g>
|
|
157
157
|
<!-- IconModule->TreeviewModule -->
|
|
158
158
|
<g id="edge4" class="edge">
|
|
159
159
|
<title>IconModule->TreeviewModule</title>
|
|
160
|
-
<path fill="none" stroke="black" d="
|
|
161
|
-
<polygon fill="black" stroke="black" points="
|
|
160
|
+
<path fill="none" stroke="black" d="M238,-187.11C238,-187.11 238,-205.99 238,-205.99"/>
|
|
161
|
+
<polygon fill="black" stroke="black" points="234.5,-205.99 238,-215.99 241.5,-205.99 234.5,-205.99"/>
|
|
162
162
|
</g>
|
|
163
163
|
</g>
|
|
164
164
|
</svg>
|
package/docs/documentation.json
CHANGED
|
@@ -21430,7 +21430,7 @@
|
|
|
21430
21430
|
},
|
|
21431
21431
|
{
|
|
21432
21432
|
"name": "CodeSnippet",
|
|
21433
|
-
"id": "component-CodeSnippet-
|
|
21433
|
+
"id": "component-CodeSnippet-99343d2fcf99f732e0c486c38eb952063dffff0aa9b62af956d3c96ec92abdcd732f95bad67963b516a66d20227d7bdf130d98769e90eed72086755a389c3b2b",
|
|
21434
21434
|
"file": "src/code-snippet/code-snippet.component.ts",
|
|
21435
21435
|
"encapsulation": [],
|
|
21436
21436
|
"entryComponents": [],
|
|
@@ -21976,7 +21976,7 @@
|
|
|
21976
21976
|
"description": "<p>Get started with importing the module:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { CodeSnippetModule } from 'carbon-components-angular';</code></pre></div><div><pre class=\"line-numbers\"><code class=\"language-html\"><cds-code-snippet>Code</cds-code-snippet></code></pre></div><p><a href=\"../../?path=/story/components-code-snippet--basic\">See demo</a></p>\n",
|
|
21977
21977
|
"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",
|
|
21978
21978
|
"type": "component",
|
|
21979
|
-
"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",
|
|
21979
|
+
"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.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}\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",
|
|
21980
21980
|
"assetsDirs": [],
|
|
21981
21981
|
"styleUrlsData": "",
|
|
21982
21982
|
"stylesData": "",
|
|
@@ -70865,7 +70865,7 @@
|
|
|
70865
70865
|
"deprecated": false,
|
|
70866
70866
|
"deprecationMessage": "",
|
|
70867
70867
|
"type": "",
|
|
70868
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\tHere is some <cds-code-snippet display=\"inline\" [theme]=\"theme\">{{
|
|
70868
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\tHere is some <cds-code-snippet display=\"inline\" [theme]=\"theme\">{{snippet}}</cds-code-snippet> for you.\n\t`\n})"
|
|
70869
70869
|
},
|
|
70870
70870
|
{
|
|
70871
70871
|
"name": "InlineTemplate",
|
|
@@ -71211,7 +71211,7 @@
|
|
|
71211
71211
|
"deprecated": false,
|
|
71212
71212
|
"deprecationMessage": "",
|
|
71213
71213
|
"type": "",
|
|
71214
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-code-snippet display=\"multi\">{{
|
|
71214
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-code-snippet display=\"multi\">{{snippet}}</cds-code-snippet>\n\t`\n})"
|
|
71215
71215
|
},
|
|
71216
71216
|
{
|
|
71217
71217
|
"name": "MultiTemplate",
|
|
@@ -72316,7 +72316,7 @@
|
|
|
72316
72316
|
"deprecated": false,
|
|
72317
72317
|
"deprecationMessage": "",
|
|
72318
72318
|
"type": "",
|
|
72319
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-code-snippet display=\"single\">{{
|
|
72319
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-code-snippet display=\"single\">{{snippet}}</cds-code-snippet>\n\t`\n})"
|
|
72320
72320
|
},
|
|
72321
72321
|
{
|
|
72322
72322
|
"name": "Template",
|
|
@@ -76338,7 +76338,7 @@
|
|
|
76338
76338
|
"deprecated": false,
|
|
76339
76339
|
"deprecationMessage": "",
|
|
76340
76340
|
"type": "",
|
|
76341
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\tHere is some <cds-code-snippet display=\"inline\" [theme]=\"theme\">{{
|
|
76341
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\tHere is some <cds-code-snippet display=\"inline\" [theme]=\"theme\">{{snippet}}</cds-code-snippet> for you.\n\t`\n})"
|
|
76342
76342
|
},
|
|
76343
76343
|
{
|
|
76344
76344
|
"name": "Multi",
|
|
@@ -76358,7 +76358,7 @@
|
|
|
76358
76358
|
"deprecated": false,
|
|
76359
76359
|
"deprecationMessage": "",
|
|
76360
76360
|
"type": "",
|
|
76361
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-code-snippet display=\"multi\">{{
|
|
76361
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-code-snippet display=\"multi\">{{snippet}}</cds-code-snippet>\n\t`\n})"
|
|
76362
76362
|
},
|
|
76363
76363
|
{
|
|
76364
76364
|
"name": "Skeleton",
|
|
@@ -76388,7 +76388,7 @@
|
|
|
76388
76388
|
"deprecated": false,
|
|
76389
76389
|
"deprecationMessage": "",
|
|
76390
76390
|
"type": "",
|
|
76391
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-code-snippet display=\"single\">{{
|
|
76391
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-code-snippet display=\"single\">{{snippet}}</cds-code-snippet>\n\t`\n})"
|
|
76392
76392
|
}
|
|
76393
76393
|
],
|
|
76394
76394
|
"src/combobox/combobox.stories.ts": [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[3858],{"./node_modules/@carbon/utils-position/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{var _a,PLACEMENTS;__webpack_require__.d(__webpack_exports__,{FK:()=>position,ZP:()=>__WEBPACK_DEFAULT_EXPORT__}),function(PLACEMENTS){PLACEMENTS.LEFT="left",PLACEMENTS.RIGHT="right",PLACEMENTS.TOP="top",PLACEMENTS.BOTTOM="bottom"}(PLACEMENTS||(PLACEMENTS={}));var defaultPositions=((_a={})[PLACEMENTS.LEFT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left-target.offsetWidth)}},_a[PLACEMENTS.RIGHT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left+referenceRect.width)}},_a[PLACEMENTS.TOP]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top-target.offsetHeight),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a[PLACEMENTS.BOTTOM]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top+referenceRect.height),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a),windowRef="undefined"!=typeof window?window:{innerHeight:0,scrollY:0,innerWidth:0,scrollX:0},Position=function(){function Position(positions){void 0===positions&&(positions={}),this.positions=defaultPositions,this.positions=Object.assign({},defaultPositions,positions)}return Position.prototype.getRelativeOffset=function(target){for(var offsets={left:target.offsetLeft,top:target.offsetTop};target.offsetParent&&"static"===getComputedStyle(target.offsetParent).position;)offsets.left+=target.offsetLeft,offsets.top+=target.offsetTop,target=target.offsetParent;return offsets},Position.prototype.getAbsoluteOffset=function(target){for(var currentNode=target,margins={top:0,left:0};currentNode.offsetParent;){var computed=getComputedStyle(currentNode.offsetParent);"static"===computed.position&&computed.marginLeft&&computed.marginTop&&(parseInt(computed.marginTop,10)&&(margins.top+=parseInt(computed.marginTop,10)),parseInt(computed.marginLeft,10)&&(margins.left+=parseInt(computed.marginLeft,10))),currentNode=currentNode.offsetParent}var targetRect=target.getBoundingClientRect(),relativeRect=document.body.getBoundingClientRect();return{top:targetRect.top-relativeRect.top+margins.top,left:targetRect.left-relativeRect.left+margins.left}},Position.prototype.findRelative=function(reference,target,placement){var referenceOffset=this.getRelativeOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findAbsolute=function(reference,target,placement){var referenceOffset=this.getAbsoluteOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPosition=function(reference,target,placement,offsetFunction){void 0===offsetFunction&&(offsetFunction=this.getAbsoluteOffset.bind(this));var referenceOffset=offsetFunction(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPositionAt=function(offset,target,placement){return this.calculatePosition(offset,{top:0,left:0,height:0,width:0},target,placement)},Position.prototype.getPlacementBox=function(target,position){var targetBottom=target.offsetHeight+position.top,targetRight=target.offsetWidth+position.left;return{top:position.top,bottom:targetBottom,left:position.left,right:targetRight}},Position.prototype.addOffset=function(position,top,left){return void 0===top&&(top=0),void 0===left&&(left=0),Object.assign({},position,{top:position.top+top,left:position.left+left})},Position.prototype.setElement=function(element,position){element.style.top=position.top+"px",element.style.left=position.left+"px"},Position.prototype.findBestPlacement=function(reference,target,placements,containerFunction,positionFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this)),void 0===positionFunction&&(positionFunction=this.findPosition.bind(this));var weightedPlacements=placements.map((function(placement){var pos=positionFunction(reference,target,placement),box=_this.getPlacementBox(target,pos),hiddenHeight=0,hiddenWidth=0,container=containerFunction();box.top<container.top?hiddenHeight=container.top-box.top:box.bottom>container.height&&(hiddenHeight=box.bottom-container.height),box.left<container.left?hiddenWidth=container.left-box.left:box.right>container.width&&(hiddenWidth=box.right-container.width),hiddenHeight&&!hiddenWidth?hiddenWidth=1:hiddenWidth&&!hiddenHeight&&(hiddenHeight=1);var area=target.offsetHeight*target.offsetWidth;return{placement,weight:(area-hiddenHeight*hiddenWidth)/area}}));return weightedPlacements.sort((function(a,b){return b.weight-a.weight})),weightedPlacements[0].placement},Position.prototype.findBestPlacementAt=function(offset,target,placements,containerFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this));return this.findBestPlacement(null,target,placements,containerFunction,(function(_,target,placement){return _this.findPositionAt(offset,target,placement)}))},Position.prototype.defaultContainerFunction=function(){return{top:0,left:0,height:windowRef.innerHeight,width:windowRef.innerWidth}},Position.prototype.calculatePosition=function(referenceOffset,referenceRect,target,placement){return this.positions[placement]?this.positions[placement](referenceOffset,target,referenceRect):(console.error("No function found for placement, defaulting to 0,0"),{left:0,top:0})},Position}(),position=new Position;const __WEBPACK_DEFAULT_EXPORT__=Position},"./src/button/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{HL:()=>BaseIconButton,zx:()=>Button,hJ:()=>ButtonModule,uV:()=>ButtonSet,hU:()=>IconButton});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let Button=class Button{constructor(){this.cdsButton="primary",this.skeleton=!1,this.iconOnly=!1,this.isExpressive=!1,this.baseClass=!0}set ibmButton(type){this.cdsButton=type}get primaryButton(){return"primary"===this.cdsButton||!this.cdsButton}get secondaryButton(){return"secondary"===this.cdsButton}get tertiaryButton(){return"tertiary"===this.cdsButton}get ghostButton(){return"ghost"===this.cdsButton}get dangerButton(){return"danger"===this.cdsButton||"danger--primary"===this.cdsButton}get dangerTertiary(){return"danger--tertiary"===this.cdsButton}get dangerGhost(){return"danger--ghost"===this.cdsButton}get smallSize(){return"sm"===this.size&&!this.isExpressive}get mediumSize(){return"md"===this.size&&!this.isExpressive}get largeSize(){return"lg"===this.size}get extraLargeSize(){return"xl"===this.size}get twoExtraLargeSize(){return"2xl"===this.size}get smallLayoutSize(){return"sm"===this.size&&!this.isExpressive}get mediumLayoutSize(){return"md"===this.size&&!this.isExpressive}get largeLayoutSize(){return"lg"===this.size}get extraLargeLayoutSize(){return"xl"===this.size}get twoExtraLargeLayoutSize(){return"2xl"===this.size}};Button.propDecorators={ibmButton:[{type:core.Input}],cdsButton:[{type:core.Input}],size:[{type:core.Input}],skeleton:[{type:core.HostBinding,args:["class.cds--skeleton"]},{type:core.Input}],iconOnly:[{type:core.HostBinding,args:["class.cds--btn--icon-only"]},{type:core.Input}],isExpressive:[{type:core.HostBinding,args:["class.cds--btn--expressive"]},{type:core.Input}],baseClass:[{type:core.HostBinding,args:["class.cds--btn"]}],primaryButton:[{type:core.HostBinding,args:["class.cds--btn--primary"]}],secondaryButton:[{type:core.HostBinding,args:["class.cds--btn--secondary"]}],tertiaryButton:[{type:core.HostBinding,args:["class.cds--btn--tertiary"]}],ghostButton:[{type:core.HostBinding,args:["class.cds--btn--ghost"]}],dangerButton:[{type:core.HostBinding,args:["class.cds--btn--danger"]}],dangerTertiary:[{type:core.HostBinding,args:["class.cds--btn--danger--tertiary"]}],dangerGhost:[{type:core.HostBinding,args:["class.cds--btn--danger--ghost"]}],smallSize:[{type:core.HostBinding,args:["class.cds--btn--sm"]}],mediumSize:[{type:core.HostBinding,args:["class.cds--btn--md"]}],largeSize:[{type:core.HostBinding,args:["class.cds--btn--lg"]}],extraLargeSize:[{type:core.HostBinding,args:["class.cds--btn--xl"]}],twoExtraLargeSize:[{type:core.HostBinding,args:["class.cds--btn--2xl"]}],smallLayoutSize:[{type:core.HostBinding,args:["class.cds--layout--size-sm"]}],mediumLayoutSize:[{type:core.HostBinding,args:["class.cds--layout--size-md"]}],largeLayoutSize:[{type:core.HostBinding,args:["class.cds--layout--size-lg"]}],extraLargeLayoutSize:[{type:core.HostBinding,args:["class.cds--layout--size-xl"]}],twoExtraLargeLayoutSize:[{type:core.HostBinding,args:["class.cds--layout--size-2xl"]}]},Button=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsButton], [ibmButton]"})],Button);let ButtonSet=class ButtonSet{constructor(){this.buttonSetClass=!0}};ButtonSet.propDecorators={buttonSetClass:[{type:core.HostBinding,args:["class.cds--btn-set"]}]},ButtonSet=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-button-set, ibm-button-set",template:"<ng-content></ng-content>"})],ButtonSet);let BaseIconButton=class BaseIconButton{constructor(){this.caret=!0,this.dropShadow=!0,this.highContrast=!0,this.isOpen=!1,this.align="bottom",this.autoAlign=!1,this.enterDelayMs=100,this.leaveDelayMs=300}};BaseIconButton.propDecorators={caret:[{type:core.Input}],dropShadow:[{type:core.Input}],highContrast:[{type:core.Input}],isOpen:[{type:core.Input}],align:[{type:core.Input}],autoAlign:[{type:core.Input}],enterDelayMs:[{type:core.Input}],leaveDelayMs:[{type:core.Input}]},BaseIconButton=(0,tslib_es6.gn)([(0,core.Component)({template:""})],BaseIconButton);let IconButton=class IconButton extends BaseIconButton{constructor(renderer){super(),this.renderer=renderer,this.buttonId="icon-btn-"+IconButton.iconButtonCounter++,this.kind="primary",this.size="lg",this.type="button",this.isExpressive=!1,this.disabled=!1,this.click=new core.EventEmitter,this.focus=new core.EventEmitter,this.blur=new core.EventEmitter,this.tooltipClick=new core.EventEmitter,this.classList={},this.attributeList={}}set buttonNgClass(obj){this.classList=Object.assign({"cds--btn--disabled":this.disabled},obj)}get buttonNgClass(){return this.classList}set buttonAttributes(obj){this.button&&(Object.keys(this.attributeList).forEach((key=>{this.renderer.removeAttribute(this.button.nativeElement,key)})),Object.keys(obj).forEach((key=>{this.renderer.setAttribute(this.button.nativeElement,key,obj[key])}))),this.attributeList=obj}get buttonAttributes(){return this.buttonAttributes}ngAfterViewInit(){this.buttonAttributes=this.attributeList}emitClickEvent(event,element="button"){event.preventDefault(),event.stopPropagation(),"tooltip"!==element?this.click.emit(event):this.tooltipClick.emit(event)}};IconButton.iconButtonCounter=0,IconButton.ctorParameters=()=>[{type:core.Renderer2}],IconButton.propDecorators={buttonNgClass:[{type:core.Input}],buttonAttributes:[{type:core.Input}],button:[{type:core.ViewChild,args:["button"]}],buttonId:[{type:core.Input}],kind:[{type:core.Input}],size:[{type:core.Input}],type:[{type:core.Input}],isExpressive:[{type:core.Input}],disabled:[{type:core.Input}],description:[{type:core.Input}],click:[{type:core.Output}],focus:[{type:core.Output}],blur:[{type:core.Output}],tooltipClick:[{type:core.Output}]},IconButton=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-icon-button, ibm-icon-button",template:'\n\t<cds-tooltip\n\t\tclass="cds--icon-tooltip"\n\t\t[description]="description"\n\t\t[disabled]="disabled"\n\t\t[caret]="caret"\n\t\t[dropShadow]="dropShadow"\n\t\t[highContrast]="highContrast"\n\t\t[isOpen]="isOpen"\n\t\t[align]="align"\n\t\t[autoAlign]="autoAlign"\n\t\t[enterDelayMs]="enterDelayMs"\n\t\t[leaveDelayMs]="leaveDelayMs"\n\t\t(click)="emitClickEvent($event, \'tooltip\')">\n\t\t<button\n\t\t\t#button\n\t\t\t[id]="buttonId"\n\t\t\t[disabled]="disabled"\n\t\t\t[attr.type]="type"\n\t\t\t[iconOnly]="true"\n\t\t\t[ngClass]="buttonNgClass"\n\t\t\t[cdsButton]="kind"\n\t\t\t[size]="size"\n\t\t\t[isExpressive]="isExpressive"\n\t\t\t(click)="emitClickEvent($event)"\n\t\t\t(focus)="focus.emit($event)"\n\t\t\t(blur)="blur.emit($event)">\n\t\t\t<ng-content></ng-content>\n\t\t</button>\n\t</cds-tooltip>\n\t'})],IconButton);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),tooltip=__webpack_require__("./src/tooltip/index.ts");let ButtonModule=class ButtonModule{};ButtonModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Button,ButtonSet,BaseIconButton,IconButton],exports:[Button,ButtonSet,IconButton],imports:[common.CommonModule,tooltip.z8]})],ButtonModule)},"./src/icon/icon.directive.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{a:()=>IconDirective});var tslib__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/tslib/tslib.es6.js"),_angular_core__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),_icon_service__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/icon/icon.service.ts"),_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@carbon/icon-helpers/es/index.js");let IconDirective=class IconDirective{constructor(elementRef,iconService){this.elementRef=elementRef,this.iconService=iconService,this.cdsIcon="",this.size="16",this.title="",this.ariaLabel="",this.ariaLabelledBy="",this.ariaHidden="",this.isFocusable=!1}set ibmIcon(iconName){this.cdsIcon=iconName}renderIcon(iconName){const root=this.elementRef.nativeElement;let icon;try{icon=this.iconService.get(iconName,this.size.toString())}catch(error){return void console.warn(error)}const domParser=new DOMParser,rawSVG=icon.svg,svgElement=domParser.parseFromString(rawSVG,"image/svg+xml").documentElement;let node="SVG"!==root.tagName.toUpperCase()?svgElement:svgElement.firstChild;for(root.innerHTML="";node;)root.appendChild(root.ownerDocument.importNode(node,!0)),node=node.nextSibling;const svg="SVG"!==root.tagName.toUpperCase()?svgElement:root;svg.setAttribute("xmlns","http://www.w3.org/2000/svg");const attributes=(0,_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_1__.u9)({width:icon.attrs.width,height:icon.attrs.height,viewBox:icon.attrs.viewBox,title:this.title,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledBy,"aria-hidden":this.ariaHidden,focusable:this.isFocusable.toString()}),attrKeys=Object.keys(attributes);for(let i=0;i<attrKeys.length;i++){const key=attrKeys[i],value=attributes[key];"title"!==key&&(value&&svg.setAttribute(key,value))}if(attributes.title){const title=document.createElement("title");title.textContent=attributes.title,IconDirective.titleIdCounter++,title.setAttribute("id",`${icon.name}-title-${IconDirective.titleIdCounter}`),svg.insertBefore(title,svg.firstElementChild),svg.setAttribute("aria-labelledby",`${icon.name}-title-${IconDirective.titleIdCounter}`)}}ngAfterViewInit(){this.renderIcon(this.cdsIcon)}ngOnChanges({cdsIcon}){cdsIcon&&!cdsIcon.isFirstChange()&&this.renderIcon(this.cdsIcon)}};IconDirective.titleIdCounter=0,IconDirective.ctorParameters=()=>[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.ElementRef},{type:_icon_service__WEBPACK_IMPORTED_MODULE_0__.C6}],IconDirective.propDecorators={ibmIcon:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],cdsIcon:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],size:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],title:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],ariaLabel:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],ariaLabelledBy:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],ariaHidden:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],isFocusable:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}]},IconDirective=(0,tslib__WEBPACK_IMPORTED_MODULE_3__.gn)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_2__.Directive)({selector:"[cdsIcon], [ibmIcon]"})],IconDirective)},"./src/icon/icon.module.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{QX:()=>IconModule});var tslib__WEBPACK_IMPORTED_MODULE_54__=__webpack_require__("./node_modules/tslib/tslib.es6.js"),_angular_core__WEBPACK_IMPORTED_MODULE_53__=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),_angular_common__WEBPACK_IMPORTED_MODULE_55__=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),_icon_directive__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/icon/icon.directive.ts"),_icon_service__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/icon/icon.service.ts"),_carbon_icons_es_add_16__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@carbon/icons/es/add/16.js"),_carbon_icons_es_add_20__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@carbon/icons/es/add/20.js"),_carbon_icons_es_bee_16__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@carbon/icons/es/bee/16.js"),_carbon_icons_es_bee_20__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@carbon/icons/es/bee/20.js"),_carbon_icons_es_calendar_16__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@carbon/icons/es/calendar/16.js"),_carbon_icons_es_carbon_16__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@carbon/icons/es/carbon/16.js"),_carbon_icons_es_carbon_20__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/@carbon/icons/es/carbon/20.js"),_carbon_icons_es_caret_down_16__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./node_modules/@carbon/icons/es/caret--down/16.js"),_carbon_icons_es_caret_left_16__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./node_modules/@carbon/icons/es/caret--left/16.js"),_carbon_icons_es_caret_right_16__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__("./node_modules/@carbon/icons/es/caret--right/16.js"),_carbon_icons_es_caret_up_16__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("./node_modules/@carbon/icons/es/caret--up/16.js"),_carbon_icons_es_checkmark_16__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark/16.js"),_carbon_icons_es_checkmark_filled_16__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark--filled/16.js"),_carbon_icons_es_checkmark_filled_20__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark--filled/20.js"),_carbon_icons_es_checkmark_outline_16__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark--outline/16.js"),_carbon_icons_es_chevron_down_16__WEBPACK_IMPORTED_MODULE_17__=__webpack_require__("./node_modules/@carbon/icons/es/chevron--down/16.js"),_carbon_icons_es_chevron_right_16__WEBPACK_IMPORTED_MODULE_18__=__webpack_require__("./node_modules/@carbon/icons/es/chevron--right/16.js"),_carbon_icons_es_circle_dash_16__WEBPACK_IMPORTED_MODULE_19__=__webpack_require__("./node_modules/@carbon/icons/es/circle-dash/16.js"),_carbon_icons_es_close_16__WEBPACK_IMPORTED_MODULE_20__=__webpack_require__("./node_modules/@carbon/icons/es/close/16.js"),_carbon_icons_es_close_20__WEBPACK_IMPORTED_MODULE_21__=__webpack_require__("./node_modules/@carbon/icons/es/close/20.js"),_carbon_icons_es_copy_16__WEBPACK_IMPORTED_MODULE_22__=__webpack_require__("./node_modules/@carbon/icons/es/copy/16.js"),_carbon_icons_es_copy_20__WEBPACK_IMPORTED_MODULE_23__=__webpack_require__("./node_modules/@carbon/icons/es/copy/20.js"),_carbon_icons_es_data_2_16__WEBPACK_IMPORTED_MODULE_24__=__webpack_require__("./node_modules/@carbon/icons/es/data--2/16.js"),_carbon_icons_es_data_2_20__WEBPACK_IMPORTED_MODULE_25__=__webpack_require__("./node_modules/@carbon/icons/es/data--2/20.js"),_carbon_icons_es_document_16__WEBPACK_IMPORTED_MODULE_26__=__webpack_require__("./node_modules/@carbon/icons/es/document/16.js"),_carbon_icons_es_document_20__WEBPACK_IMPORTED_MODULE_27__=__webpack_require__("./node_modules/@carbon/icons/es/document/20.js"),_carbon_icons_es_download_16__WEBPACK_IMPORTED_MODULE_28__=__webpack_require__("./node_modules/@carbon/icons/es/download/16.js"),_carbon_icons_es_error_filled_16__WEBPACK_IMPORTED_MODULE_29__=__webpack_require__("./node_modules/@carbon/icons/es/error--filled/16.js"),_carbon_icons_es_error_filled_20__WEBPACK_IMPORTED_MODULE_30__=__webpack_require__("./node_modules/@carbon/icons/es/error--filled/20.js"),_carbon_icons_es_fade_16__WEBPACK_IMPORTED_MODULE_31__=__webpack_require__("./node_modules/@carbon/icons/es/fade/16.js"),_carbon_icons_es_fade_20__WEBPACK_IMPORTED_MODULE_32__=__webpack_require__("./node_modules/@carbon/icons/es/fade/20.js"),_carbon_icons_es_folder_16__WEBPACK_IMPORTED_MODULE_33__=__webpack_require__("./node_modules/@carbon/icons/es/folder/16.js"),_carbon_icons_es_incomplete_16__WEBPACK_IMPORTED_MODULE_34__=__webpack_require__("./node_modules/@carbon/icons/es/incomplete/16.js"),_carbon_icons_es_information_filled_16__WEBPACK_IMPORTED_MODULE_35__=__webpack_require__("./node_modules/@carbon/icons/es/information--filled/16.js"),_carbon_icons_es_information_filled_20__WEBPACK_IMPORTED_MODULE_36__=__webpack_require__("./node_modules/@carbon/icons/es/information--filled/20.js"),_carbon_icons_es_information_square_filled_20__WEBPACK_IMPORTED_MODULE_37__=__webpack_require__("./node_modules/@carbon/icons/es/information--square--filled/20.js"),_carbon_icons_es_menu_16__WEBPACK_IMPORTED_MODULE_38__=__webpack_require__("./node_modules/@carbon/icons/es/menu/16.js"),_carbon_icons_es_menu_20__WEBPACK_IMPORTED_MODULE_39__=__webpack_require__("./node_modules/@carbon/icons/es/menu/20.js"),_carbon_icons_es_overflow_menu_vertical_16__WEBPACK_IMPORTED_MODULE_40__=__webpack_require__("./node_modules/@carbon/icons/es/overflow-menu--vertical/16.js"),_carbon_icons_es_overflow_menu_horizontal_16__WEBPACK_IMPORTED_MODULE_41__=__webpack_require__("./node_modules/@carbon/icons/es/overflow-menu--horizontal/16.js"),_carbon_icons_es_save_16__WEBPACK_IMPORTED_MODULE_42__=__webpack_require__("./node_modules/@carbon/icons/es/save/16.js"),_carbon_icons_es_search_16__WEBPACK_IMPORTED_MODULE_43__=__webpack_require__("./node_modules/@carbon/icons/es/search/16.js"),_carbon_icons_es_settings_16__WEBPACK_IMPORTED_MODULE_44__=__webpack_require__("./node_modules/@carbon/icons/es/settings/16.js"),_carbon_icons_es_settings_adjust_16__WEBPACK_IMPORTED_MODULE_45__=__webpack_require__("./node_modules/@carbon/icons/es/settings--adjust/16.js"),_carbon_icons_es_subtract_16__WEBPACK_IMPORTED_MODULE_46__=__webpack_require__("./node_modules/@carbon/icons/es/subtract/16.js"),_carbon_icons_es_trash_can_16__WEBPACK_IMPORTED_MODULE_47__=__webpack_require__("./node_modules/@carbon/icons/es/trash-can/16.js"),_carbon_icons_es_warning_16__WEBPACK_IMPORTED_MODULE_48__=__webpack_require__("./node_modules/@carbon/icons/es/warning/16.js"),_carbon_icons_es_warning_filled_16__WEBPACK_IMPORTED_MODULE_49__=__webpack_require__("./node_modules/@carbon/icons/es/warning--filled/16.js"),_carbon_icons_es_warning_filled_20__WEBPACK_IMPORTED_MODULE_50__=__webpack_require__("./node_modules/@carbon/icons/es/warning--filled/20.js"),_carbon_icons_es_warning_alt_filled_16__WEBPACK_IMPORTED_MODULE_51__=__webpack_require__("./node_modules/@carbon/icons/es/warning--alt--filled/16.js"),_carbon_icons_es_warning_alt_filled_20__WEBPACK_IMPORTED_MODULE_52__=__webpack_require__("./node_modules/@carbon/icons/es/warning--alt--filled/20.js");const ICON_SERVICE_PROVIDER={provide:_icon_service__WEBPACK_IMPORTED_MODULE_1__.C6,deps:[[new _angular_core__WEBPACK_IMPORTED_MODULE_53__.Optional,new _angular_core__WEBPACK_IMPORTED_MODULE_53__.SkipSelf,_icon_service__WEBPACK_IMPORTED_MODULE_1__.C6]],useFactory:function ICON_SERVICE_PROVIDER_FACTORY(parentService){return parentService||new _icon_service__WEBPACK_IMPORTED_MODULE_1__.C6}};let IconModule=class IconModule{constructor(iconService){this.iconService=iconService,iconService.registerAll([_carbon_icons_es_add_16__WEBPACK_IMPORTED_MODULE_2__.Z,_carbon_icons_es_add_20__WEBPACK_IMPORTED_MODULE_3__.Z,_carbon_icons_es_bee_16__WEBPACK_IMPORTED_MODULE_4__.Z,_carbon_icons_es_bee_20__WEBPACK_IMPORTED_MODULE_5__.Z,_carbon_icons_es_calendar_16__WEBPACK_IMPORTED_MODULE_6__.Z,_carbon_icons_es_carbon_16__WEBPACK_IMPORTED_MODULE_7__.Z,_carbon_icons_es_carbon_20__WEBPACK_IMPORTED_MODULE_8__.Z,_carbon_icons_es_caret_down_16__WEBPACK_IMPORTED_MODULE_9__.Z,_carbon_icons_es_caret_left_16__WEBPACK_IMPORTED_MODULE_10__.Z,_carbon_icons_es_caret_right_16__WEBPACK_IMPORTED_MODULE_11__.Z,_carbon_icons_es_caret_up_16__WEBPACK_IMPORTED_MODULE_12__.Z,_carbon_icons_es_checkmark_16__WEBPACK_IMPORTED_MODULE_13__.Z,_carbon_icons_es_checkmark_filled_16__WEBPACK_IMPORTED_MODULE_14__.Z,_carbon_icons_es_checkmark_filled_20__WEBPACK_IMPORTED_MODULE_15__.Z,_carbon_icons_es_checkmark_outline_16__WEBPACK_IMPORTED_MODULE_16__.Z,_carbon_icons_es_chevron_down_16__WEBPACK_IMPORTED_MODULE_17__.Z,_carbon_icons_es_chevron_right_16__WEBPACK_IMPORTED_MODULE_18__.Z,_carbon_icons_es_circle_dash_16__WEBPACK_IMPORTED_MODULE_19__.Z,_carbon_icons_es_close_16__WEBPACK_IMPORTED_MODULE_20__.Z,_carbon_icons_es_close_20__WEBPACK_IMPORTED_MODULE_21__.Z,_carbon_icons_es_copy_16__WEBPACK_IMPORTED_MODULE_22__.Z,_carbon_icons_es_copy_20__WEBPACK_IMPORTED_MODULE_23__.Z,_carbon_icons_es_data_2_16__WEBPACK_IMPORTED_MODULE_24__.Z,_carbon_icons_es_data_2_20__WEBPACK_IMPORTED_MODULE_25__.Z,_carbon_icons_es_document_16__WEBPACK_IMPORTED_MODULE_26__.Z,_carbon_icons_es_document_20__WEBPACK_IMPORTED_MODULE_27__.Z,_carbon_icons_es_download_16__WEBPACK_IMPORTED_MODULE_28__.Z,_carbon_icons_es_error_filled_16__WEBPACK_IMPORTED_MODULE_29__.Z,_carbon_icons_es_error_filled_20__WEBPACK_IMPORTED_MODULE_30__.Z,_carbon_icons_es_fade_16__WEBPACK_IMPORTED_MODULE_31__.Z,_carbon_icons_es_fade_20__WEBPACK_IMPORTED_MODULE_32__.Z,_carbon_icons_es_folder_16__WEBPACK_IMPORTED_MODULE_33__.Z,_carbon_icons_es_incomplete_16__WEBPACK_IMPORTED_MODULE_34__.Z,_carbon_icons_es_information_filled_16__WEBPACK_IMPORTED_MODULE_35__.Z,_carbon_icons_es_information_filled_20__WEBPACK_IMPORTED_MODULE_36__.Z,_carbon_icons_es_information_square_filled_20__WEBPACK_IMPORTED_MODULE_37__.Z,_carbon_icons_es_menu_16__WEBPACK_IMPORTED_MODULE_38__.Z,_carbon_icons_es_menu_20__WEBPACK_IMPORTED_MODULE_39__.Z,_carbon_icons_es_overflow_menu_vertical_16__WEBPACK_IMPORTED_MODULE_40__.Z,_carbon_icons_es_overflow_menu_horizontal_16__WEBPACK_IMPORTED_MODULE_41__.Z,_carbon_icons_es_save_16__WEBPACK_IMPORTED_MODULE_42__.Z,_carbon_icons_es_search_16__WEBPACK_IMPORTED_MODULE_43__.Z,_carbon_icons_es_settings_16__WEBPACK_IMPORTED_MODULE_44__.Z,_carbon_icons_es_settings_adjust_16__WEBPACK_IMPORTED_MODULE_45__.Z,_carbon_icons_es_subtract_16__WEBPACK_IMPORTED_MODULE_46__.Z,_carbon_icons_es_trash_can_16__WEBPACK_IMPORTED_MODULE_47__.Z,_carbon_icons_es_warning_16__WEBPACK_IMPORTED_MODULE_48__.Z,_carbon_icons_es_warning_filled_16__WEBPACK_IMPORTED_MODULE_49__.Z,_carbon_icons_es_warning_filled_20__WEBPACK_IMPORTED_MODULE_50__.Z,_carbon_icons_es_warning_alt_filled_16__WEBPACK_IMPORTED_MODULE_51__.Z,_carbon_icons_es_warning_alt_filled_20__WEBPACK_IMPORTED_MODULE_52__.Z])}};IconModule.ctorParameters=()=>[{type:_icon_service__WEBPACK_IMPORTED_MODULE_1__.C6}],IconModule=(0,tslib__WEBPACK_IMPORTED_MODULE_54__.gn)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_53__.NgModule)({declarations:[_icon_directive__WEBPACK_IMPORTED_MODULE_0__.a],exports:[_icon_directive__WEBPACK_IMPORTED_MODULE_0__.a],imports:[_angular_common__WEBPACK_IMPORTED_MODULE_55__.CommonModule],providers:[ICON_SERVICE_PROVIDER]})],IconModule)},"./src/icon/icon.service.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{C6:()=>IconService});var tslib__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/tslib/tslib.es6.js"),_angular_core__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@carbon/icon-helpers/es/index.js");class IconNameNotFoundError extends Error{constructor(name){super(`Icon ${name} not found`)}}class IconSizeNotFoundError extends Error{constructor(size,name){super("Size ${size} for ${name} not found")}}class IconMemoryCache extends class IconCache{}{constructor(){super(...arguments),this.iconMap=new Map}get(name,size){if(!this.iconMap.has(name))throw new IconNameNotFoundError(name);const sizeMap=this.iconMap.get(name);if(!sizeMap.has(size))throw new IconSizeNotFoundError(size,name);return sizeMap.get(size)}set(name,size,descriptor){this.iconMap.has(name)||this.iconMap.set(name,new Map);this.iconMap.get(name).set(size,descriptor)}}let IconService=class IconService{constructor(){this.iconCache=new IconMemoryCache}registerAll(descriptors){descriptors.forEach((icon=>this.register(icon)))}register(descriptor){const{name}=descriptor;this.registerAs(name,descriptor)}registerAs(name,descriptor){const{size}=descriptor;this.iconCache.set(name,size.toString(),descriptor)}get(name,size){try{const icon=this.iconCache.get(name,size.toString());return icon.svg||(icon.svg=(0,_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_0__.BB)(icon)),icon}catch(e){throw e}}configure(options){this.iconCache=options.cache}};IconService=(0,tslib__WEBPACK_IMPORTED_MODULE_1__.gn)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_2__.Injectable)()],IconService)},"./src/icon/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{ar:()=>icon_directive.a,QX:()=>icon_module.QX,C6:()=>icon_service.C6});var icon_directive=__webpack_require__("./src/icon/icon.directive.ts"),icon_module=__webpack_require__("./src/icon/icon.module.ts"),icon_service=__webpack_require__("./src/icon/icon.service.ts")},"./src/code-snippet/code-snippet.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,Inline:()=>Inline,Multi:()=>Multi,Skeleton:()=>Skeleton,__namedExportsOrder:()=>__namedExportsOrder,default:()=>code_snippet_stories});var SnippetType,dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),i18n=__webpack_require__("./src/i18n/index.ts"),utils=__webpack_require__("./src/utils/index.ts"),src_button=__webpack_require__("./src/button/index.ts");!function(SnippetType){SnippetType.single="single",SnippetType.multi="multi",SnippetType.inline="inline"}(SnippetType||(SnippetType={}));let CodeSnippet=class CodeSnippet extends src_button.HL{constructor(i18n,eventService){super(),this.i18n=i18n,this.eventService=eventService,this.rowHeightInPixel=16,this.display=SnippetType.single,this.translations=this.i18n.get().CODE_SNIPPET,this.hideCopyButton=!1,this.disabled=!1,this.maxCollapsedNumberOfRows=15,this.minCollapsedNumberOfRows=3,this.maxExpandedNumberOfRows=0,this.minExpandedNumberOfRows=16,this.wrapText=!1,this.theme="dark",this.feedbackText=this.translations.COPIED,this.feedbackTimeout=2e3,this.expanded=!1,this.skeleton=!1,this.styles={},this.showFeedback=!1,this.animating=!1,this.hasExpandButton=null,this.isExpandable=!1,this.hasRightOverflow=!1,this.hasRight=!1,this.hasLeft=!1,this.dropShadow=!1}get snippetClass(){return this.display!==SnippetType.inline}get snippetSingleClass(){return this.display===SnippetType.single}get snippetMultiClass(){return this.display===SnippetType.multi}get snippetDisabledClass(){return"inline"!==this.display&&this.disabled}get snippetInlineLightClass(){return"light"===this.theme}handleScroll(){if(this.skeleton)return;let ref;switch(this.display){case"multi":ref=this.codeContent.nativeElement;break;case"single":ref=this.codeContainer.nativeElement;break;default:return}if(ref){const{scrollWidth,clientWidth,scrollLeft}=ref,horizontalOverflow=scrollWidth>clientWidth;this.hasLeft=horizontalOverflow&&!!scrollLeft,this.hasRight=horizontalOverflow&&scrollLeft+clientWidth!==scrollWidth}}toggleSnippetExpansion(){this.expanded=!this.expanded,this.calculateContainerHeight()}onCopyButtonClicked(){this.disabled||window.navigator.clipboard.writeText(this.code).then((()=>{this.showFeedback=!0,this.animating=!0,setTimeout((()=>{this.showFeedback=!1,this.animating=!1}),this.feedbackTimeout)}))}ngOnInit(){this.calculateContainerHeight()}ngAfterViewInit(){this.canExpand(),this.handleScroll(),window&&this.eventService.on(window,"resize",(()=>{this.canExpand(),this.handleScroll()}))}calculateContainerHeight(){"multi"!==this.display||this.skeleton||(this.styles={},this.expanded?(this.maxExpandedNumberOfRows>0&&(this.styles["max-height"]=this.maxExpandedNumberOfRows*this.rowHeightInPixel+"px"),this.minExpandedNumberOfRows>0&&(this.styles["min-height"]=this.minExpandedNumberOfRows*this.rowHeightInPixel+"px")):(this.maxCollapsedNumberOfRows>0&&(this.styles["max-height"]=this.maxCollapsedNumberOfRows*this.rowHeightInPixel+"px"),this.minCollapsedNumberOfRows>0&&(this.styles["min-height"]=this.minCollapsedNumberOfRows*this.rowHeightInPixel+"px")))}canExpand(){if("multi"===this.display&&!this.skeleton){const height=this.codeContent.nativeElement.getBoundingClientRect().height;this.maxCollapsedNumberOfRows>0&&(this.maxExpandedNumberOfRows<=0||this.maxExpandedNumberOfRows>this.maxCollapsedNumberOfRows)&&height>this.maxCollapsedNumberOfRows*this.rowHeightInPixel?this.isExpandable=!0:this.isExpandable=!1,this.expanded&&this.minExpandedNumberOfRows>0&&height<=this.minExpandedNumberOfRows*this.rowHeightInPixel&&(this.isExpandable=!1)}}};CodeSnippet.ctorParameters=()=>[{type:i18n.oc},{type:utils.PO}],CodeSnippet.propDecorators={snippetClass:[{type:core.HostBinding,args:["class.cds--snippet"]}],snippetSingleClass:[{type:core.HostBinding,args:["class.cds--snippet--single"]}],snippetMultiClass:[{type:core.HostBinding,args:["class.cds--snippet--multi"]}],snippetDisabledClass:[{type:core.HostBinding,args:["class.cds--snippet--disabled"]}],snippetInlineLightClass:[{type:core.HostBinding,args:["class.cds--snippet--light"]}],display:[{type:core.Input}],translations:[{type:core.Input}],copyButtonDescription:[{type:core.Input}],hideCopyButton:[{type:core.Input}],disabled:[{type:core.Input}],maxCollapsedNumberOfRows:[{type:core.Input}],minCollapsedNumberOfRows:[{type:core.Input}],maxExpandedNumberOfRows:[{type:core.Input}],minExpandedNumberOfRows:[{type:core.Input}],wrapText:[{type:core.HostBinding,args:["class.cds--snippet--wraptext"]},{type:core.Input}],theme:[{type:core.Input}],feedbackText:[{type:core.Input}],feedbackTimeout:[{type:core.Input}],expanded:[{type:core.HostBinding,args:["class.cds--snippet--expand"]},{type:core.Input}],skeleton:[{type:core.HostBinding,args:["class.cds--skeleton"]},{type:core.Input}],code:[{type:core.ViewChild,args:["code"]}],codeContent:[{type:core.ViewChild,args:["codeContent"]}],codeContainer:[{type:core.ViewChild,args:["codeContainer"]}]},CodeSnippet=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-code-snippet, ibm-code-snippet",template:'\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'})],CodeSnippet);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts");let CodeSnippetModule=class CodeSnippetModule{};CodeSnippetModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[CodeSnippet],exports:[CodeSnippet],imports:[common.CommonModule,src_button.hJ,i18n.LU,utils.As,icon.QX]})],CodeSnippetModule);const code_snippet_stories={title:"Components/Code Snippet",decorators:[(0,dist.moduleMetadata)({imports:[CodeSnippetModule]})],argTypes:{code:{control:!1},display:{control:!1},feedbackText:{control:!1},maxCollapsedNumberOfRows:{controls:!1},maxExpandedNumberOfRows:{controls:!1},minCollapsedNumberOfRows:{controls:!1},minExpandedNumberOfRows:{controls:!1},expanded:{control:!1}},component:CodeSnippet},Basic=(args=>({props:args,template:'\n <cds-code-snippet display="single">{{code}}</cds-code-snippet>\n '})).bind({});Basic.args={code:"import { UIShellModule } from 'carbon-components-angular'; // Single line of code"};const Inline=(args=>({props:args,template:'\n Here is some <cds-code-snippet display="inline" [theme]="theme">{{code}}</cds-code-snippet> for you.\n '})).bind({});Inline.args={code:"<inline code>"};const Multi=(args=>({props:args,template:'\n <cds-code-snippet display="multi">{{code}}</cds-code-snippet>\n '})).bind({});Multi.args={code:'{\n "name": "carbon-components-angular",\n "version": "0.0.0",\n "description": "Next generation components",\n "main": "index.js",\n "scripts": {\n "build": "bash scripts/build.sh",\n "storybook": "start-storybook -s .storybook/public -p 6006",\n "docs:build": "typedoc",\n "lint": "tslint \'src/**/*.ts\'",\n "lint:fix": "tslint --fix \'src/**/*.ts\'",\n "test": "ng test --no-watch",\n "test:watch": "ng test --watch",\n "build-storybook": "build-storybook -c .storybook -s .storybook/public -o dist/docs/storybook",\n "semantic-release": "semantic-release",\n "commit": "git-cz",\n "ng": "ng",\n "ng:build": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build"\n },\n "repository": {\n "type": "git",\n "url": "git@github.com:IBM/carbon-components-angular.git"\n },\n "license": "Apache-2.0",\n "author": "IBM",\n "peerDependencies": {\n "@angular/common": "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0",\n "@angular/core": "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0",\n "@angular/forms": "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0",\n "rxjs": "^6.0.0",\n "zone.js": "^0.8.26 || ^0.9.0 || ^0.10.0",\n "@carbon/styles": "^1.2.0"\n }\n }'},Multi.argTypes={maxCollapsedNumberOfRows:{controls:!0},maxExpandedNumberOfRows:{controls:!0},minCollapsedNumberOfRows:{controls:!0},minExpandedNumberOfRows:{controls:!0},expanded:{control:!0}};const Skeleton=(args=>({props:args,template:'\n <cds-code-snippet display="single" skeleton="true"></cds-code-snippet>\n <br>\n <cds-code-snippet display="multi" skeleton="true"></cds-code-snippet>\n '})).bind({});Basic.parameters={...Basic.parameters,docs:{...Basic.parameters?.docs,source:{originalSource:'args => ({\n props: args,\n template: `\n <cds-code-snippet display="single">{{code}}</cds-code-snippet>\n `\n})',...Basic.parameters?.docs?.source}}},Inline.parameters={...Inline.parameters,docs:{...Inline.parameters?.docs,source:{originalSource:'args => ({\n props: args,\n template: `\n Here is some <cds-code-snippet display="inline" [theme]="theme">{{code}}</cds-code-snippet> for you.\n `\n})',...Inline.parameters?.docs?.source}}},Multi.parameters={...Multi.parameters,docs:{...Multi.parameters?.docs,source:{originalSource:'args => ({\n props: args,\n template: `\n <cds-code-snippet display="multi">{{code}}</cds-code-snippet>\n `\n})',...Multi.parameters?.docs?.source}}},Skeleton.parameters={...Skeleton.parameters,docs:{...Skeleton.parameters?.docs,source:{originalSource:'args => ({\n props: args,\n template: `\n <cds-code-snippet display="single" skeleton="true"></cds-code-snippet>\n <br>\n <cds-code-snippet display="multi" skeleton="true"></cds-code-snippet>\n `\n})',...Skeleton.parameters?.docs?.source}}};const __namedExportsOrder=["Basic","Inline","Multi","Skeleton"]}}]);
|
|
1
|
+
"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[3858],{"./node_modules/@carbon/utils-position/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{var _a,PLACEMENTS;__webpack_require__.d(__webpack_exports__,{FK:()=>position,ZP:()=>__WEBPACK_DEFAULT_EXPORT__}),function(PLACEMENTS){PLACEMENTS.LEFT="left",PLACEMENTS.RIGHT="right",PLACEMENTS.TOP="top",PLACEMENTS.BOTTOM="bottom"}(PLACEMENTS||(PLACEMENTS={}));var defaultPositions=((_a={})[PLACEMENTS.LEFT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left-target.offsetWidth)}},_a[PLACEMENTS.RIGHT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left+referenceRect.width)}},_a[PLACEMENTS.TOP]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top-target.offsetHeight),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a[PLACEMENTS.BOTTOM]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top+referenceRect.height),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a),windowRef="undefined"!=typeof window?window:{innerHeight:0,scrollY:0,innerWidth:0,scrollX:0},Position=function(){function Position(positions){void 0===positions&&(positions={}),this.positions=defaultPositions,this.positions=Object.assign({},defaultPositions,positions)}return Position.prototype.getRelativeOffset=function(target){for(var offsets={left:target.offsetLeft,top:target.offsetTop};target.offsetParent&&"static"===getComputedStyle(target.offsetParent).position;)offsets.left+=target.offsetLeft,offsets.top+=target.offsetTop,target=target.offsetParent;return offsets},Position.prototype.getAbsoluteOffset=function(target){for(var currentNode=target,margins={top:0,left:0};currentNode.offsetParent;){var computed=getComputedStyle(currentNode.offsetParent);"static"===computed.position&&computed.marginLeft&&computed.marginTop&&(parseInt(computed.marginTop,10)&&(margins.top+=parseInt(computed.marginTop,10)),parseInt(computed.marginLeft,10)&&(margins.left+=parseInt(computed.marginLeft,10))),currentNode=currentNode.offsetParent}var targetRect=target.getBoundingClientRect(),relativeRect=document.body.getBoundingClientRect();return{top:targetRect.top-relativeRect.top+margins.top,left:targetRect.left-relativeRect.left+margins.left}},Position.prototype.findRelative=function(reference,target,placement){var referenceOffset=this.getRelativeOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findAbsolute=function(reference,target,placement){var referenceOffset=this.getAbsoluteOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPosition=function(reference,target,placement,offsetFunction){void 0===offsetFunction&&(offsetFunction=this.getAbsoluteOffset.bind(this));var referenceOffset=offsetFunction(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPositionAt=function(offset,target,placement){return this.calculatePosition(offset,{top:0,left:0,height:0,width:0},target,placement)},Position.prototype.getPlacementBox=function(target,position){var targetBottom=target.offsetHeight+position.top,targetRight=target.offsetWidth+position.left;return{top:position.top,bottom:targetBottom,left:position.left,right:targetRight}},Position.prototype.addOffset=function(position,top,left){return void 0===top&&(top=0),void 0===left&&(left=0),Object.assign({},position,{top:position.top+top,left:position.left+left})},Position.prototype.setElement=function(element,position){element.style.top=position.top+"px",element.style.left=position.left+"px"},Position.prototype.findBestPlacement=function(reference,target,placements,containerFunction,positionFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this)),void 0===positionFunction&&(positionFunction=this.findPosition.bind(this));var weightedPlacements=placements.map((function(placement){var pos=positionFunction(reference,target,placement),box=_this.getPlacementBox(target,pos),hiddenHeight=0,hiddenWidth=0,container=containerFunction();box.top<container.top?hiddenHeight=container.top-box.top:box.bottom>container.height&&(hiddenHeight=box.bottom-container.height),box.left<container.left?hiddenWidth=container.left-box.left:box.right>container.width&&(hiddenWidth=box.right-container.width),hiddenHeight&&!hiddenWidth?hiddenWidth=1:hiddenWidth&&!hiddenHeight&&(hiddenHeight=1);var area=target.offsetHeight*target.offsetWidth;return{placement,weight:(area-hiddenHeight*hiddenWidth)/area}}));return weightedPlacements.sort((function(a,b){return b.weight-a.weight})),weightedPlacements[0].placement},Position.prototype.findBestPlacementAt=function(offset,target,placements,containerFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this));return this.findBestPlacement(null,target,placements,containerFunction,(function(_,target,placement){return _this.findPositionAt(offset,target,placement)}))},Position.prototype.defaultContainerFunction=function(){return{top:0,left:0,height:windowRef.innerHeight,width:windowRef.innerWidth}},Position.prototype.calculatePosition=function(referenceOffset,referenceRect,target,placement){return this.positions[placement]?this.positions[placement](referenceOffset,target,referenceRect):(console.error("No function found for placement, defaulting to 0,0"),{left:0,top:0})},Position}(),position=new Position;const __WEBPACK_DEFAULT_EXPORT__=Position},"./src/button/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{HL:()=>BaseIconButton,zx:()=>Button,hJ:()=>ButtonModule,uV:()=>ButtonSet,hU:()=>IconButton});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let Button=class Button{constructor(){this.cdsButton="primary",this.skeleton=!1,this.iconOnly=!1,this.isExpressive=!1,this.baseClass=!0}set ibmButton(type){this.cdsButton=type}get primaryButton(){return"primary"===this.cdsButton||!this.cdsButton}get secondaryButton(){return"secondary"===this.cdsButton}get tertiaryButton(){return"tertiary"===this.cdsButton}get ghostButton(){return"ghost"===this.cdsButton}get dangerButton(){return"danger"===this.cdsButton||"danger--primary"===this.cdsButton}get dangerTertiary(){return"danger--tertiary"===this.cdsButton}get dangerGhost(){return"danger--ghost"===this.cdsButton}get smallSize(){return"sm"===this.size&&!this.isExpressive}get mediumSize(){return"md"===this.size&&!this.isExpressive}get largeSize(){return"lg"===this.size}get extraLargeSize(){return"xl"===this.size}get twoExtraLargeSize(){return"2xl"===this.size}get smallLayoutSize(){return"sm"===this.size&&!this.isExpressive}get mediumLayoutSize(){return"md"===this.size&&!this.isExpressive}get largeLayoutSize(){return"lg"===this.size}get extraLargeLayoutSize(){return"xl"===this.size}get twoExtraLargeLayoutSize(){return"2xl"===this.size}};Button.propDecorators={ibmButton:[{type:core.Input}],cdsButton:[{type:core.Input}],size:[{type:core.Input}],skeleton:[{type:core.HostBinding,args:["class.cds--skeleton"]},{type:core.Input}],iconOnly:[{type:core.HostBinding,args:["class.cds--btn--icon-only"]},{type:core.Input}],isExpressive:[{type:core.HostBinding,args:["class.cds--btn--expressive"]},{type:core.Input}],baseClass:[{type:core.HostBinding,args:["class.cds--btn"]}],primaryButton:[{type:core.HostBinding,args:["class.cds--btn--primary"]}],secondaryButton:[{type:core.HostBinding,args:["class.cds--btn--secondary"]}],tertiaryButton:[{type:core.HostBinding,args:["class.cds--btn--tertiary"]}],ghostButton:[{type:core.HostBinding,args:["class.cds--btn--ghost"]}],dangerButton:[{type:core.HostBinding,args:["class.cds--btn--danger"]}],dangerTertiary:[{type:core.HostBinding,args:["class.cds--btn--danger--tertiary"]}],dangerGhost:[{type:core.HostBinding,args:["class.cds--btn--danger--ghost"]}],smallSize:[{type:core.HostBinding,args:["class.cds--btn--sm"]}],mediumSize:[{type:core.HostBinding,args:["class.cds--btn--md"]}],largeSize:[{type:core.HostBinding,args:["class.cds--btn--lg"]}],extraLargeSize:[{type:core.HostBinding,args:["class.cds--btn--xl"]}],twoExtraLargeSize:[{type:core.HostBinding,args:["class.cds--btn--2xl"]}],smallLayoutSize:[{type:core.HostBinding,args:["class.cds--layout--size-sm"]}],mediumLayoutSize:[{type:core.HostBinding,args:["class.cds--layout--size-md"]}],largeLayoutSize:[{type:core.HostBinding,args:["class.cds--layout--size-lg"]}],extraLargeLayoutSize:[{type:core.HostBinding,args:["class.cds--layout--size-xl"]}],twoExtraLargeLayoutSize:[{type:core.HostBinding,args:["class.cds--layout--size-2xl"]}]},Button=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsButton], [ibmButton]"})],Button);let ButtonSet=class ButtonSet{constructor(){this.buttonSetClass=!0}};ButtonSet.propDecorators={buttonSetClass:[{type:core.HostBinding,args:["class.cds--btn-set"]}]},ButtonSet=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-button-set, ibm-button-set",template:"<ng-content></ng-content>"})],ButtonSet);let BaseIconButton=class BaseIconButton{constructor(){this.caret=!0,this.dropShadow=!0,this.highContrast=!0,this.isOpen=!1,this.align="bottom",this.autoAlign=!1,this.enterDelayMs=100,this.leaveDelayMs=300}};BaseIconButton.propDecorators={caret:[{type:core.Input}],dropShadow:[{type:core.Input}],highContrast:[{type:core.Input}],isOpen:[{type:core.Input}],align:[{type:core.Input}],autoAlign:[{type:core.Input}],enterDelayMs:[{type:core.Input}],leaveDelayMs:[{type:core.Input}]},BaseIconButton=(0,tslib_es6.gn)([(0,core.Component)({template:""})],BaseIconButton);let IconButton=class IconButton extends BaseIconButton{constructor(renderer){super(),this.renderer=renderer,this.buttonId="icon-btn-"+IconButton.iconButtonCounter++,this.kind="primary",this.size="lg",this.type="button",this.isExpressive=!1,this.disabled=!1,this.click=new core.EventEmitter,this.focus=new core.EventEmitter,this.blur=new core.EventEmitter,this.tooltipClick=new core.EventEmitter,this.classList={},this.attributeList={}}set buttonNgClass(obj){this.classList=Object.assign({"cds--btn--disabled":this.disabled},obj)}get buttonNgClass(){return this.classList}set buttonAttributes(obj){this.button&&(Object.keys(this.attributeList).forEach((key=>{this.renderer.removeAttribute(this.button.nativeElement,key)})),Object.keys(obj).forEach((key=>{this.renderer.setAttribute(this.button.nativeElement,key,obj[key])}))),this.attributeList=obj}get buttonAttributes(){return this.buttonAttributes}ngAfterViewInit(){this.buttonAttributes=this.attributeList}emitClickEvent(event,element="button"){event.preventDefault(),event.stopPropagation(),"tooltip"!==element?this.click.emit(event):this.tooltipClick.emit(event)}};IconButton.iconButtonCounter=0,IconButton.ctorParameters=()=>[{type:core.Renderer2}],IconButton.propDecorators={buttonNgClass:[{type:core.Input}],buttonAttributes:[{type:core.Input}],button:[{type:core.ViewChild,args:["button"]}],buttonId:[{type:core.Input}],kind:[{type:core.Input}],size:[{type:core.Input}],type:[{type:core.Input}],isExpressive:[{type:core.Input}],disabled:[{type:core.Input}],description:[{type:core.Input}],click:[{type:core.Output}],focus:[{type:core.Output}],blur:[{type:core.Output}],tooltipClick:[{type:core.Output}]},IconButton=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-icon-button, ibm-icon-button",template:'\n\t<cds-tooltip\n\t\tclass="cds--icon-tooltip"\n\t\t[description]="description"\n\t\t[disabled]="disabled"\n\t\t[caret]="caret"\n\t\t[dropShadow]="dropShadow"\n\t\t[highContrast]="highContrast"\n\t\t[isOpen]="isOpen"\n\t\t[align]="align"\n\t\t[autoAlign]="autoAlign"\n\t\t[enterDelayMs]="enterDelayMs"\n\t\t[leaveDelayMs]="leaveDelayMs"\n\t\t(click)="emitClickEvent($event, \'tooltip\')">\n\t\t<button\n\t\t\t#button\n\t\t\t[id]="buttonId"\n\t\t\t[disabled]="disabled"\n\t\t\t[attr.type]="type"\n\t\t\t[iconOnly]="true"\n\t\t\t[ngClass]="buttonNgClass"\n\t\t\t[cdsButton]="kind"\n\t\t\t[size]="size"\n\t\t\t[isExpressive]="isExpressive"\n\t\t\t(click)="emitClickEvent($event)"\n\t\t\t(focus)="focus.emit($event)"\n\t\t\t(blur)="blur.emit($event)">\n\t\t\t<ng-content></ng-content>\n\t\t</button>\n\t</cds-tooltip>\n\t'})],IconButton);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),tooltip=__webpack_require__("./src/tooltip/index.ts");let ButtonModule=class ButtonModule{};ButtonModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Button,ButtonSet,BaseIconButton,IconButton],exports:[Button,ButtonSet,IconButton],imports:[common.CommonModule,tooltip.z8]})],ButtonModule)},"./src/icon/icon.directive.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{a:()=>IconDirective});var tslib__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/tslib/tslib.es6.js"),_angular_core__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),_icon_service__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/icon/icon.service.ts"),_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@carbon/icon-helpers/es/index.js");let IconDirective=class IconDirective{constructor(elementRef,iconService){this.elementRef=elementRef,this.iconService=iconService,this.cdsIcon="",this.size="16",this.title="",this.ariaLabel="",this.ariaLabelledBy="",this.ariaHidden="",this.isFocusable=!1}set ibmIcon(iconName){this.cdsIcon=iconName}renderIcon(iconName){const root=this.elementRef.nativeElement;let icon;try{icon=this.iconService.get(iconName,this.size.toString())}catch(error){return void console.warn(error)}const domParser=new DOMParser,rawSVG=icon.svg,svgElement=domParser.parseFromString(rawSVG,"image/svg+xml").documentElement;let node="SVG"!==root.tagName.toUpperCase()?svgElement:svgElement.firstChild;for(root.innerHTML="";node;)root.appendChild(root.ownerDocument.importNode(node,!0)),node=node.nextSibling;const svg="SVG"!==root.tagName.toUpperCase()?svgElement:root;svg.setAttribute("xmlns","http://www.w3.org/2000/svg");const attributes=(0,_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_1__.u9)({width:icon.attrs.width,height:icon.attrs.height,viewBox:icon.attrs.viewBox,title:this.title,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledBy,"aria-hidden":this.ariaHidden,focusable:this.isFocusable.toString()}),attrKeys=Object.keys(attributes);for(let i=0;i<attrKeys.length;i++){const key=attrKeys[i],value=attributes[key];"title"!==key&&(value&&svg.setAttribute(key,value))}if(attributes.title){const title=document.createElement("title");title.textContent=attributes.title,IconDirective.titleIdCounter++,title.setAttribute("id",`${icon.name}-title-${IconDirective.titleIdCounter}`),svg.insertBefore(title,svg.firstElementChild),svg.setAttribute("aria-labelledby",`${icon.name}-title-${IconDirective.titleIdCounter}`)}}ngAfterViewInit(){this.renderIcon(this.cdsIcon)}ngOnChanges({cdsIcon}){cdsIcon&&!cdsIcon.isFirstChange()&&this.renderIcon(this.cdsIcon)}};IconDirective.titleIdCounter=0,IconDirective.ctorParameters=()=>[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.ElementRef},{type:_icon_service__WEBPACK_IMPORTED_MODULE_0__.C6}],IconDirective.propDecorators={ibmIcon:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],cdsIcon:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],size:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],title:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],ariaLabel:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],ariaLabelledBy:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],ariaHidden:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}],isFocusable:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_2__.Input}]},IconDirective=(0,tslib__WEBPACK_IMPORTED_MODULE_3__.gn)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_2__.Directive)({selector:"[cdsIcon], [ibmIcon]"})],IconDirective)},"./src/icon/icon.module.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{QX:()=>IconModule});var tslib__WEBPACK_IMPORTED_MODULE_54__=__webpack_require__("./node_modules/tslib/tslib.es6.js"),_angular_core__WEBPACK_IMPORTED_MODULE_53__=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),_angular_common__WEBPACK_IMPORTED_MODULE_55__=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),_icon_directive__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/icon/icon.directive.ts"),_icon_service__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/icon/icon.service.ts"),_carbon_icons_es_add_16__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@carbon/icons/es/add/16.js"),_carbon_icons_es_add_20__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@carbon/icons/es/add/20.js"),_carbon_icons_es_bee_16__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@carbon/icons/es/bee/16.js"),_carbon_icons_es_bee_20__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@carbon/icons/es/bee/20.js"),_carbon_icons_es_calendar_16__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@carbon/icons/es/calendar/16.js"),_carbon_icons_es_carbon_16__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@carbon/icons/es/carbon/16.js"),_carbon_icons_es_carbon_20__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/@carbon/icons/es/carbon/20.js"),_carbon_icons_es_caret_down_16__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./node_modules/@carbon/icons/es/caret--down/16.js"),_carbon_icons_es_caret_left_16__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./node_modules/@carbon/icons/es/caret--left/16.js"),_carbon_icons_es_caret_right_16__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__("./node_modules/@carbon/icons/es/caret--right/16.js"),_carbon_icons_es_caret_up_16__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("./node_modules/@carbon/icons/es/caret--up/16.js"),_carbon_icons_es_checkmark_16__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark/16.js"),_carbon_icons_es_checkmark_filled_16__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark--filled/16.js"),_carbon_icons_es_checkmark_filled_20__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark--filled/20.js"),_carbon_icons_es_checkmark_outline_16__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__("./node_modules/@carbon/icons/es/checkmark--outline/16.js"),_carbon_icons_es_chevron_down_16__WEBPACK_IMPORTED_MODULE_17__=__webpack_require__("./node_modules/@carbon/icons/es/chevron--down/16.js"),_carbon_icons_es_chevron_right_16__WEBPACK_IMPORTED_MODULE_18__=__webpack_require__("./node_modules/@carbon/icons/es/chevron--right/16.js"),_carbon_icons_es_circle_dash_16__WEBPACK_IMPORTED_MODULE_19__=__webpack_require__("./node_modules/@carbon/icons/es/circle-dash/16.js"),_carbon_icons_es_close_16__WEBPACK_IMPORTED_MODULE_20__=__webpack_require__("./node_modules/@carbon/icons/es/close/16.js"),_carbon_icons_es_close_20__WEBPACK_IMPORTED_MODULE_21__=__webpack_require__("./node_modules/@carbon/icons/es/close/20.js"),_carbon_icons_es_copy_16__WEBPACK_IMPORTED_MODULE_22__=__webpack_require__("./node_modules/@carbon/icons/es/copy/16.js"),_carbon_icons_es_copy_20__WEBPACK_IMPORTED_MODULE_23__=__webpack_require__("./node_modules/@carbon/icons/es/copy/20.js"),_carbon_icons_es_data_2_16__WEBPACK_IMPORTED_MODULE_24__=__webpack_require__("./node_modules/@carbon/icons/es/data--2/16.js"),_carbon_icons_es_data_2_20__WEBPACK_IMPORTED_MODULE_25__=__webpack_require__("./node_modules/@carbon/icons/es/data--2/20.js"),_carbon_icons_es_document_16__WEBPACK_IMPORTED_MODULE_26__=__webpack_require__("./node_modules/@carbon/icons/es/document/16.js"),_carbon_icons_es_document_20__WEBPACK_IMPORTED_MODULE_27__=__webpack_require__("./node_modules/@carbon/icons/es/document/20.js"),_carbon_icons_es_download_16__WEBPACK_IMPORTED_MODULE_28__=__webpack_require__("./node_modules/@carbon/icons/es/download/16.js"),_carbon_icons_es_error_filled_16__WEBPACK_IMPORTED_MODULE_29__=__webpack_require__("./node_modules/@carbon/icons/es/error--filled/16.js"),_carbon_icons_es_error_filled_20__WEBPACK_IMPORTED_MODULE_30__=__webpack_require__("./node_modules/@carbon/icons/es/error--filled/20.js"),_carbon_icons_es_fade_16__WEBPACK_IMPORTED_MODULE_31__=__webpack_require__("./node_modules/@carbon/icons/es/fade/16.js"),_carbon_icons_es_fade_20__WEBPACK_IMPORTED_MODULE_32__=__webpack_require__("./node_modules/@carbon/icons/es/fade/20.js"),_carbon_icons_es_folder_16__WEBPACK_IMPORTED_MODULE_33__=__webpack_require__("./node_modules/@carbon/icons/es/folder/16.js"),_carbon_icons_es_incomplete_16__WEBPACK_IMPORTED_MODULE_34__=__webpack_require__("./node_modules/@carbon/icons/es/incomplete/16.js"),_carbon_icons_es_information_filled_16__WEBPACK_IMPORTED_MODULE_35__=__webpack_require__("./node_modules/@carbon/icons/es/information--filled/16.js"),_carbon_icons_es_information_filled_20__WEBPACK_IMPORTED_MODULE_36__=__webpack_require__("./node_modules/@carbon/icons/es/information--filled/20.js"),_carbon_icons_es_information_square_filled_20__WEBPACK_IMPORTED_MODULE_37__=__webpack_require__("./node_modules/@carbon/icons/es/information--square--filled/20.js"),_carbon_icons_es_menu_16__WEBPACK_IMPORTED_MODULE_38__=__webpack_require__("./node_modules/@carbon/icons/es/menu/16.js"),_carbon_icons_es_menu_20__WEBPACK_IMPORTED_MODULE_39__=__webpack_require__("./node_modules/@carbon/icons/es/menu/20.js"),_carbon_icons_es_overflow_menu_vertical_16__WEBPACK_IMPORTED_MODULE_40__=__webpack_require__("./node_modules/@carbon/icons/es/overflow-menu--vertical/16.js"),_carbon_icons_es_overflow_menu_horizontal_16__WEBPACK_IMPORTED_MODULE_41__=__webpack_require__("./node_modules/@carbon/icons/es/overflow-menu--horizontal/16.js"),_carbon_icons_es_save_16__WEBPACK_IMPORTED_MODULE_42__=__webpack_require__("./node_modules/@carbon/icons/es/save/16.js"),_carbon_icons_es_search_16__WEBPACK_IMPORTED_MODULE_43__=__webpack_require__("./node_modules/@carbon/icons/es/search/16.js"),_carbon_icons_es_settings_16__WEBPACK_IMPORTED_MODULE_44__=__webpack_require__("./node_modules/@carbon/icons/es/settings/16.js"),_carbon_icons_es_settings_adjust_16__WEBPACK_IMPORTED_MODULE_45__=__webpack_require__("./node_modules/@carbon/icons/es/settings--adjust/16.js"),_carbon_icons_es_subtract_16__WEBPACK_IMPORTED_MODULE_46__=__webpack_require__("./node_modules/@carbon/icons/es/subtract/16.js"),_carbon_icons_es_trash_can_16__WEBPACK_IMPORTED_MODULE_47__=__webpack_require__("./node_modules/@carbon/icons/es/trash-can/16.js"),_carbon_icons_es_warning_16__WEBPACK_IMPORTED_MODULE_48__=__webpack_require__("./node_modules/@carbon/icons/es/warning/16.js"),_carbon_icons_es_warning_filled_16__WEBPACK_IMPORTED_MODULE_49__=__webpack_require__("./node_modules/@carbon/icons/es/warning--filled/16.js"),_carbon_icons_es_warning_filled_20__WEBPACK_IMPORTED_MODULE_50__=__webpack_require__("./node_modules/@carbon/icons/es/warning--filled/20.js"),_carbon_icons_es_warning_alt_filled_16__WEBPACK_IMPORTED_MODULE_51__=__webpack_require__("./node_modules/@carbon/icons/es/warning--alt--filled/16.js"),_carbon_icons_es_warning_alt_filled_20__WEBPACK_IMPORTED_MODULE_52__=__webpack_require__("./node_modules/@carbon/icons/es/warning--alt--filled/20.js");const ICON_SERVICE_PROVIDER={provide:_icon_service__WEBPACK_IMPORTED_MODULE_1__.C6,deps:[[new _angular_core__WEBPACK_IMPORTED_MODULE_53__.Optional,new _angular_core__WEBPACK_IMPORTED_MODULE_53__.SkipSelf,_icon_service__WEBPACK_IMPORTED_MODULE_1__.C6]],useFactory:function ICON_SERVICE_PROVIDER_FACTORY(parentService){return parentService||new _icon_service__WEBPACK_IMPORTED_MODULE_1__.C6}};let IconModule=class IconModule{constructor(iconService){this.iconService=iconService,iconService.registerAll([_carbon_icons_es_add_16__WEBPACK_IMPORTED_MODULE_2__.Z,_carbon_icons_es_add_20__WEBPACK_IMPORTED_MODULE_3__.Z,_carbon_icons_es_bee_16__WEBPACK_IMPORTED_MODULE_4__.Z,_carbon_icons_es_bee_20__WEBPACK_IMPORTED_MODULE_5__.Z,_carbon_icons_es_calendar_16__WEBPACK_IMPORTED_MODULE_6__.Z,_carbon_icons_es_carbon_16__WEBPACK_IMPORTED_MODULE_7__.Z,_carbon_icons_es_carbon_20__WEBPACK_IMPORTED_MODULE_8__.Z,_carbon_icons_es_caret_down_16__WEBPACK_IMPORTED_MODULE_9__.Z,_carbon_icons_es_caret_left_16__WEBPACK_IMPORTED_MODULE_10__.Z,_carbon_icons_es_caret_right_16__WEBPACK_IMPORTED_MODULE_11__.Z,_carbon_icons_es_caret_up_16__WEBPACK_IMPORTED_MODULE_12__.Z,_carbon_icons_es_checkmark_16__WEBPACK_IMPORTED_MODULE_13__.Z,_carbon_icons_es_checkmark_filled_16__WEBPACK_IMPORTED_MODULE_14__.Z,_carbon_icons_es_checkmark_filled_20__WEBPACK_IMPORTED_MODULE_15__.Z,_carbon_icons_es_checkmark_outline_16__WEBPACK_IMPORTED_MODULE_16__.Z,_carbon_icons_es_chevron_down_16__WEBPACK_IMPORTED_MODULE_17__.Z,_carbon_icons_es_chevron_right_16__WEBPACK_IMPORTED_MODULE_18__.Z,_carbon_icons_es_circle_dash_16__WEBPACK_IMPORTED_MODULE_19__.Z,_carbon_icons_es_close_16__WEBPACK_IMPORTED_MODULE_20__.Z,_carbon_icons_es_close_20__WEBPACK_IMPORTED_MODULE_21__.Z,_carbon_icons_es_copy_16__WEBPACK_IMPORTED_MODULE_22__.Z,_carbon_icons_es_copy_20__WEBPACK_IMPORTED_MODULE_23__.Z,_carbon_icons_es_data_2_16__WEBPACK_IMPORTED_MODULE_24__.Z,_carbon_icons_es_data_2_20__WEBPACK_IMPORTED_MODULE_25__.Z,_carbon_icons_es_document_16__WEBPACK_IMPORTED_MODULE_26__.Z,_carbon_icons_es_document_20__WEBPACK_IMPORTED_MODULE_27__.Z,_carbon_icons_es_download_16__WEBPACK_IMPORTED_MODULE_28__.Z,_carbon_icons_es_error_filled_16__WEBPACK_IMPORTED_MODULE_29__.Z,_carbon_icons_es_error_filled_20__WEBPACK_IMPORTED_MODULE_30__.Z,_carbon_icons_es_fade_16__WEBPACK_IMPORTED_MODULE_31__.Z,_carbon_icons_es_fade_20__WEBPACK_IMPORTED_MODULE_32__.Z,_carbon_icons_es_folder_16__WEBPACK_IMPORTED_MODULE_33__.Z,_carbon_icons_es_incomplete_16__WEBPACK_IMPORTED_MODULE_34__.Z,_carbon_icons_es_information_filled_16__WEBPACK_IMPORTED_MODULE_35__.Z,_carbon_icons_es_information_filled_20__WEBPACK_IMPORTED_MODULE_36__.Z,_carbon_icons_es_information_square_filled_20__WEBPACK_IMPORTED_MODULE_37__.Z,_carbon_icons_es_menu_16__WEBPACK_IMPORTED_MODULE_38__.Z,_carbon_icons_es_menu_20__WEBPACK_IMPORTED_MODULE_39__.Z,_carbon_icons_es_overflow_menu_vertical_16__WEBPACK_IMPORTED_MODULE_40__.Z,_carbon_icons_es_overflow_menu_horizontal_16__WEBPACK_IMPORTED_MODULE_41__.Z,_carbon_icons_es_save_16__WEBPACK_IMPORTED_MODULE_42__.Z,_carbon_icons_es_search_16__WEBPACK_IMPORTED_MODULE_43__.Z,_carbon_icons_es_settings_16__WEBPACK_IMPORTED_MODULE_44__.Z,_carbon_icons_es_settings_adjust_16__WEBPACK_IMPORTED_MODULE_45__.Z,_carbon_icons_es_subtract_16__WEBPACK_IMPORTED_MODULE_46__.Z,_carbon_icons_es_trash_can_16__WEBPACK_IMPORTED_MODULE_47__.Z,_carbon_icons_es_warning_16__WEBPACK_IMPORTED_MODULE_48__.Z,_carbon_icons_es_warning_filled_16__WEBPACK_IMPORTED_MODULE_49__.Z,_carbon_icons_es_warning_filled_20__WEBPACK_IMPORTED_MODULE_50__.Z,_carbon_icons_es_warning_alt_filled_16__WEBPACK_IMPORTED_MODULE_51__.Z,_carbon_icons_es_warning_alt_filled_20__WEBPACK_IMPORTED_MODULE_52__.Z])}};IconModule.ctorParameters=()=>[{type:_icon_service__WEBPACK_IMPORTED_MODULE_1__.C6}],IconModule=(0,tslib__WEBPACK_IMPORTED_MODULE_54__.gn)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_53__.NgModule)({declarations:[_icon_directive__WEBPACK_IMPORTED_MODULE_0__.a],exports:[_icon_directive__WEBPACK_IMPORTED_MODULE_0__.a],imports:[_angular_common__WEBPACK_IMPORTED_MODULE_55__.CommonModule],providers:[ICON_SERVICE_PROVIDER]})],IconModule)},"./src/icon/icon.service.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{C6:()=>IconService});var tslib__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/tslib/tslib.es6.js"),_angular_core__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@carbon/icon-helpers/es/index.js");class IconNameNotFoundError extends Error{constructor(name){super(`Icon ${name} not found`)}}class IconSizeNotFoundError extends Error{constructor(size,name){super("Size ${size} for ${name} not found")}}class IconMemoryCache extends class IconCache{}{constructor(){super(...arguments),this.iconMap=new Map}get(name,size){if(!this.iconMap.has(name))throw new IconNameNotFoundError(name);const sizeMap=this.iconMap.get(name);if(!sizeMap.has(size))throw new IconSizeNotFoundError(size,name);return sizeMap.get(size)}set(name,size,descriptor){this.iconMap.has(name)||this.iconMap.set(name,new Map);this.iconMap.get(name).set(size,descriptor)}}let IconService=class IconService{constructor(){this.iconCache=new IconMemoryCache}registerAll(descriptors){descriptors.forEach((icon=>this.register(icon)))}register(descriptor){const{name}=descriptor;this.registerAs(name,descriptor)}registerAs(name,descriptor){const{size}=descriptor;this.iconCache.set(name,size.toString(),descriptor)}get(name,size){try{const icon=this.iconCache.get(name,size.toString());return icon.svg||(icon.svg=(0,_carbon_icon_helpers__WEBPACK_IMPORTED_MODULE_0__.BB)(icon)),icon}catch(e){throw e}}configure(options){this.iconCache=options.cache}};IconService=(0,tslib__WEBPACK_IMPORTED_MODULE_1__.gn)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_2__.Injectable)()],IconService)},"./src/icon/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{ar:()=>icon_directive.a,QX:()=>icon_module.QX,C6:()=>icon_service.C6});var icon_directive=__webpack_require__("./src/icon/icon.directive.ts"),icon_module=__webpack_require__("./src/icon/icon.module.ts"),icon_service=__webpack_require__("./src/icon/icon.service.ts")},"./src/code-snippet/code-snippet.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,Inline:()=>Inline,Multi:()=>Multi,Skeleton:()=>Skeleton,__namedExportsOrder:()=>__namedExportsOrder,default:()=>code_snippet_stories});var SnippetType,dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),i18n=__webpack_require__("./src/i18n/index.ts"),utils=__webpack_require__("./src/utils/index.ts"),src_button=__webpack_require__("./src/button/index.ts");!function(SnippetType){SnippetType.single="single",SnippetType.multi="multi",SnippetType.inline="inline"}(SnippetType||(SnippetType={}));let CodeSnippet=class CodeSnippet extends src_button.HL{constructor(i18n,eventService){super(),this.i18n=i18n,this.eventService=eventService,this.rowHeightInPixel=16,this.display=SnippetType.single,this.translations=this.i18n.get().CODE_SNIPPET,this.hideCopyButton=!1,this.disabled=!1,this.maxCollapsedNumberOfRows=15,this.minCollapsedNumberOfRows=3,this.maxExpandedNumberOfRows=0,this.minExpandedNumberOfRows=16,this.wrapText=!1,this.theme="dark",this.feedbackText=this.translations.COPIED,this.feedbackTimeout=2e3,this.expanded=!1,this.skeleton=!1,this.styles={},this.showFeedback=!1,this.animating=!1,this.hasExpandButton=null,this.isExpandable=!1,this.hasRightOverflow=!1,this.hasRight=!1,this.hasLeft=!1,this.dropShadow=!1}get snippetClass(){return this.display!==SnippetType.inline}get snippetSingleClass(){return this.display===SnippetType.single}get snippetMultiClass(){return this.display===SnippetType.multi}get snippetDisabledClass(){return"inline"!==this.display&&this.disabled}get snippetInlineLightClass(){return"light"===this.theme}handleScroll(){if(this.skeleton)return;let ref;switch(this.display){case"multi":ref=this.codeContent.nativeElement;break;case"single":ref=this.codeContainer.nativeElement;break;default:return}if(ref){const{scrollWidth,clientWidth,scrollLeft}=ref,horizontalOverflow=scrollWidth>clientWidth;this.hasLeft=horizontalOverflow&&!!scrollLeft,this.hasRight=horizontalOverflow&&scrollLeft+clientWidth!==scrollWidth}}toggleSnippetExpansion(){this.expanded=!this.expanded,this.calculateContainerHeight()}onCopyButtonClicked(){this.disabled||window.navigator.clipboard.writeText(this.code.nativeElement.innerText||this.code.nativeElement.textContent).then((()=>{this.showFeedback=!0,this.animating=!0,setTimeout((()=>{this.showFeedback=!1,this.animating=!1}),this.feedbackTimeout)}))}ngOnInit(){this.calculateContainerHeight()}ngAfterViewInit(){this.canExpand(),this.handleScroll(),window&&this.eventService.on(window,"resize",(()=>{this.canExpand(),this.handleScroll()}))}calculateContainerHeight(){"multi"!==this.display||this.skeleton||(this.styles={},this.expanded?(this.maxExpandedNumberOfRows>0&&(this.styles["max-height"]=this.maxExpandedNumberOfRows*this.rowHeightInPixel+"px"),this.minExpandedNumberOfRows>0&&(this.styles["min-height"]=this.minExpandedNumberOfRows*this.rowHeightInPixel+"px")):(this.maxCollapsedNumberOfRows>0&&(this.styles["max-height"]=this.maxCollapsedNumberOfRows*this.rowHeightInPixel+"px"),this.minCollapsedNumberOfRows>0&&(this.styles["min-height"]=this.minCollapsedNumberOfRows*this.rowHeightInPixel+"px")))}canExpand(){if("multi"===this.display&&!this.skeleton){const height=this.codeContent.nativeElement.getBoundingClientRect().height;this.maxCollapsedNumberOfRows>0&&(this.maxExpandedNumberOfRows<=0||this.maxExpandedNumberOfRows>this.maxCollapsedNumberOfRows)&&height>this.maxCollapsedNumberOfRows*this.rowHeightInPixel?this.isExpandable=!0:this.isExpandable=!1,this.expanded&&this.minExpandedNumberOfRows>0&&height<=this.minExpandedNumberOfRows*this.rowHeightInPixel&&(this.isExpandable=!1)}}};CodeSnippet.ctorParameters=()=>[{type:i18n.oc},{type:utils.PO}],CodeSnippet.propDecorators={snippetClass:[{type:core.HostBinding,args:["class.cds--snippet"]}],snippetSingleClass:[{type:core.HostBinding,args:["class.cds--snippet--single"]}],snippetMultiClass:[{type:core.HostBinding,args:["class.cds--snippet--multi"]}],snippetDisabledClass:[{type:core.HostBinding,args:["class.cds--snippet--disabled"]}],snippetInlineLightClass:[{type:core.HostBinding,args:["class.cds--snippet--light"]}],display:[{type:core.Input}],translations:[{type:core.Input}],copyButtonDescription:[{type:core.Input}],hideCopyButton:[{type:core.Input}],disabled:[{type:core.Input}],maxCollapsedNumberOfRows:[{type:core.Input}],minCollapsedNumberOfRows:[{type:core.Input}],maxExpandedNumberOfRows:[{type:core.Input}],minExpandedNumberOfRows:[{type:core.Input}],wrapText:[{type:core.HostBinding,args:["class.cds--snippet--wraptext"]},{type:core.Input}],theme:[{type:core.Input}],feedbackText:[{type:core.Input}],feedbackTimeout:[{type:core.Input}],expanded:[{type:core.HostBinding,args:["class.cds--snippet--expand"]},{type:core.Input}],skeleton:[{type:core.HostBinding,args:["class.cds--skeleton"]},{type:core.Input}],code:[{type:core.ViewChild,args:["code"]}],codeContent:[{type:core.ViewChild,args:["codeContent"]}],codeContainer:[{type:core.ViewChild,args:["codeContainer"]}]},CodeSnippet=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-code-snippet, ibm-code-snippet",template:'\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'})],CodeSnippet);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts");let CodeSnippetModule=class CodeSnippetModule{};CodeSnippetModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[CodeSnippet],exports:[CodeSnippet],imports:[common.CommonModule,src_button.hJ,i18n.LU,utils.As,icon.QX]})],CodeSnippetModule);const code_snippet_stories={title:"Components/Code Snippet",decorators:[(0,dist.moduleMetadata)({imports:[CodeSnippetModule]})],argTypes:{snippet:{control:!1},display:{control:!1},feedbackText:{control:!1},maxCollapsedNumberOfRows:{controls:!1},maxExpandedNumberOfRows:{controls:!1},minCollapsedNumberOfRows:{controls:!1},minExpandedNumberOfRows:{controls:!1},expanded:{control:!1}},component:CodeSnippet},Basic=(args=>({props:args,template:'\n <cds-code-snippet display="single">{{snippet}}</cds-code-snippet>\n '})).bind({});Basic.args={snippet:"import { UIShellModule } from 'carbon-components-angular'; // Single line of code"};const Inline=(args=>({props:args,template:'\n Here is some <cds-code-snippet display="inline" [theme]="theme">{{snippet}}</cds-code-snippet> for you.\n '})).bind({});Inline.args={snippet:"<inline code>"};const Multi=(args=>({props:args,template:'\n <cds-code-snippet display="multi">{{snippet}}</cds-code-snippet>\n '})).bind({});Multi.args={snippet:'{\n "name": "carbon-components-angular",\n "version": "0.0.0",\n "description": "Next generation components",\n "main": "index.js",\n "scripts": {\n "build": "bash scripts/build.sh",\n "storybook": "start-storybook -s .storybook/public -p 6006",\n "docs:build": "typedoc",\n "lint": "tslint \'src/**/*.ts\'",\n "lint:fix": "tslint --fix \'src/**/*.ts\'",\n "test": "ng test --no-watch",\n "test:watch": "ng test --watch",\n "build-storybook": "build-storybook -c .storybook -s .storybook/public -o dist/docs/storybook",\n "semantic-release": "semantic-release",\n "commit": "git-cz",\n "ng": "ng",\n "ng:build": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build"\n },\n "repository": {\n "type": "git",\n "url": "git@github.com:IBM/carbon-components-angular.git"\n },\n "license": "Apache-2.0",\n "author": "IBM",\n "peerDependencies": {\n "@angular/common": "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0",\n "@angular/core": "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0",\n "@angular/forms": "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0",\n "rxjs": "^6.0.0",\n "zone.js": "^0.8.26 || ^0.9.0 || ^0.10.0",\n "@carbon/styles": "^1.2.0"\n }\n }'},Multi.argTypes={maxCollapsedNumberOfRows:{controls:!0},maxExpandedNumberOfRows:{controls:!0},minCollapsedNumberOfRows:{controls:!0},minExpandedNumberOfRows:{controls:!0},expanded:{control:!0}};const Skeleton=(args=>({props:args,template:'\n <cds-code-snippet display="single" skeleton="true"></cds-code-snippet>\n <br>\n <cds-code-snippet display="multi" skeleton="true"></cds-code-snippet>\n '})).bind({});Basic.parameters={...Basic.parameters,docs:{...Basic.parameters?.docs,source:{originalSource:'args => ({\n props: args,\n template: `\n <cds-code-snippet display="single">{{snippet}}</cds-code-snippet>\n `\n})',...Basic.parameters?.docs?.source}}},Inline.parameters={...Inline.parameters,docs:{...Inline.parameters?.docs,source:{originalSource:'args => ({\n props: args,\n template: `\n Here is some <cds-code-snippet display="inline" [theme]="theme">{{snippet}}</cds-code-snippet> for you.\n `\n})',...Inline.parameters?.docs?.source}}},Multi.parameters={...Multi.parameters,docs:{...Multi.parameters?.docs,source:{originalSource:'args => ({\n props: args,\n template: `\n <cds-code-snippet display="multi">{{snippet}}</cds-code-snippet>\n `\n})',...Multi.parameters?.docs?.source}}},Skeleton.parameters={...Skeleton.parameters,docs:{...Skeleton.parameters?.docs,source:{originalSource:'args => ({\n props: args,\n template: `\n <cds-code-snippet display="single" skeleton="true"></cds-code-snippet>\n <br>\n <cds-code-snippet display="multi" skeleton="true"></cds-code-snippet>\n `\n})',...Skeleton.parameters?.docs?.source}}};const __namedExportsOrder=["Basic","Inline","Multi","Skeleton"]}}]);
|
|
@@ -348,8 +348,8 @@
|
|
|
348
348
|
window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":true};</script><script type="module">import './sb-preview/runtime.js';
|
|
349
349
|
|
|
350
350
|
|
|
351
|
-
import './runtime~main.
|
|
351
|
+
import './runtime~main.a0e00005.iframe.bundle.js';
|
|
352
352
|
|
|
353
353
|
import './959.4248791c.iframe.bundle.js';
|
|
354
354
|
|
|
355
|
-
import './main.
|
|
355
|
+
import './main.9d6fe5aa.iframe.bundle.js';</script></body></html>
|