carbon-components-angular 5.57.0 → 5.57.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/Toggletip.html +3 -3
- 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/DatePickerInputModule/dependencies.svg +41 -37
- package/docs/documentation/modules/DatePickerInputModule.html +41 -37
- package/docs/documentation/modules/DialogModule/dependencies.svg +34 -34
- package/docs/documentation/modules/DialogModule.html +34 -34
- package/docs/documentation/modules/FileUploaderModule/dependencies.svg +36 -36
- package/docs/documentation/modules/FileUploaderModule.html +36 -36
- package/docs/documentation/modules/NumberModule/dependencies.svg +4 -4
- package/docs/documentation/modules/NumberModule.html +4 -4
- package/docs/documentation/modules/RadioModule/dependencies.svg +48 -48
- package/docs/documentation/modules/RadioModule.html +48 -48
- package/docs/documentation/modules/SelectModule/dependencies.svg +43 -43
- package/docs/documentation/modules/SelectModule.html +43 -43
- package/docs/documentation/modules/SliderModule/dependencies.svg +4 -4
- package/docs/documentation/modules/SliderModule.html +4 -4
- package/docs/documentation/modules/TabsModule/dependencies.svg +69 -69
- package/docs/documentation/modules/TabsModule.html +69 -69
- package/docs/documentation/modules/TagModule/dependencies.svg +39 -39
- package/docs/documentation/modules/TagModule.html +39 -39
- package/docs/documentation/modules/ThemeModule/dependencies.svg +14 -14
- package/docs/documentation/modules/ThemeModule.html +14 -14
- package/docs/documentation/modules/TilesModule/dependencies.svg +93 -93
- package/docs/documentation/modules/TilesModule.html +93 -93
- package/docs/documentation/modules/TimePickerModule/dependencies.svg +20 -20
- package/docs/documentation/modules/TimePickerModule.html +20 -20
- package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +30 -30
- package/docs/documentation/modules/TimePickerSelectModule.html +30 -30
- package/docs/documentation/modules/ToggleModule/dependencies.svg +38 -42
- package/docs/documentation/modules/ToggleModule.html +38 -42
- package/docs/documentation/modules/TooltipModule/dependencies.svg +28 -28
- package/docs/documentation/modules/TooltipModule.html +28 -28
- package/docs/documentation/modules/TreeviewModule/dependencies.svg +34 -34
- package/docs/documentation/modules/TreeviewModule.html +34 -34
- package/docs/documentation/modules/UIShellModule/dependencies.svg +4 -4
- package/docs/documentation/modules/UIShellModule.html +4 -4
- package/docs/documentation.json +116 -116
- package/docs/storybook/iframe.html +2 -2
- package/docs/storybook/{main.625b3296.iframe.bundle.js → main.d513967b.iframe.bundle.js} +1 -1
- package/docs/storybook/project.json +1 -1
- package/docs/storybook/{runtime~main.61967556.iframe.bundle.js → runtime~main.6e5bcadd.iframe.bundle.js} +1 -1
- package/docs/storybook/{toggletip-toggletip-stories.f20fbe75.iframe.bundle.js → toggletip-toggletip-stories.44da6843.iframe.bundle.js} +1 -1
- package/esm2020/toggletip/toggletip.component.mjs +3 -3
- package/fesm2015/carbon-components-angular-toggletip.mjs +2 -2
- package/fesm2015/carbon-components-angular-toggletip.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-toggletip.mjs +2 -2
- package/fesm2020/carbon-components-angular-toggletip.mjs.map +1 -1
- package/package.json +1 -1
package/docs/documentation.json
CHANGED
|
@@ -67518,7 +67518,7 @@
|
|
|
67518
67518
|
},
|
|
67519
67519
|
{
|
|
67520
67520
|
"name": "Toggletip",
|
|
67521
|
-
"id": "component-Toggletip-
|
|
67521
|
+
"id": "component-Toggletip-18ae0a3f5ad133c76eef9acc82a6de7e9b0043325567115188a487cdd69ca54e13ee980b47b6c24e65a836dd57a3cb64f390ac2be8a38b46e871518b9ab1ac08",
|
|
67522
67522
|
"file": "src/toggletip/toggletip.component.ts",
|
|
67523
67523
|
"changeDetection": "ChangeDetectionStrategy.OnPush",
|
|
67524
67524
|
"encapsulation": [],
|
|
@@ -67529,7 +67529,7 @@
|
|
|
67529
67529
|
"selector": "cds-toggletip, ibm-toggletip",
|
|
67530
67530
|
"styleUrls": [],
|
|
67531
67531
|
"styles": [],
|
|
67532
|
-
"template": "<ng-content select=\"[cdsToggletipButton]\"></ng-content>\n<cds-popover-content>\n\t<ng-content select=\"[cdsToggletipContent]\"></ng-content>\n</cds-popover-content>\n\t",
|
|
67532
|
+
"template": "<ng-content select=\"[cdsToggletipButton]\"></ng-content>\n<cds-popover-content [attr.id]=\"id\" aria-live=\"polite\">\n\t<ng-content select=\"[cdsToggletipContent]\"></ng-content>\n</cds-popover-content>\n\t",
|
|
67533
67533
|
"templateUrl": [],
|
|
67534
67534
|
"viewProviders": [],
|
|
67535
67535
|
"hostDirectives": [],
|
|
@@ -68114,7 +68114,7 @@
|
|
|
68114
68114
|
"description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { ToggletipModule } from 'carbon-components-angular';</code></pre></div><p><a href=\"../../?path=/story/components-toggletip--basic\">See demo</a></p>\n",
|
|
68115
68115
|
"rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { ToggletipModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-toggletip--basic)\n",
|
|
68116
68116
|
"type": "component",
|
|
68117
|
-
"sourceCode": "import {\n\tAfterViewInit,\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tContentChild,\n\tElementRef,\n\tHostBinding,\n\tHostListener,\n\tInput,\n\tNgZone,\n\tOnDestroy,\n\tRenderer2\n} from \"@angular/core\";\nimport { fromEvent, Subscription } from \"rxjs\";\nimport { PopoverContainer } from \"carbon-components-angular/popover\";\nimport { ToggletipButton } from \"./toggletip-button.directive\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ToggletipModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-toggletip--basic)\n */\n@Component({\n\tselector: \"cds-toggletip, ibm-toggletip\",\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\ttemplate: `\n\t\t<ng-content select=\"[cdsToggletipButton]\"></ng-content>\n\t\t<cds-popover-content>\n\t\t\t<ng-content select=\"[cdsToggletipContent]\"></ng-content>\n\t\t</cds-popover-content>\n\t`\n})\nexport class Toggletip extends PopoverContainer implements AfterViewInit, OnDestroy {\n\tstatic toggletipCounter = 0;\n\n\t@Input() id = `tooltip-${Toggletip.toggletipCounter++}`;\n\n\t@HostBinding(\"class.cds--toggletip\") toggletipClass = true;\n\t@HostBinding(\"class.cds--toggletip--open\") @Input() isOpen = false;\n\n\t@ContentChild(ToggletipButton, { read: ElementRef }) btn!: ElementRef;\n\n\tdocumentClick = this.handleFocusOut.bind(this);\n\tprivate subscription: Subscription;\n\n\tconstructor(\n\t\tprotected hostElement: ElementRef,\n\t\tprotected ngZone: NgZone,\n\t\tprotected renderer: Renderer2,\n\t\tprotected changeDetectorRef: ChangeDetectorRef\n\t) {\n\t\tsuper(hostElement, ngZone, renderer, changeDetectorRef);\n\t\tthis.highContrast = true;\n\t\tthis.dropShadow = false;\n\t}\n\n\tngAfterViewInit(): void {\n\t\tthis.initializeReferences();\n\n\t\t// Listen for click events on trigger\n\t\tthis.subscription = fromEvent(this.btn.nativeElement, \"click\")\n\t\t\t.subscribe((event: Event) => {\n\t\t\t\t// Add/Remove event listener based on isOpen to improve performance when there\n\t\t\t\t// are a lot of toggletips\n\t\t\t\tif (this.isOpen) {\n\t\t\t\t\tdocument.removeEventListener(\"click\", this.documentClick);\n\t\t\t\t} else {\n\t\t\t\t\tdocument.addEventListener(\"click\", this.documentClick);\n\t\t\t\t}\n\n\t\t\t\tthis.handleExpansion(!this.isOpen, event);\n\t\t\t});\n\n\t\t// Toggletip is open on initial render, add 'click' event listener to document so users can close\n\t\tif (this.isOpen) {\n\t\t\tdocument.addEventListener(\"click\", this.documentClick);\n\t\t}\n\n\t\tif (this.btn) {\n\t\t\tthis.renderer.setAttribute(this.btn.nativeElement, \"aria-controls\", this.id);\n\t\t}\n\t}\n\n\t@HostListener(\"keyup\", [\"$event\"])\n\thostkeys(event: KeyboardEvent) {\n\t\tif (open && event.key === \"Escape\") {\n\t\t\tevent.stopPropagation();\n\t\t\tthis.handleExpansion(false, event);\n\t\t}\n\t}\n\n\thandleFocusOut(event) {\n\t\tif (!this.hostElement.nativeElement.contains(event.target)) {\n\t\t\tthis.handleExpansion(false, event);\n\t\t}\n\t}\n\n\tngOnDestroy(): void {\n\t\tthis.subscription.unsubscribe();\n\t}\n\n\tprivate handleExpansion(state = false, event: Event) {\n\t\tthis.handleChange(state, event);\n\t\tif (this.btn) {\n\t\t\tthis.renderer.setAttribute(this.btn.nativeElement, \"aria-expanded\", this.isOpen.toString());\n\t\t}\n\t}\n}\n",
|
|
68117
|
+
"sourceCode": "import {\n\tAfterViewInit,\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tContentChild,\n\tElementRef,\n\tHostBinding,\n\tHostListener,\n\tInput,\n\tNgZone,\n\tOnDestroy,\n\tRenderer2\n} from \"@angular/core\";\nimport { fromEvent, Subscription } from \"rxjs\";\nimport { PopoverContainer } from \"carbon-components-angular/popover\";\nimport { ToggletipButton } from \"./toggletip-button.directive\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ToggletipModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-toggletip--basic)\n */\n@Component({\n\tselector: \"cds-toggletip, ibm-toggletip\",\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\ttemplate: `\n\t\t<ng-content select=\"[cdsToggletipButton]\"></ng-content>\n\t\t<cds-popover-content [attr.id]=\"id\" aria-live=\"polite\">\n\t\t\t<ng-content select=\"[cdsToggletipContent]\"></ng-content>\n\t\t</cds-popover-content>\n\t`\n})\nexport class Toggletip extends PopoverContainer implements AfterViewInit, OnDestroy {\n\tstatic toggletipCounter = 0;\n\n\t@Input() id = `tooltip-${Toggletip.toggletipCounter++}`;\n\n\t@HostBinding(\"class.cds--toggletip\") toggletipClass = true;\n\t@HostBinding(\"class.cds--toggletip--open\") @Input() isOpen = false;\n\n\t@ContentChild(ToggletipButton, { read: ElementRef }) btn!: ElementRef;\n\n\tdocumentClick = this.handleFocusOut.bind(this);\n\tprivate subscription: Subscription;\n\n\tconstructor(\n\t\tprotected hostElement: ElementRef,\n\t\tprotected ngZone: NgZone,\n\t\tprotected renderer: Renderer2,\n\t\tprotected changeDetectorRef: ChangeDetectorRef\n\t) {\n\t\tsuper(hostElement, ngZone, renderer, changeDetectorRef);\n\t\tthis.highContrast = true;\n\t\tthis.dropShadow = false;\n\t}\n\n\tngAfterViewInit(): void {\n\t\tthis.initializeReferences();\n\n\t\t// Listen for click events on trigger\n\t\tthis.subscription = fromEvent(this.btn.nativeElement, \"click\")\n\t\t\t.subscribe((event: Event) => {\n\t\t\t\t// Add/Remove event listener based on isOpen to improve performance when there\n\t\t\t\t// are a lot of toggletips\n\t\t\t\tif (this.isOpen) {\n\t\t\t\t\tdocument.removeEventListener(\"click\", this.documentClick);\n\t\t\t\t} else {\n\t\t\t\t\tdocument.addEventListener(\"click\", this.documentClick);\n\t\t\t\t}\n\n\t\t\t\tthis.handleExpansion(!this.isOpen, event);\n\t\t\t});\n\n\t\t// Toggletip is open on initial render, add 'click' event listener to document so users can close\n\t\tif (this.isOpen) {\n\t\t\tdocument.addEventListener(\"click\", this.documentClick);\n\t\t}\n\n\t\tif (this.btn) {\n\t\t\tthis.renderer.setAttribute(this.btn.nativeElement, \"aria-controls\", this.id);\n\t\t}\n\t}\n\n\t@HostListener(\"keyup\", [\"$event\"])\n\thostkeys(event: KeyboardEvent) {\n\t\tif (open && event.key === \"Escape\") {\n\t\t\tevent.stopPropagation();\n\t\t\tthis.handleExpansion(false, event);\n\t\t}\n\t}\n\n\thandleFocusOut(event) {\n\t\tif (!this.hostElement.nativeElement.contains(event.target)) {\n\t\t\tthis.handleExpansion(false, event);\n\t\t}\n\t}\n\n\tngOnDestroy(): void {\n\t\tthis.subscription.unsubscribe();\n\t}\n\n\tprivate handleExpansion(state = false, event: Event) {\n\t\tthis.handleChange(state, event);\n\t\tif (this.btn) {\n\t\t\tthis.renderer.setAttribute(this.btn.nativeElement, \"aria-expanded\", this.isOpen.toString());\n\t\t}\n\t}\n}\n",
|
|
68118
68118
|
"assetsDirs": [],
|
|
68119
68119
|
"styleUrlsData": "",
|
|
68120
68120
|
"stylesData": "",
|
|
@@ -75219,7 +75219,7 @@
|
|
|
75219
75219
|
"name": "Basic",
|
|
75220
75220
|
"ctype": "miscellaneous",
|
|
75221
75221
|
"subtype": "variable",
|
|
75222
|
-
"file": "src/
|
|
75222
|
+
"file": "src/table/table.stories.ts",
|
|
75223
75223
|
"deprecated": false,
|
|
75224
75224
|
"deprecationMessage": "",
|
|
75225
75225
|
"type": "",
|
|
@@ -75229,7 +75229,7 @@
|
|
|
75229
75229
|
"name": "Basic",
|
|
75230
75230
|
"ctype": "miscellaneous",
|
|
75231
75231
|
"subtype": "variable",
|
|
75232
|
-
"file": "src/
|
|
75232
|
+
"file": "src/tabs/tabs.stories.ts",
|
|
75233
75233
|
"deprecated": false,
|
|
75234
75234
|
"deprecationMessage": "",
|
|
75235
75235
|
"type": "",
|
|
@@ -77461,7 +77461,7 @@
|
|
|
77461
77461
|
"name": "Skeleton",
|
|
77462
77462
|
"ctype": "miscellaneous",
|
|
77463
77463
|
"subtype": "variable",
|
|
77464
|
-
"file": "src/
|
|
77464
|
+
"file": "src/table/table.stories.ts",
|
|
77465
77465
|
"deprecated": false,
|
|
77466
77466
|
"deprecationMessage": "",
|
|
77467
77467
|
"type": "",
|
|
@@ -77471,7 +77471,7 @@
|
|
|
77471
77471
|
"name": "Skeleton",
|
|
77472
77472
|
"ctype": "miscellaneous",
|
|
77473
77473
|
"subtype": "variable",
|
|
77474
|
-
"file": "src/
|
|
77474
|
+
"file": "src/tabs/tabs.stories.ts",
|
|
77475
77475
|
"deprecated": false,
|
|
77476
77476
|
"deprecationMessage": "",
|
|
77477
77477
|
"type": "",
|
|
@@ -77581,21 +77581,21 @@
|
|
|
77581
77581
|
"name": "SkeletonTemplate",
|
|
77582
77582
|
"ctype": "miscellaneous",
|
|
77583
77583
|
"subtype": "variable",
|
|
77584
|
-
"file": "src/
|
|
77584
|
+
"file": "src/table/table.stories.ts",
|
|
77585
77585
|
"deprecated": false,
|
|
77586
77586
|
"deprecationMessage": "",
|
|
77587
77587
|
"type": "",
|
|
77588
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
|
|
77588
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-skeleton-table.component.ts\n\t\t-->\n\t\t<app-skeleton-table\n\t\t\t[skeletonModel]=\"skeletonModel\"\n\t\t\t[size]=\"size\"\n\t\t\t[striped]=\"striped\">\n\t\t</app-skeleton-table>\n\t`\n})"
|
|
77589
77589
|
},
|
|
77590
77590
|
{
|
|
77591
77591
|
"name": "SkeletonTemplate",
|
|
77592
77592
|
"ctype": "miscellaneous",
|
|
77593
77593
|
"subtype": "variable",
|
|
77594
|
-
"file": "src/
|
|
77594
|
+
"file": "src/tabs/tabs.stories.ts",
|
|
77595
77595
|
"deprecated": false,
|
|
77596
77596
|
"deprecationMessage": "",
|
|
77597
77597
|
"type": "",
|
|
77598
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
|
|
77598
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs skeleton=\"true\">\n\t\t\t<cds-tab></cds-tab>\n\t\t\t<cds-tab></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<div style=\"margin-top: 5rem\">\n\t\t\t<p>Tab skeleton component for cds-tab-header-group:</p>\n\t\t\t<cds-tabs-skeleton></cds-tabs-skeleton>\n\t\t</div>\n\t`\n})"
|
|
77599
77599
|
},
|
|
77600
77600
|
{
|
|
77601
77601
|
"name": "SkeletonTemplate",
|
|
@@ -78081,21 +78081,21 @@
|
|
|
78081
78081
|
"name": "Template",
|
|
78082
78082
|
"ctype": "miscellaneous",
|
|
78083
78083
|
"subtype": "variable",
|
|
78084
|
-
"file": "src/
|
|
78084
|
+
"file": "src/table/table.stories.ts",
|
|
78085
78085
|
"deprecated": false,
|
|
78086
78086
|
"deprecationMessage": "",
|
|
78087
78087
|
"type": "",
|
|
78088
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-
|
|
78088
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n\t\t\t-->\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t</cds-table-container>\n\t`\n})"
|
|
78089
78089
|
},
|
|
78090
78090
|
{
|
|
78091
78091
|
"name": "Template",
|
|
78092
78092
|
"ctype": "miscellaneous",
|
|
78093
78093
|
"subtype": "variable",
|
|
78094
|
-
"file": "src/
|
|
78094
|
+
"file": "src/tabs/tabs.stories.ts",
|
|
78095
78095
|
"deprecated": false,
|
|
78096
78096
|
"deprecationMessage": "",
|
|
78097
78097
|
"type": "",
|
|
78098
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-
|
|
78098
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs\n\t\t\t[type]=\"type\"\n\t\t\t[followFocus]=\"followFocus\"\n\t\t\t[isNavigation]=\"isNavigation\"\n\t\t\t[cacheActive]=\"cacheActive\">\n\t\t\t<cds-tab heading=\"one\">Tab Content 1</cds-tab>\n\t\t\t<cds-tab heading=\"two\">Tab Content 2</cds-tab>\n\t\t\t<cds-tab heading=\"three\" [tabContent]=\"three\"></cds-tab>\n\t\t\t<cds-tab heading=\"four\" [tabContent]=\"four\"></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<!-- Use templates if you would like to have lifecycle hooks called when cacheActive is false -->\n\t\t<ng-template #three>\n\t\t\tTab Content 3\n\t\t</ng-template>\n\n\t\t<ng-template #four>\n\t\t\tTab Content 4\n\t\t</ng-template>\n\t`\n})"
|
|
78099
78099
|
},
|
|
78100
78100
|
{
|
|
78101
78101
|
"name": "Template",
|
|
@@ -83544,398 +83544,398 @@
|
|
|
83544
83544
|
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-structured-list [condensed]=\"condensed\">\n\t\t\t<cds-list-header>\n\t\t\t\t<cds-list-column nowrap=\"true\">Column 1</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Column 2</cds-list-column>\n\t\t\t\t<cds-list-column>Column 3</cds-list-column>\n\t\t\t</cds-list-header>\n\t\t\t<cds-list-row>\n\t\t\t\t<cds-list-column>Row 1</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row One</cds-list-column>\n\t\t\t\t<cds-list-column>\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t</cds-list-column>\n\t\t\t</cds-list-row>\n\t\t\t<cds-list-row>\n\t\t\t\t<cds-list-column>Row 2</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row Two</cds-list-column>\n\t\t\t\t<cds-list-column>\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t</cds-list-column>\n\t\t\t</cds-list-row>\n\t\t</cds-structured-list>\n\t`\n})"
|
|
83545
83545
|
}
|
|
83546
83546
|
],
|
|
83547
|
-
"src/
|
|
83547
|
+
"src/table/table.stories.ts": [
|
|
83548
83548
|
{
|
|
83549
83549
|
"name": "Basic",
|
|
83550
83550
|
"ctype": "miscellaneous",
|
|
83551
83551
|
"subtype": "variable",
|
|
83552
|
-
"file": "src/
|
|
83552
|
+
"file": "src/table/table.stories.ts",
|
|
83553
83553
|
"deprecated": false,
|
|
83554
83554
|
"deprecationMessage": "",
|
|
83555
83555
|
"type": "",
|
|
83556
83556
|
"defaultValue": "Template.bind({})"
|
|
83557
83557
|
},
|
|
83558
83558
|
{
|
|
83559
|
-
"name": "
|
|
83559
|
+
"name": "DisabledRowsTemplate",
|
|
83560
83560
|
"ctype": "miscellaneous",
|
|
83561
83561
|
"subtype": "variable",
|
|
83562
|
-
"file": "src/
|
|
83562
|
+
"file": "src/table/table.stories.ts",
|
|
83563
83563
|
"deprecated": false,
|
|
83564
83564
|
"deprecationMessage": "",
|
|
83565
83565
|
"type": "",
|
|
83566
|
-
"defaultValue": "
|
|
83566
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<cds-table-toolbar [model]=\"model\" [batchText]=\"batchText\" #toolbar>\n\t\t\t\t<cds-table-toolbar-actions>\n\t\t\t\t\t<button cdsButton=\"primary\">\n\t\t\t\t\t\tDelete\n\t\t\t\t\t\t<svg cdsIcon=\"delete\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\">\n\t\t\t\t\t\tSave\n\t\t\t\t\t\t<svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\">\n\t\t\t\t\t\tDownload\n\t\t\t\t\t\t<svg cdsIcon=\"download\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-table-toolbar-actions>\n\t\t\t\t<cds-table-toolbar-content *ngIf=\"!toolbar.selected\">\n\t\t\t\t\t<cds-table-toolbar-search [expandable]=\"true\"></cds-table-toolbar-search>\n\t\t\t\t\t<button cdsButton=\"ghost\" class=\"toolbar-action\">\n\t\t\t\t\t\t<svg cdsIcon=\"settings\" size=\"16\" class=\"cds--toolbar-action__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\" size=\"sm\">\n\t\t\t\t\t\tPrimary button<svg cdsIcon=\"add\" size=\"20\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-table-toolbar-content>\n\t\t\t</cds-table-toolbar>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-no-data-table.component.ts\n\t\t\t-->\n\t\t\t<app-no-data-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"lg\"\n\t\t\t\t[showSelectionColumn]=\"true\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-no-data-table>\n\t\t</cds-table-container>\n\t`\n})"
|
|
83567
83567
|
},
|
|
83568
83568
|
{
|
|
83569
|
-
"name": "
|
|
83569
|
+
"name": "DyanmicContentTemplate",
|
|
83570
83570
|
"ctype": "miscellaneous",
|
|
83571
83571
|
"subtype": "variable",
|
|
83572
|
-
"file": "src/
|
|
83572
|
+
"file": "src/table/table.stories.ts",
|
|
83573
83573
|
"deprecated": false,
|
|
83574
83574
|
"deprecationMessage": "",
|
|
83575
83575
|
"type": "",
|
|
83576
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<
|
|
83576
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-custom-table.component.ts\n\t\t\t-->\n\t\t\t<app-custom-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-custom-table>\n\t\t</cds-table-container>\n\t`\n})"
|
|
83577
83577
|
},
|
|
83578
83578
|
{
|
|
83579
|
-
"name": "
|
|
83579
|
+
"name": "emptyModel",
|
|
83580
83580
|
"ctype": "miscellaneous",
|
|
83581
83581
|
"subtype": "variable",
|
|
83582
|
-
"file": "src/
|
|
83582
|
+
"file": "src/table/table.stories.ts",
|
|
83583
83583
|
"deprecated": false,
|
|
83584
83584
|
"deprecationMessage": "",
|
|
83585
83585
|
"type": "",
|
|
83586
|
-
"defaultValue": "
|
|
83586
|
+
"defaultValue": "new TableModel()"
|
|
83587
83587
|
},
|
|
83588
83588
|
{
|
|
83589
|
-
"name": "
|
|
83589
|
+
"name": "ExpansionTemplate",
|
|
83590
83590
|
"ctype": "miscellaneous",
|
|
83591
83591
|
"subtype": "variable",
|
|
83592
|
-
"file": "src/
|
|
83592
|
+
"file": "src/table/table.stories.ts",
|
|
83593
83593
|
"deprecated": false,
|
|
83594
83594
|
"deprecationMessage": "",
|
|
83595
83595
|
"type": "",
|
|
83596
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-
|
|
83596
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-expansion-table.component.ts\n\t\t\t-->\n\t\t\t<app-expansion-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\"\n\t\t\t\t[showExpandAllToggle]=\"showExpandAllToggle\">\n\t\t\t</app-expansion-table>\n\t\t</cds-table-container>\n\t`\n})"
|
|
83597
83597
|
},
|
|
83598
83598
|
{
|
|
83599
|
-
"name": "
|
|
83599
|
+
"name": "Filtering",
|
|
83600
83600
|
"ctype": "miscellaneous",
|
|
83601
83601
|
"subtype": "variable",
|
|
83602
|
-
"file": "src/
|
|
83602
|
+
"file": "src/table/table.stories.ts",
|
|
83603
83603
|
"deprecated": false,
|
|
83604
83604
|
"deprecationMessage": "",
|
|
83605
83605
|
"type": "",
|
|
83606
|
-
"defaultValue": "
|
|
83606
|
+
"defaultValue": "FilteringTemplate.bind({})"
|
|
83607
83607
|
},
|
|
83608
83608
|
{
|
|
83609
|
-
"name": "
|
|
83609
|
+
"name": "FilteringOverriding",
|
|
83610
83610
|
"ctype": "miscellaneous",
|
|
83611
83611
|
"subtype": "variable",
|
|
83612
|
-
"file": "src/
|
|
83612
|
+
"file": "src/table/table.stories.ts",
|
|
83613
83613
|
"deprecated": false,
|
|
83614
83614
|
"deprecationMessage": "",
|
|
83615
83615
|
"type": "",
|
|
83616
|
-
"defaultValue": "(
|
|
83616
|
+
"defaultValue": "FilteringOverridingTemplate.bind({})"
|
|
83617
83617
|
},
|
|
83618
83618
|
{
|
|
83619
|
-
"name": "
|
|
83619
|
+
"name": "FilteringOverridingTemplate",
|
|
83620
83620
|
"ctype": "miscellaneous",
|
|
83621
83621
|
"subtype": "variable",
|
|
83622
|
-
"file": "src/
|
|
83622
|
+
"file": "src/table/table.stories.ts",
|
|
83623
83623
|
"deprecated": false,
|
|
83624
83624
|
"deprecationMessage": "",
|
|
83625
83625
|
"type": "",
|
|
83626
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t
|
|
83626
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-function-override-filter-table.component.ts\n\t\t-->\n\t\t<app-function-override-filter-table\n\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[striped]=\"striped\"\n\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t</app-function-override-filter-table>\n\t`\n})"
|
|
83627
83627
|
},
|
|
83628
83628
|
{
|
|
83629
|
-
"name": "
|
|
83629
|
+
"name": "FilteringTemplate",
|
|
83630
83630
|
"ctype": "miscellaneous",
|
|
83631
83631
|
"subtype": "variable",
|
|
83632
|
-
"file": "src/
|
|
83632
|
+
"file": "src/table/table.stories.ts",
|
|
83633
83633
|
"deprecated": false,
|
|
83634
83634
|
"deprecationMessage": "",
|
|
83635
83635
|
"type": "",
|
|
83636
|
-
"defaultValue": "
|
|
83636
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-model-filter-table.component.ts\n\t\t-->\n\t\t<app-model-filter-table\n\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[striped]=\"striped\"\n\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t</app-model-filter-table>\n\t`\n})"
|
|
83637
83637
|
},
|
|
83638
83638
|
{
|
|
83639
|
-
"name": "
|
|
83639
|
+
"name": "FromComponents",
|
|
83640
83640
|
"ctype": "miscellaneous",
|
|
83641
83641
|
"subtype": "variable",
|
|
83642
|
-
"file": "src/
|
|
83642
|
+
"file": "src/table/table.stories.ts",
|
|
83643
83643
|
"deprecated": false,
|
|
83644
83644
|
"deprecationMessage": "",
|
|
83645
83645
|
"type": "",
|
|
83646
|
-
"defaultValue": "(
|
|
83647
|
-
}
|
|
83648
|
-
],
|
|
83649
|
-
"src/table/table.stories.ts": [
|
|
83646
|
+
"defaultValue": "FromComponentsTemplate.bind({})"
|
|
83647
|
+
},
|
|
83650
83648
|
{
|
|
83651
|
-
"name": "
|
|
83649
|
+
"name": "FromComponentsTemplate",
|
|
83652
83650
|
"ctype": "miscellaneous",
|
|
83653
83651
|
"subtype": "variable",
|
|
83654
83652
|
"file": "src/table/table.stories.ts",
|
|
83655
83653
|
"deprecated": false,
|
|
83656
83654
|
"deprecationMessage": "",
|
|
83657
83655
|
"type": "",
|
|
83658
|
-
"defaultValue": "
|
|
83656
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<table cdsTable [sortable]=\"false\">\n\t\t\t<thead cdsTableHead>\n\t\t\t\t<tr>\n\t\t\t\t\t<th\n\t\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t\tcdsTableHeadCell\n\t\t\t\t\t\t*ngFor=\"let column of model.header\"\n\t\t\t\t\t\t[column]=\"column\">\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody cdsTableBody>\n\t\t\t\t<tr\n\t\t\t\t\t*ngFor=\"let row of model.data\"\n\t\t\t\t\tcdsTableRow\n\t\t\t\t\t[row]=\"row\">\n\t\t\t\t\t<td\n\t\t\t\t\t\t*ngFor=\"let item of row; let j = index\"\n\t\t\t\t\t\tcdsTableData\n\t\t\t\t\t\t[item]=\"item\"\n\t\t\t\t\t\t[class]=\"model.header[j].className\"\n\t\t\t\t\t\t[ngStyle]=\"model.header[j].style\">\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t</table>\n\t`\n})"
|
|
83659
83657
|
},
|
|
83660
83658
|
{
|
|
83661
|
-
"name": "
|
|
83659
|
+
"name": "getProps",
|
|
83662
83660
|
"ctype": "miscellaneous",
|
|
83663
83661
|
"subtype": "variable",
|
|
83664
83662
|
"file": "src/table/table.stories.ts",
|
|
83665
83663
|
"deprecated": false,
|
|
83666
83664
|
"deprecationMessage": "",
|
|
83667
83665
|
"type": "",
|
|
83668
|
-
"defaultValue": "(
|
|
83666
|
+
"defaultValue": "(more = {}, type: \"args\" | \"argTypes\") => {\n\tconst defaultProps = type === \"args\" ? {\n\t\tmodel: simpleModel,\n\t\ttitle: \"Table title\",\n\t\tdescription: \"\",\n\t\tsize: \"md\",\n\t\tshowSelectionColumn: true,\n\t\tstriped: false,\n\t\tsortable: true,\n\t\tisDataGrid: true,\n\t\tstickyHeader: false,\n\t\tskeleton: false\n\t} : {\n\t\tsize: {\n\t\t\toptions: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"],\n\t\t\tcontrol: \"select\"\n\t\t}\n\t};\n\treturn { ...defaultProps, ...more };\n}"
|
|
83669
83667
|
},
|
|
83670
83668
|
{
|
|
83671
|
-
"name": "
|
|
83669
|
+
"name": "NoDataTemplate",
|
|
83672
83670
|
"ctype": "miscellaneous",
|
|
83673
83671
|
"subtype": "variable",
|
|
83674
83672
|
"file": "src/table/table.stories.ts",
|
|
83675
83673
|
"deprecated": false,
|
|
83676
83674
|
"deprecationMessage": "",
|
|
83677
83675
|
"type": "",
|
|
83678
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-
|
|
83676
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle id=\"table-header\">{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription id=\"table-description\">{{description}}</p>\n\t\t\t</cds-table-header>\n\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-no-data.component.ts\n\t\t\t-->\n\t\t\t<app-no-data-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\tariaLabelledby=\"table-header\"\n\t\t\t\tariaDescribedby=\"table-description\">\n\t\t\t\t<tbody><tr><td class=\"no-data\" colspan=\"3\"><div>No data.</div></td></tr></tbody>\n\t\t\t</app-no-data-table>\n\t\t</cds-table-container>\n\t`,\n\tstyles: [`\n\t\t.no-data {\n\t\t\twidth: 100%;\n\t\t\theight: 150px;\n\t\t\ttext-align: center;\n\t\t}\n\t`]\n})"
|
|
83679
83677
|
},
|
|
83680
83678
|
{
|
|
83681
|
-
"name": "
|
|
83679
|
+
"name": "OverflowMenuTemplate",
|
|
83682
83680
|
"ctype": "miscellaneous",
|
|
83683
83681
|
"subtype": "variable",
|
|
83684
83682
|
"file": "src/table/table.stories.ts",
|
|
83685
83683
|
"deprecated": false,
|
|
83686
83684
|
"deprecationMessage": "",
|
|
83687
83685
|
"type": "",
|
|
83688
|
-
"defaultValue": "
|
|
83686
|
+
"defaultValue": "(args) => ({\n\tprops: {\n\t\t...getProps({\n\t\t\tdescription: \"With overflow menu\"\n\t\t}, \"args\")\n\t},\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-overflow-table.component.ts\n\t\t\t-->\n\t\t\t<app-overflow-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-overflow-table>\n\t\t</cds-table-container>\n\t`\n})"
|
|
83689
83687
|
},
|
|
83690
83688
|
{
|
|
83691
|
-
"name": "
|
|
83689
|
+
"name": "PaginationTemplate",
|
|
83692
83690
|
"ctype": "miscellaneous",
|
|
83693
83691
|
"subtype": "variable",
|
|
83694
83692
|
"file": "src/table/table.stories.ts",
|
|
83695
83693
|
"deprecated": false,
|
|
83696
83694
|
"deprecationMessage": "",
|
|
83697
83695
|
"type": "",
|
|
83698
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-
|
|
83696
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-pagination-table.component.ts\n\t\t\t-->\n\t\t\t<app-pagination-table\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[totalDataLength]=\"totalDataLength\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[model]=\"model\">\n\t\t\t</app-pagination-table>\n\t\t</cds-table-container>\n\t`\n})"
|
|
83699
83697
|
},
|
|
83700
83698
|
{
|
|
83701
|
-
"name": "
|
|
83699
|
+
"name": "simpleModel",
|
|
83702
83700
|
"ctype": "miscellaneous",
|
|
83703
83701
|
"subtype": "variable",
|
|
83704
83702
|
"file": "src/table/table.stories.ts",
|
|
83705
83703
|
"deprecated": false,
|
|
83706
83704
|
"deprecationMessage": "",
|
|
83707
83705
|
"type": "",
|
|
83708
|
-
"defaultValue": "
|
|
83706
|
+
"defaultValue": "new TableModel()"
|
|
83709
83707
|
},
|
|
83710
83708
|
{
|
|
83711
|
-
"name": "
|
|
83709
|
+
"name": "Skeleton",
|
|
83712
83710
|
"ctype": "miscellaneous",
|
|
83713
83711
|
"subtype": "variable",
|
|
83714
83712
|
"file": "src/table/table.stories.ts",
|
|
83715
83713
|
"deprecated": false,
|
|
83716
83714
|
"deprecationMessage": "",
|
|
83717
83715
|
"type": "",
|
|
83718
|
-
"defaultValue": "
|
|
83716
|
+
"defaultValue": "SkeletonTemplate.bind({})"
|
|
83719
83717
|
},
|
|
83720
83718
|
{
|
|
83721
|
-
"name": "
|
|
83719
|
+
"name": "SkeletonTemplate",
|
|
83722
83720
|
"ctype": "miscellaneous",
|
|
83723
83721
|
"subtype": "variable",
|
|
83724
83722
|
"file": "src/table/table.stories.ts",
|
|
83725
83723
|
"deprecated": false,
|
|
83726
83724
|
"deprecationMessage": "",
|
|
83727
83725
|
"type": "",
|
|
83728
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-
|
|
83726
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-skeleton-table.component.ts\n\t\t-->\n\t\t<app-skeleton-table\n\t\t\t[skeletonModel]=\"skeletonModel\"\n\t\t\t[size]=\"size\"\n\t\t\t[striped]=\"striped\">\n\t\t</app-skeleton-table>\n\t`\n})"
|
|
83729
83727
|
},
|
|
83730
83728
|
{
|
|
83731
|
-
"name": "
|
|
83729
|
+
"name": "Template",
|
|
83732
83730
|
"ctype": "miscellaneous",
|
|
83733
83731
|
"subtype": "variable",
|
|
83734
83732
|
"file": "src/table/table.stories.ts",
|
|
83735
83733
|
"deprecated": false,
|
|
83736
83734
|
"deprecationMessage": "",
|
|
83737
83735
|
"type": "",
|
|
83738
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-
|
|
83736
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n\t\t\t-->\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t</cds-table-container>\n\t`\n})"
|
|
83739
83737
|
},
|
|
83740
83738
|
{
|
|
83741
|
-
"name": "
|
|
83739
|
+
"name": "ToolbarTemplate",
|
|
83742
83740
|
"ctype": "miscellaneous",
|
|
83743
83741
|
"subtype": "variable",
|
|
83744
83742
|
"file": "src/table/table.stories.ts",
|
|
83745
83743
|
"deprecated": false,
|
|
83746
83744
|
"deprecationMessage": "",
|
|
83747
83745
|
"type": "",
|
|
83748
|
-
"defaultValue": "
|
|
83746
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<cds-table-toolbar\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[batchText]=\"batchText\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t(cancel)=\"cancelMethod()\"\n\t\t\t\t#toolbar>\n\t\t\t\t<cds-table-toolbar-actions>\n\t\t\t\t\t<button cdsButton=\"primary\" [tabindex]=\"toolbar.selected ? 0 : -1\">\n\t\t\t\t\t\tDelete\n\t\t\t\t\t\t<svg cdsIcon=\"trash-can\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\" [tabindex]=\"toolbar.selected ? 0 : -1\">\n\t\t\t\t\t\tSave\n\t\t\t\t\t\t<svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\" [tabindex]=\"toolbar.selected ? 0 : -1\">\n\t\t\t\t\t\tDownload\n\t\t\t\t\t\t<svg cdsIcon=\"download\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-table-toolbar-actions>\n\t\t\t\t<cds-table-toolbar-content *ngIf=\"!toolbar.selected\">\n\t\t\t\t\t<cds-table-toolbar-search\n\t\t\t\t\t\tngDefaultControl\n\t\t\t\t\t\t[expandable]=\"searchExpandable\"\n\t\t\t\t\t\t[(ngModel)]=\"searchModel\">\n\t\t\t\t\t</cds-table-toolbar-search>\n\t\t\t\t\t<cds-overflow-menu\n\t\t\t\t\t\ttriggerClass=\"cds--toolbar-action\"\n\t\t\t\t\t\t[customTrigger]=\"customTrigger\"\n\t\t\t\t\t\tplacement=\"bottom\"\n\t\t\t\t\t\t[offset]=\"size === 'sm' ? null : offset\">\n\t\t\t\t\t\t<cds-overflow-menu-option>Option 1</cds-overflow-menu-option>\n\t\t\t\t\t\t<cds-overflow-menu-option>Option 2</cds-overflow-menu-option>\n\t\t\t\t\t\t<cds-overflow-menu-option disabled=\"true\">Disabled</cds-overflow-menu-option>\n\t\t\t\t\t\t<cds-overflow-menu-option type=\"danger\">Danger option</cds-overflow-menu-option>\n\t\t\t\t\t</cds-overflow-menu>\n\t\t\t\t\t<button cdsButton=\"primary\" size=\"sm\" [tabindex]=\"toolbar.selected ? -1 : 0\">\n\t\t\t\t\t\tPrimary button<svg cdsIcon=\"add\" size=\"20\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-table-toolbar-content>\n\t\t\t</cds-table-toolbar>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n\t\t\t-->\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t\t<ng-template #customTrigger><svg cdsIcon=\"settings\" size=\"16\"></svg></ng-template>\n\t\t</cds-table-container>\n\t`\n})"
|
|
83749
83747
|
},
|
|
83750
83748
|
{
|
|
83751
|
-
"name": "
|
|
83749
|
+
"name": "WithDisabledRows",
|
|
83752
83750
|
"ctype": "miscellaneous",
|
|
83753
83751
|
"subtype": "variable",
|
|
83754
83752
|
"file": "src/table/table.stories.ts",
|
|
83755
83753
|
"deprecated": false,
|
|
83756
83754
|
"deprecationMessage": "",
|
|
83757
83755
|
"type": "",
|
|
83758
|
-
"defaultValue": "(
|
|
83756
|
+
"defaultValue": "DisabledRowsTemplate.bind({})"
|
|
83759
83757
|
},
|
|
83760
83758
|
{
|
|
83761
|
-
"name": "
|
|
83759
|
+
"name": "WithDynamicContent",
|
|
83762
83760
|
"ctype": "miscellaneous",
|
|
83763
83761
|
"subtype": "variable",
|
|
83764
83762
|
"file": "src/table/table.stories.ts",
|
|
83765
83763
|
"deprecated": false,
|
|
83766
83764
|
"deprecationMessage": "",
|
|
83767
83765
|
"type": "",
|
|
83768
|
-
"defaultValue": "(
|
|
83766
|
+
"defaultValue": "DyanmicContentTemplate.bind({})"
|
|
83769
83767
|
},
|
|
83770
83768
|
{
|
|
83771
|
-
"name": "
|
|
83769
|
+
"name": "WithExpansion",
|
|
83772
83770
|
"ctype": "miscellaneous",
|
|
83773
83771
|
"subtype": "variable",
|
|
83774
83772
|
"file": "src/table/table.stories.ts",
|
|
83775
83773
|
"deprecated": false,
|
|
83776
83774
|
"deprecationMessage": "",
|
|
83777
83775
|
"type": "",
|
|
83778
|
-
"defaultValue": "(
|
|
83776
|
+
"defaultValue": "ExpansionTemplate.bind({})"
|
|
83779
83777
|
},
|
|
83780
83778
|
{
|
|
83781
|
-
"name": "
|
|
83779
|
+
"name": "WithoutActionTemplate",
|
|
83782
83780
|
"ctype": "miscellaneous",
|
|
83783
83781
|
"subtype": "variable",
|
|
83784
83782
|
"file": "src/table/table.stories.ts",
|
|
83785
83783
|
"deprecated": false,
|
|
83786
83784
|
"deprecationMessage": "",
|
|
83787
83785
|
"type": "",
|
|
83788
|
-
"defaultValue": "(args) => ({\n\tprops:
|
|
83786
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle id=\"table-header\">{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription id=\"table-description\">{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<cds-table-toolbar>\n\t\t\t\t<cds-table-toolbar-content>\n\t\t\t\t\t<cds-table-toolbar-search [expandable]=\"true\"></cds-table-toolbar-search>\n\t\t\t\t\t<button cdsButton=\"ghost\" class=\"toolbar-action\">\n\t\t\t\t\t\t<svg cdsIcon=\"settings\" size=\"16\" class=\"cds--toolbar-action__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\" size=\"sm\">\n\t\t\t\t\t\tPrimary button<svg cdsIcon=\"add\" size=\"20\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-table-toolbar-content>\n\t\t\t</cds-table-toolbar>\n\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n\t\t\t-->\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\"\n\t\t\t\tariaLabelledby=\"table-header\"\n\t\t\t\tariaDescribedby=\"table-description\">\n\t\t\t</app-table>\n\t\t</cds-table-container>\n\t`\n})"
|
|
83789
83787
|
},
|
|
83790
83788
|
{
|
|
83791
|
-
"name": "
|
|
83789
|
+
"name": "WithoutData",
|
|
83792
83790
|
"ctype": "miscellaneous",
|
|
83793
83791
|
"subtype": "variable",
|
|
83794
83792
|
"file": "src/table/table.stories.ts",
|
|
83795
83793
|
"deprecated": false,
|
|
83796
83794
|
"deprecationMessage": "",
|
|
83797
83795
|
"type": "",
|
|
83798
|
-
"defaultValue": "(
|
|
83796
|
+
"defaultValue": "NoDataTemplate.bind({})"
|
|
83799
83797
|
},
|
|
83800
83798
|
{
|
|
83801
|
-
"name": "
|
|
83799
|
+
"name": "WithOverflowMenu",
|
|
83802
83800
|
"ctype": "miscellaneous",
|
|
83803
83801
|
"subtype": "variable",
|
|
83804
83802
|
"file": "src/table/table.stories.ts",
|
|
83805
83803
|
"deprecated": false,
|
|
83806
83804
|
"deprecationMessage": "",
|
|
83807
83805
|
"type": "",
|
|
83808
|
-
"defaultValue": "
|
|
83806
|
+
"defaultValue": "OverflowMenuTemplate.bind({})"
|
|
83809
83807
|
},
|
|
83810
83808
|
{
|
|
83811
|
-
"name": "
|
|
83809
|
+
"name": "WithPagination",
|
|
83812
83810
|
"ctype": "miscellaneous",
|
|
83813
83811
|
"subtype": "variable",
|
|
83814
83812
|
"file": "src/table/table.stories.ts",
|
|
83815
83813
|
"deprecated": false,
|
|
83816
83814
|
"deprecationMessage": "",
|
|
83817
83815
|
"type": "",
|
|
83818
|
-
"defaultValue": "
|
|
83816
|
+
"defaultValue": "PaginationTemplate.bind({})"
|
|
83819
83817
|
},
|
|
83820
83818
|
{
|
|
83821
|
-
"name": "
|
|
83819
|
+
"name": "WithToolbar",
|
|
83822
83820
|
"ctype": "miscellaneous",
|
|
83823
83821
|
"subtype": "variable",
|
|
83824
83822
|
"file": "src/table/table.stories.ts",
|
|
83825
83823
|
"deprecated": false,
|
|
83826
83824
|
"deprecationMessage": "",
|
|
83827
83825
|
"type": "",
|
|
83828
|
-
"defaultValue": "(
|
|
83826
|
+
"defaultValue": "ToolbarTemplate.bind({})"
|
|
83829
83827
|
},
|
|
83830
83828
|
{
|
|
83831
|
-
"name": "
|
|
83829
|
+
"name": "WithToolbarWithoutToolbarAction",
|
|
83832
83830
|
"ctype": "miscellaneous",
|
|
83833
83831
|
"subtype": "variable",
|
|
83834
83832
|
"file": "src/table/table.stories.ts",
|
|
83835
83833
|
"deprecated": false,
|
|
83836
83834
|
"deprecationMessage": "",
|
|
83837
83835
|
"type": "",
|
|
83838
|
-
"defaultValue": "(
|
|
83839
|
-
}
|
|
83836
|
+
"defaultValue": "WithoutActionTemplate.bind({})"
|
|
83837
|
+
}
|
|
83838
|
+
],
|
|
83839
|
+
"src/tabs/tabs.stories.ts": [
|
|
83840
83840
|
{
|
|
83841
|
-
"name": "
|
|
83841
|
+
"name": "Basic",
|
|
83842
83842
|
"ctype": "miscellaneous",
|
|
83843
83843
|
"subtype": "variable",
|
|
83844
|
-
"file": "src/
|
|
83844
|
+
"file": "src/tabs/tabs.stories.ts",
|
|
83845
83845
|
"deprecated": false,
|
|
83846
83846
|
"deprecationMessage": "",
|
|
83847
83847
|
"type": "",
|
|
83848
|
-
"defaultValue": "(
|
|
83848
|
+
"defaultValue": "Template.bind({})"
|
|
83849
83849
|
},
|
|
83850
83850
|
{
|
|
83851
|
-
"name": "
|
|
83851
|
+
"name": "BeforeAndAfter",
|
|
83852
83852
|
"ctype": "miscellaneous",
|
|
83853
83853
|
"subtype": "variable",
|
|
83854
|
-
"file": "src/
|
|
83854
|
+
"file": "src/tabs/tabs.stories.ts",
|
|
83855
83855
|
"deprecated": false,
|
|
83856
83856
|
"deprecationMessage": "",
|
|
83857
83857
|
"type": "",
|
|
83858
|
-
"defaultValue": "
|
|
83858
|
+
"defaultValue": "BeforeAndAfterTemplate.bind({})"
|
|
83859
83859
|
},
|
|
83860
83860
|
{
|
|
83861
|
-
"name": "
|
|
83861
|
+
"name": "BeforeAndAfterTemplate",
|
|
83862
83862
|
"ctype": "miscellaneous",
|
|
83863
83863
|
"subtype": "variable",
|
|
83864
|
-
"file": "src/
|
|
83864
|
+
"file": "src/tabs/tabs.stories.ts",
|
|
83865
83865
|
"deprecated": false,
|
|
83866
83866
|
"deprecationMessage": "",
|
|
83867
83867
|
"type": "",
|
|
83868
|
-
"defaultValue": "
|
|
83868
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">before</div>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab heading=\"one\">foo</cds-tab>\n\t\t\t<cds-tab heading=\"two\">bar</cds-tab>\n\t\t\t<span before>content before</span>\n\t\t</cds-tabs>\n\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">after</div>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab heading=\"one\">foo</cds-tab>\n\t\t\t<cds-tab heading=\"two\">bar</cds-tab>\n\t\t\t<span after>content after</span>\n\t\t</cds-tabs>\n\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">both</div>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab heading=\"one\">foo</cds-tab>\n\t\t\t<cds-tab heading=\"two\">bar</cds-tab>\n\t\t\t<span before>content before</span>\n\t\t\t<span after>content after</span>\n\t\t</cds-tabs>\n\t`\n})"
|
|
83869
83869
|
},
|
|
83870
83870
|
{
|
|
83871
|
-
"name": "
|
|
83871
|
+
"name": "Skeleton",
|
|
83872
83872
|
"ctype": "miscellaneous",
|
|
83873
83873
|
"subtype": "variable",
|
|
83874
|
-
"file": "src/
|
|
83874
|
+
"file": "src/tabs/tabs.stories.ts",
|
|
83875
83875
|
"deprecated": false,
|
|
83876
83876
|
"deprecationMessage": "",
|
|
83877
83877
|
"type": "",
|
|
83878
|
-
"defaultValue": "
|
|
83878
|
+
"defaultValue": "SkeletonTemplate.bind({})"
|
|
83879
83879
|
},
|
|
83880
83880
|
{
|
|
83881
|
-
"name": "
|
|
83881
|
+
"name": "SkeletonTemplate",
|
|
83882
83882
|
"ctype": "miscellaneous",
|
|
83883
83883
|
"subtype": "variable",
|
|
83884
|
-
"file": "src/
|
|
83884
|
+
"file": "src/tabs/tabs.stories.ts",
|
|
83885
83885
|
"deprecated": false,
|
|
83886
83886
|
"deprecationMessage": "",
|
|
83887
83887
|
"type": "",
|
|
83888
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-
|
|
83888
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs skeleton=\"true\">\n\t\t\t<cds-tab></cds-tab>\n\t\t\t<cds-tab></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<div style=\"margin-top: 5rem\">\n\t\t\t<p>Tab skeleton component for cds-tab-header-group:</p>\n\t\t\t<cds-tabs-skeleton></cds-tabs-skeleton>\n\t\t</div>\n\t`\n})"
|
|
83889
83889
|
},
|
|
83890
83890
|
{
|
|
83891
|
-
"name": "
|
|
83891
|
+
"name": "TabheaderGroup",
|
|
83892
83892
|
"ctype": "miscellaneous",
|
|
83893
83893
|
"subtype": "variable",
|
|
83894
|
-
"file": "src/
|
|
83894
|
+
"file": "src/tabs/tabs.stories.ts",
|
|
83895
83895
|
"deprecated": false,
|
|
83896
83896
|
"deprecationMessage": "",
|
|
83897
83897
|
"type": "",
|
|
83898
|
-
"defaultValue": "
|
|
83898
|
+
"defaultValue": "TabHeaderGroupTemplate.bind({})"
|
|
83899
83899
|
},
|
|
83900
83900
|
{
|
|
83901
|
-
"name": "
|
|
83901
|
+
"name": "TabHeaderGroupTemplate",
|
|
83902
83902
|
"ctype": "miscellaneous",
|
|
83903
83903
|
"subtype": "variable",
|
|
83904
|
-
"file": "src/
|
|
83904
|
+
"file": "src/tabs/tabs.stories.ts",
|
|
83905
83905
|
"deprecated": false,
|
|
83906
83906
|
"deprecationMessage": "",
|
|
83907
83907
|
"type": "",
|
|
83908
|
-
"defaultValue": "
|
|
83908
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/pagination/stories/pagination.component.ts\n\t\t-->\n\t\t<app-header-group\n\t\t\t[type]=\"type\"\n\t\t\t[followFocus]=\"followFocus\"\n\t\t\t[cacheActive]=\"cacheActive\"\n\t\t\t[isNavigation]=\"isNavigation\">\n\t\t</app-header-group>\n\t`\n})"
|
|
83909
83909
|
},
|
|
83910
83910
|
{
|
|
83911
|
-
"name": "
|
|
83911
|
+
"name": "Template",
|
|
83912
83912
|
"ctype": "miscellaneous",
|
|
83913
83913
|
"subtype": "variable",
|
|
83914
|
-
"file": "src/
|
|
83914
|
+
"file": "src/tabs/tabs.stories.ts",
|
|
83915
83915
|
"deprecated": false,
|
|
83916
83916
|
"deprecationMessage": "",
|
|
83917
83917
|
"type": "",
|
|
83918
|
-
"defaultValue": "
|
|
83918
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs\n\t\t\t[type]=\"type\"\n\t\t\t[followFocus]=\"followFocus\"\n\t\t\t[isNavigation]=\"isNavigation\"\n\t\t\t[cacheActive]=\"cacheActive\">\n\t\t\t<cds-tab heading=\"one\">Tab Content 1</cds-tab>\n\t\t\t<cds-tab heading=\"two\">Tab Content 2</cds-tab>\n\t\t\t<cds-tab heading=\"three\" [tabContent]=\"three\"></cds-tab>\n\t\t\t<cds-tab heading=\"four\" [tabContent]=\"four\"></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<!-- Use templates if you would like to have lifecycle hooks called when cacheActive is false -->\n\t\t<ng-template #three>\n\t\t\tTab Content 3\n\t\t</ng-template>\n\n\t\t<ng-template #four>\n\t\t\tTab Content 4\n\t\t</ng-template>\n\t`\n})"
|
|
83919
83919
|
},
|
|
83920
83920
|
{
|
|
83921
|
-
"name": "
|
|
83921
|
+
"name": "With",
|
|
83922
83922
|
"ctype": "miscellaneous",
|
|
83923
83923
|
"subtype": "variable",
|
|
83924
|
-
"file": "src/
|
|
83924
|
+
"file": "src/tabs/tabs.stories.ts",
|
|
83925
83925
|
"deprecated": false,
|
|
83926
83926
|
"deprecationMessage": "",
|
|
83927
83927
|
"type": "",
|
|
83928
|
-
"defaultValue": "
|
|
83928
|
+
"defaultValue": "WithTemplate.bind({})"
|
|
83929
83929
|
},
|
|
83930
83930
|
{
|
|
83931
|
-
"name": "
|
|
83931
|
+
"name": "WithTemplate",
|
|
83932
83932
|
"ctype": "miscellaneous",
|
|
83933
83933
|
"subtype": "variable",
|
|
83934
|
-
"file": "src/
|
|
83934
|
+
"file": "src/tabs/tabs.stories.ts",
|
|
83935
83935
|
"deprecated": false,
|
|
83936
83936
|
"deprecationMessage": "",
|
|
83937
83937
|
"type": "",
|
|
83938
|
-
"defaultValue": "
|
|
83938
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<ng-template #customTabs let-item>\n\t\t\t{{item ? item.name : \"wait for it\"}}\n\t\t</ng-template>\n\t\t<ng-template #iconTab>\n\t\t\t<div style=\"height: 14px;\">\n\t\t\t\tSomething custom\n\t\t\t\t<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n\t\t\t\tstyle=\"height: 14px; width: 14px; fill: #3d70b2;\">\n\t\t\t\t\t<path d=\"M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z\"></path>\n\t\t\t\t\t<path d=\"M9 13H7V7h2z\"></path>\n\t\t\t\t\t<path d=\"M7 4a1 1 0 1 1 2 0 1 1 0 1 1-2 0\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</ng-template>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab\n\t\t\t\t*ngFor=\"let item of data; let i = index;\"\n\t\t\t\t[heading]=\"customTabs\"\n\t\t\t\ttitle=\"Tab Content\"\n\t\t\t\t[context]=\"item\">\n\t\t\t\tTab Content {{i + 1}}\n\t\t\t</cds-tab>\n\t\t\t<cds-tab [heading]=\"iconTab\" title=\"Custom tab content\">Tab Content Custom</cds-tab>\n\t\t</cds-tabs>\n\t`\n})"
|
|
83939
83939
|
}
|
|
83940
83940
|
],
|
|
83941
83941
|
"src/tag/tag.stories.ts": [
|