carbon-components-angular 5.59.1 → 5.59.2
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/TooltipDefinition.html +176 -38
- package/docs/documentation/coverage.html +3 -3
- package/docs/documentation/js/search/search_index.js +2 -2
- package/docs/documentation/modules/TilesModule/dependencies.svg +93 -93
- package/docs/documentation/modules/TilesModule.html +93 -93
- package/docs/documentation/modules/TimePickerModule/dependencies.svg +18 -18
- package/docs/documentation/modules/TimePickerModule.html +18 -18
- package/docs/documentation/modules/TimePickerSelectModule/dependencies.svg +41 -45
- package/docs/documentation/modules/TimePickerSelectModule.html +41 -45
- package/docs/documentation/modules/ToggleModule/dependencies.svg +19 -19
- package/docs/documentation/modules/ToggleModule.html +19 -19
- 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 +36 -36
- package/docs/documentation/modules/TreeviewModule.html +36 -36
- package/docs/documentation.json +150 -130
- package/docs/storybook/{6702.8fcd135f.iframe.bundle.js → 6702.a0e549d4.iframe.bundle.js} +1 -1
- package/docs/storybook/iframe.html +2 -2
- package/docs/storybook/{main.f6ef3c2c.iframe.bundle.js → main.762d7fb4.iframe.bundle.js} +1 -1
- package/docs/storybook/main.css +2137 -697
- package/docs/storybook/project.json +1 -1
- package/docs/storybook/{runtime~main.5de03212.iframe.bundle.js → runtime~main.771b0b54.iframe.bundle.js} +1 -1
- package/docs/storybook/{tooltip-definition-tooptip-stories.16c9af6d.iframe.bundle.js → tooltip-definition-tooptip-stories.9a2a5436.iframe.bundle.js} +1 -1
- package/esm2020/tooltip/definition-tooptip.component.mjs +26 -7
- package/fesm2015/carbon-components-angular-tooltip.mjs +25 -6
- package/fesm2015/carbon-components-angular-tooltip.mjs.map +1 -1
- package/fesm2020/carbon-components-angular-tooltip.mjs +25 -6
- package/fesm2020/carbon-components-angular-tooltip.mjs.map +1 -1
- package/package.json +1 -1
- package/tooltip/definition-tooptip.component.d.ts +7 -1
package/docs/documentation.json
CHANGED
|
@@ -69154,7 +69154,7 @@
|
|
|
69154
69154
|
},
|
|
69155
69155
|
{
|
|
69156
69156
|
"name": "TooltipDefinition",
|
|
69157
|
-
"id": "component-TooltipDefinition-
|
|
69157
|
+
"id": "component-TooltipDefinition-3d61b5815066fd7d4bd7a396e5958a261dea338c8bff27b032a3e9edd8a159faff5713f4cf38aa70ab0bf8163264cefe23dc199e8348ea5492d7a26758c888eb",
|
|
69158
69158
|
"file": "src/tooltip/definition-tooptip.component.ts",
|
|
69159
69159
|
"changeDetection": "ChangeDetectionStrategy.OnPush",
|
|
69160
69160
|
"encapsulation": [],
|
|
@@ -69165,7 +69165,7 @@
|
|
|
69165
69165
|
"selector": "cds-tooltip-definition, ibm-tooltip-definition",
|
|
69166
69166
|
"styleUrls": [],
|
|
69167
69167
|
"styles": [],
|
|
69168
|
-
"template": "<button\n\tclass=\"cds--definition-term\"\n\t[attr.aria-controls]=\"id\"\n\t[attr.aria-expanded]=\"isOpen\"\n\t[attr.aria-describedby]=\"isOpen ? id : null\"\n\t(blur)=\"onBlur($event)\"\n\t(
|
|
69168
|
+
"template": "<button\n\tclass=\"cds--definition-term\"\n\t[attr.aria-controls]=\"id\"\n\t[attr.aria-expanded]=\"isOpen\"\n\t[attr.aria-describedby]=\"isOpen ? id : null\"\n\t(blur)=\"onBlur($event)\"\n\t(mousedown)=\"onClick($event)\"\n\ttype=\"button\">\n\t<ng-content></ng-content>\n</button>\n<span\n\t*ngIf=\"description\"\n\tclass=\"cds--popover\"\n\t[id]=\"id\"\n\t[attr.aria-hidden]=\"!isOpen\"\n\trole=\"tooltip\"\n\t(mousedown)=\"onPopoverMouseDown()\"\n\t(mouseup)=\"onPopoverMouseUp()\">\n\t<span class=\"cds--popover-content cds--definition-tooltip\" aria-live=\"polite\">\n\t\t<ng-container *ngIf=\"!isTemplate(description)\">{{description}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(description)\" [ngTemplateOutlet]=\"description\" [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"></ng-template>\n\t\t<span *ngIf=\"autoAlign\" class=\"cds--popover-caret cds--popover--auto-align\"></span>\n\t</span>\n\t<span *ngIf=\"!autoAlign\" class=\"cds--popover-caret\"></span>\n</span>\n\t",
|
|
69169
69169
|
"templateUrl": [],
|
|
69170
69170
|
"viewProviders": [],
|
|
69171
69171
|
"hostDirectives": [],
|
|
@@ -69176,7 +69176,7 @@
|
|
|
69176
69176
|
"deprecationMessage": "",
|
|
69177
69177
|
"rawdescription": "\n\nThe string or template content to be exposed by the tooltip.\n",
|
|
69178
69178
|
"description": "<p>The string or template content to be exposed by the tooltip.</p>\n",
|
|
69179
|
-
"line":
|
|
69179
|
+
"line": 62,
|
|
69180
69180
|
"type": "string | TemplateRef<any>",
|
|
69181
69181
|
"decorators": []
|
|
69182
69182
|
},
|
|
@@ -69185,7 +69185,7 @@
|
|
|
69185
69185
|
"defaultValue": "`tooltip-definition-${TooltipDefinition.tooltipCount++}`",
|
|
69186
69186
|
"deprecated": false,
|
|
69187
69187
|
"deprecationMessage": "",
|
|
69188
|
-
"line":
|
|
69188
|
+
"line": 57,
|
|
69189
69189
|
"type": "string",
|
|
69190
69190
|
"decorators": []
|
|
69191
69191
|
},
|
|
@@ -69194,7 +69194,7 @@
|
|
|
69194
69194
|
"defaultValue": "false",
|
|
69195
69195
|
"deprecated": false,
|
|
69196
69196
|
"deprecationMessage": "",
|
|
69197
|
-
"line":
|
|
69197
|
+
"line": 68,
|
|
69198
69198
|
"type": "boolean",
|
|
69199
69199
|
"decorators": []
|
|
69200
69200
|
},
|
|
@@ -69204,7 +69204,7 @@
|
|
|
69204
69204
|
"deprecationMessage": "",
|
|
69205
69205
|
"rawdescription": "\n\nOptional data for templates passed as implicit context\n",
|
|
69206
69206
|
"description": "<p>Optional data for templates passed as implicit context</p>\n",
|
|
69207
|
-
"line":
|
|
69207
|
+
"line": 66,
|
|
69208
69208
|
"type": "any",
|
|
69209
69209
|
"decorators": []
|
|
69210
69210
|
},
|
|
@@ -69340,7 +69340,7 @@
|
|
|
69340
69340
|
"type": "number",
|
|
69341
69341
|
"optional": false,
|
|
69342
69342
|
"description": "",
|
|
69343
|
-
"line":
|
|
69343
|
+
"line": 55,
|
|
69344
69344
|
"modifierKind": [
|
|
69345
69345
|
126
|
|
69346
69346
|
]
|
|
@@ -69411,7 +69411,7 @@
|
|
|
69411
69411
|
"optional": false,
|
|
69412
69412
|
"returnType": "void",
|
|
69413
69413
|
"typeParameters": [],
|
|
69414
|
-
"line":
|
|
69414
|
+
"line": 108,
|
|
69415
69415
|
"deprecated": false,
|
|
69416
69416
|
"deprecationMessage": "",
|
|
69417
69417
|
"decorators": [
|
|
@@ -69448,7 +69448,7 @@
|
|
|
69448
69448
|
"optional": false,
|
|
69449
69449
|
"returnType": "boolean",
|
|
69450
69450
|
"typeParameters": [],
|
|
69451
|
-
"line":
|
|
69451
|
+
"line": 132,
|
|
69452
69452
|
"deprecated": false,
|
|
69453
69453
|
"deprecationMessage": "",
|
|
69454
69454
|
"modifierKind": [
|
|
@@ -69479,7 +69479,7 @@
|
|
|
69479
69479
|
"optional": false,
|
|
69480
69480
|
"returnType": "void",
|
|
69481
69481
|
"typeParameters": [],
|
|
69482
|
-
"line":
|
|
69482
|
+
"line": 121,
|
|
69483
69483
|
"deprecated": false,
|
|
69484
69484
|
"deprecationMessage": "",
|
|
69485
69485
|
"decorators": [
|
|
@@ -69516,7 +69516,7 @@
|
|
|
69516
69516
|
"optional": false,
|
|
69517
69517
|
"returnType": "void",
|
|
69518
69518
|
"typeParameters": [],
|
|
69519
|
-
"line":
|
|
69519
|
+
"line": 116,
|
|
69520
69520
|
"deprecated": false,
|
|
69521
69521
|
"deprecationMessage": "",
|
|
69522
69522
|
"decorators": [
|
|
@@ -69553,7 +69553,7 @@
|
|
|
69553
69553
|
"optional": false,
|
|
69554
69554
|
"returnType": "void",
|
|
69555
69555
|
"typeParameters": [],
|
|
69556
|
-
"line":
|
|
69556
|
+
"line": 86,
|
|
69557
69557
|
"deprecated": false,
|
|
69558
69558
|
"deprecationMessage": "",
|
|
69559
69559
|
"jsdoctags": [
|
|
@@ -69573,7 +69573,7 @@
|
|
|
69573
69573
|
"args": [
|
|
69574
69574
|
{
|
|
69575
69575
|
"name": "event",
|
|
69576
|
-
"type": "
|
|
69576
|
+
"type": "MouseEvent",
|
|
69577
69577
|
"deprecated": false,
|
|
69578
69578
|
"deprecationMessage": ""
|
|
69579
69579
|
}
|
|
@@ -69581,13 +69581,13 @@
|
|
|
69581
69581
|
"optional": false,
|
|
69582
69582
|
"returnType": "void",
|
|
69583
69583
|
"typeParameters": [],
|
|
69584
|
-
"line":
|
|
69584
|
+
"line": 93,
|
|
69585
69585
|
"deprecated": false,
|
|
69586
69586
|
"deprecationMessage": "",
|
|
69587
69587
|
"jsdoctags": [
|
|
69588
69588
|
{
|
|
69589
69589
|
"name": "event",
|
|
69590
|
-
"type": "
|
|
69590
|
+
"type": "MouseEvent",
|
|
69591
69591
|
"deprecated": false,
|
|
69592
69592
|
"deprecationMessage": "",
|
|
69593
69593
|
"tagName": {
|
|
@@ -69609,7 +69609,7 @@
|
|
|
69609
69609
|
"optional": false,
|
|
69610
69610
|
"returnType": "void",
|
|
69611
69611
|
"typeParameters": [],
|
|
69612
|
-
"line":
|
|
69612
|
+
"line": 128,
|
|
69613
69613
|
"deprecated": false,
|
|
69614
69614
|
"deprecationMessage": "",
|
|
69615
69615
|
"decorators": [
|
|
@@ -69633,6 +69633,26 @@
|
|
|
69633
69633
|
}
|
|
69634
69634
|
]
|
|
69635
69635
|
},
|
|
69636
|
+
{
|
|
69637
|
+
"name": "onPopoverMouseDown",
|
|
69638
|
+
"args": [],
|
|
69639
|
+
"optional": false,
|
|
69640
|
+
"returnType": "void",
|
|
69641
|
+
"typeParameters": [],
|
|
69642
|
+
"line": 99,
|
|
69643
|
+
"deprecated": false,
|
|
69644
|
+
"deprecationMessage": ""
|
|
69645
|
+
},
|
|
69646
|
+
{
|
|
69647
|
+
"name": "onPopoverMouseUp",
|
|
69648
|
+
"args": [],
|
|
69649
|
+
"optional": false,
|
|
69650
|
+
"returnType": "void",
|
|
69651
|
+
"typeParameters": [],
|
|
69652
|
+
"line": 103,
|
|
69653
|
+
"deprecated": false,
|
|
69654
|
+
"deprecationMessage": ""
|
|
69655
|
+
},
|
|
69636
69656
|
{
|
|
69637
69657
|
"name": "cleanUp",
|
|
69638
69658
|
"args": [],
|
|
@@ -69885,7 +69905,7 @@
|
|
|
69885
69905
|
],
|
|
69886
69906
|
"deprecated": false,
|
|
69887
69907
|
"deprecationMessage": "",
|
|
69888
|
-
"line":
|
|
69908
|
+
"line": 128
|
|
69889
69909
|
},
|
|
69890
69910
|
{
|
|
69891
69911
|
"name": "keyup",
|
|
@@ -69902,7 +69922,7 @@
|
|
|
69902
69922
|
],
|
|
69903
69923
|
"deprecated": false,
|
|
69904
69924
|
"deprecationMessage": "",
|
|
69905
|
-
"line":
|
|
69925
|
+
"line": 108
|
|
69906
69926
|
},
|
|
69907
69927
|
{
|
|
69908
69928
|
"name": "mouseenter",
|
|
@@ -69919,7 +69939,7 @@
|
|
|
69919
69939
|
],
|
|
69920
69940
|
"deprecated": false,
|
|
69921
69941
|
"deprecationMessage": "",
|
|
69922
|
-
"line":
|
|
69942
|
+
"line": 121
|
|
69923
69943
|
},
|
|
69924
69944
|
{
|
|
69925
69945
|
"name": "mouseleave",
|
|
@@ -69936,7 +69956,7 @@
|
|
|
69936
69956
|
],
|
|
69937
69957
|
"deprecated": false,
|
|
69938
69958
|
"deprecationMessage": "",
|
|
69939
|
-
"line":
|
|
69959
|
+
"line": 116
|
|
69940
69960
|
}
|
|
69941
69961
|
],
|
|
69942
69962
|
"standalone": false,
|
|
@@ -69944,7 +69964,7 @@
|
|
|
69944
69964
|
"description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { TooltipModule } from 'carbon-components-angular';</code></pre></div><p><a href=\"../../?path=/story/components-tooltip-definition--basic\">See demo</a></p>\n",
|
|
69945
69965
|
"rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { TooltipModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-tooltip-definition--basic)\n",
|
|
69946
69966
|
"type": "component",
|
|
69947
|
-
"sourceCode": "import {\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tElementRef,\n\tHostListener,\n\tInput,\n\tNgZone,\n\tRenderer2,\n\tTemplateRef\n} from \"@angular/core\";\nimport { PopoverContainer } from \"carbon-components-angular/popover\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { TooltipModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-tooltip-definition--basic)\n */\n@Component({\n\tselector: \"cds-tooltip-definition, ibm-tooltip-definition\",\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\ttemplate: `\n\t\t<button\n\t\t\tclass=\"cds--definition-term\"\n\t\t\t[attr.aria-controls]=\"id\"\n\t\t\t[attr.aria-expanded]=\"isOpen\"\n\t\t\t[attr.aria-describedby]=\"isOpen ? id : null\"\n\t\t\t(blur)=\"onBlur($event)\"\n\t\t\t(
|
|
69967
|
+
"sourceCode": "import {\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tElementRef,\n\tHostListener,\n\tInput,\n\tNgZone,\n\tRenderer2,\n\tTemplateRef\n} from \"@angular/core\";\nimport { PopoverContainer } from \"carbon-components-angular/popover\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { TooltipModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-tooltip-definition--basic)\n */\n@Component({\n\tselector: \"cds-tooltip-definition, ibm-tooltip-definition\",\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\ttemplate: `\n\t\t<button\n\t\t\tclass=\"cds--definition-term\"\n\t\t\t[attr.aria-controls]=\"id\"\n\t\t\t[attr.aria-expanded]=\"isOpen\"\n\t\t\t[attr.aria-describedby]=\"isOpen ? id : null\"\n\t\t\t(blur)=\"onBlur($event)\"\n\t\t\t(mousedown)=\"onClick($event)\"\n\t\t\ttype=\"button\">\n\t\t\t<ng-content></ng-content>\n\t\t</button>\n\t\t<span\n\t\t\t*ngIf=\"description\"\n\t\t\tclass=\"cds--popover\"\n\t\t\t[id]=\"id\"\n\t\t\t[attr.aria-hidden]=\"!isOpen\"\n\t\t\trole=\"tooltip\"\n\t\t\t(mousedown)=\"onPopoverMouseDown()\"\n\t\t\t(mouseup)=\"onPopoverMouseUp()\">\n\t\t\t<span class=\"cds--popover-content cds--definition-tooltip\" aria-live=\"polite\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(description)\">{{description}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(description)\" [ngTemplateOutlet]=\"description\" [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"></ng-template>\n\t\t\t\t<span *ngIf=\"autoAlign\" class=\"cds--popover-caret cds--popover--auto-align\"></span>\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!autoAlign\" class=\"cds--popover-caret\"></span>\n\t\t</span>\n\t`\n})\nexport class TooltipDefinition extends PopoverContainer {\n\tstatic tooltipCount = 0;\n\n\t@Input() id = `tooltip-definition-${TooltipDefinition.tooltipCount++}`;\n\n\t/**\n\t * The string or template content to be exposed by the tooltip.\n\t */\n\t@Input() description: string | TemplateRef<any>;\n\t/**\n\t * Optional data for templates passed as implicit context\n\t */\n\t@Input() templateContext: any;\n\n\t@Input() openOnHover = false;\n\n\t/**\n\t * Helper variable to ensure button blur doesn't fire on `click` of popover content\n\t */\n\tprivate isInteractingWithPopover = false;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected ngZone: NgZone,\n\t\tprotected renderer: Renderer2,\n\t\tprotected changeDetectorRef: ChangeDetectorRef\n\t) {\n\t\tsuper(elementRef, ngZone, renderer, changeDetectorRef);\n\t\tthis.highContrast = true;\n\t\tthis.dropShadow = false;\n\t}\n\n\tonBlur(event: Event) {\n\t\t// Only close if user is not interacting with popover content\n\t\tif (!this.isInteractingWithPopover) {\n\t\t\tthis.handleChange(false, event);\n\t\t}\n\t}\n\n\tonClick(event: MouseEvent) {\n\t\tif (event.button === 0) {\n\t\t\tthis.handleChange(!this.isOpen, event);\n\t\t}\n\t}\n\n\tonPopoverMouseDown() {\n\t\tthis.isInteractingWithPopover = true;\n\t}\n\n\tonPopoverMouseUp() {\n\t\tthis.isInteractingWithPopover = false;\n\t}\n\n\t@HostListener(\"keyup\", [\"$event\"])\n\thostkeys(event: KeyboardEvent) {\n\t\tif (this.isOpen && event.key === \"Escape\") {\n\t\t\tevent.stopPropagation();\n\t\t\tthis.handleChange(false, event);\n\t\t}\n\t}\n\n\t@HostListener(\"mouseleave\", [\"$event\"])\n\tmouseleave(event) {\n\t\tthis.handleChange(false, event);\n\t}\n\n\t@HostListener(\"mouseenter\", [\"$event\"])\n\tmouseenter(event) {\n\t\tif (this.openOnHover) {\n\t\t\tthis.handleChange(true, event);\n\t\t}\n\t}\n\n\t@HostListener(\"focusin\", [\"$event\"])\n\tonFocus(event) {\n\t\tthis.handleChange(true, event);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
|
|
69948
69968
|
"assetsDirs": [],
|
|
69949
69969
|
"styleUrlsData": "",
|
|
69950
69970
|
"stylesData": "",
|
|
@@ -69979,7 +69999,7 @@
|
|
|
69979
69999
|
"deprecationMessage": ""
|
|
69980
70000
|
}
|
|
69981
70001
|
],
|
|
69982
|
-
"line":
|
|
70002
|
+
"line": 73,
|
|
69983
70003
|
"jsdoctags": [
|
|
69984
70004
|
{
|
|
69985
70005
|
"name": "elementRef",
|
|
@@ -74911,31 +74931,31 @@
|
|
|
74911
74931
|
"name": "AutoAlignTemplate",
|
|
74912
74932
|
"ctype": "miscellaneous",
|
|
74913
74933
|
"subtype": "variable",
|
|
74914
|
-
"file": "src/
|
|
74934
|
+
"file": "src/toggletip/toggletip.stories.ts",
|
|
74915
74935
|
"deprecated": false,
|
|
74916
74936
|
"deprecationMessage": "",
|
|
74917
74937
|
"type": "",
|
|
74918
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t
|
|
74938
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t<span cdsToggletipLabel>Toggletip label</span>\n\t\t\t\t<cds-toggletip\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\">\n\t\t\t\t\t<button cdsToggletipButton>\n\t\t\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div cdsToggletipContent>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n\t\t\t\t\t\t\tdo eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<div cdsToggletipAction>\n\t\t\t\t\t\t\t<a href=\"#\" cdsLink>Link action</a>\n\t\t\t\t\t\t\t<button cdsButton size=\"sm\">Some button</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</cds-toggletip>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
|
|
74919
74939
|
},
|
|
74920
74940
|
{
|
|
74921
74941
|
"name": "AutoAlignTemplate",
|
|
74922
74942
|
"ctype": "miscellaneous",
|
|
74923
74943
|
"subtype": "variable",
|
|
74924
|
-
"file": "src/tooltip/
|
|
74944
|
+
"file": "src/tooltip/definition-tooptip.stories.ts",
|
|
74925
74945
|
"deprecated": false,
|
|
74926
74946
|
"deprecationMessage": "",
|
|
74927
74947
|
"type": "",
|
|
74928
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<cds-tooltip\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\
|
|
74948
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[openOnHover]=\"openOnHover\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
|
|
74929
74949
|
},
|
|
74930
74950
|
{
|
|
74931
74951
|
"name": "AutoAlignTemplate",
|
|
74932
74952
|
"ctype": "miscellaneous",
|
|
74933
74953
|
"subtype": "variable",
|
|
74934
|
-
"file": "src/
|
|
74954
|
+
"file": "src/tooltip/tooltip.stories.ts",
|
|
74935
74955
|
"deprecated": false,
|
|
74936
74956
|
"deprecationMessage": "",
|
|
74937
74957
|
"type": "",
|
|
74938
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t<
|
|
74958
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<cds-tooltip\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\t<button type=\"button\" class=\"tooltip-trigger\">\n\t\t\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-tooltip>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
|
|
74939
74959
|
},
|
|
74940
74960
|
{
|
|
74941
74961
|
"name": "basic",
|
|
@@ -75381,7 +75401,7 @@
|
|
|
75381
75401
|
"name": "Basic",
|
|
75382
75402
|
"ctype": "miscellaneous",
|
|
75383
75403
|
"subtype": "variable",
|
|
75384
|
-
"file": "src/
|
|
75404
|
+
"file": "src/tiles/clickable-tile.stories.ts",
|
|
75385
75405
|
"deprecated": false,
|
|
75386
75406
|
"deprecationMessage": "",
|
|
75387
75407
|
"type": "",
|
|
@@ -75391,7 +75411,7 @@
|
|
|
75391
75411
|
"name": "Basic",
|
|
75392
75412
|
"ctype": "miscellaneous",
|
|
75393
75413
|
"subtype": "variable",
|
|
75394
|
-
"file": "src/tiles/
|
|
75414
|
+
"file": "src/tiles/expandable-tile.stories.ts",
|
|
75395
75415
|
"deprecated": false,
|
|
75396
75416
|
"deprecationMessage": "",
|
|
75397
75417
|
"type": "",
|
|
@@ -75401,7 +75421,7 @@
|
|
|
75401
75421
|
"name": "Basic",
|
|
75402
75422
|
"ctype": "miscellaneous",
|
|
75403
75423
|
"subtype": "variable",
|
|
75404
|
-
"file": "src/tiles/
|
|
75424
|
+
"file": "src/tiles/tiles.stories.ts",
|
|
75405
75425
|
"deprecated": false,
|
|
75406
75426
|
"deprecationMessage": "",
|
|
75407
75427
|
"type": "",
|
|
@@ -75411,7 +75431,7 @@
|
|
|
75411
75431
|
"name": "Basic",
|
|
75412
75432
|
"ctype": "miscellaneous",
|
|
75413
75433
|
"subtype": "variable",
|
|
75414
|
-
"file": "src/
|
|
75434
|
+
"file": "src/theme/theme.stories.ts",
|
|
75415
75435
|
"deprecated": false,
|
|
75416
75436
|
"deprecationMessage": "",
|
|
75417
75437
|
"type": "",
|
|
@@ -75451,7 +75471,7 @@
|
|
|
75451
75471
|
"name": "Basic",
|
|
75452
75472
|
"ctype": "miscellaneous",
|
|
75453
75473
|
"subtype": "variable",
|
|
75454
|
-
"file": "src/
|
|
75474
|
+
"file": "src/toggletip/toggletip.stories.ts",
|
|
75455
75475
|
"deprecated": false,
|
|
75456
75476
|
"deprecationMessage": "",
|
|
75457
75477
|
"type": "",
|
|
@@ -75461,7 +75481,7 @@
|
|
|
75461
75481
|
"name": "Basic",
|
|
75462
75482
|
"ctype": "miscellaneous",
|
|
75463
75483
|
"subtype": "variable",
|
|
75464
|
-
"file": "src/tooltip/
|
|
75484
|
+
"file": "src/tooltip/definition-tooptip.stories.ts",
|
|
75465
75485
|
"deprecated": false,
|
|
75466
75486
|
"deprecationMessage": "",
|
|
75467
75487
|
"type": "",
|
|
@@ -75471,7 +75491,7 @@
|
|
|
75471
75491
|
"name": "Basic",
|
|
75472
75492
|
"ctype": "miscellaneous",
|
|
75473
75493
|
"subtype": "variable",
|
|
75474
|
-
"file": "src/
|
|
75494
|
+
"file": "src/tooltip/tooltip.stories.ts",
|
|
75475
75495
|
"deprecated": false,
|
|
75476
75496
|
"deprecationMessage": "",
|
|
75477
75497
|
"type": "",
|
|
@@ -78243,41 +78263,41 @@
|
|
|
78243
78263
|
"name": "Template",
|
|
78244
78264
|
"ctype": "miscellaneous",
|
|
78245
78265
|
"subtype": "variable",
|
|
78246
|
-
"file": "src/
|
|
78266
|
+
"file": "src/tiles/clickable-tile.stories.ts",
|
|
78247
78267
|
"deprecated": false,
|
|
78248
78268
|
"deprecationMessage": "",
|
|
78249
78269
|
"type": "",
|
|
78250
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<
|
|
78270
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-clickable-tile\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[href]=\"href\"\n\t\t\ttarget=\"_blank\">\n\t\t\tClick the tile to open the Carbon Design System\n\t\t\t<svg\n\t\t\t\tcdsClickableTileIcon\n\t\t\t\tcdsIcon=\"caret--right\"\n\t\t\t\tsize=\"16\">\n\t\t\t</svg>\n\t\t</cds-clickable-tile>\n\t`\n})"
|
|
78251
78271
|
},
|
|
78252
78272
|
{
|
|
78253
78273
|
"name": "Template",
|
|
78254
78274
|
"ctype": "miscellaneous",
|
|
78255
78275
|
"subtype": "variable",
|
|
78256
|
-
"file": "src/tiles/
|
|
78276
|
+
"file": "src/tiles/expandable-tile.stories.ts",
|
|
78257
78277
|
"deprecated": false,
|
|
78258
78278
|
"deprecationMessage": "",
|
|
78259
78279
|
"type": "",
|
|
78260
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-
|
|
78280
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-expandable-tile>\n\t\t\t<span cdsAboveFold style=\"height: 200px\">Above the fold content here</span>\n\t\t\t<span cdsBelowFold style=\"height: 400px\">Below the fold content here</span>\n\t\t</cds-expandable-tile>\n\t`\n})"
|
|
78261
78281
|
},
|
|
78262
78282
|
{
|
|
78263
78283
|
"name": "Template",
|
|
78264
78284
|
"ctype": "miscellaneous",
|
|
78265
78285
|
"subtype": "variable",
|
|
78266
|
-
"file": "src/tiles/
|
|
78286
|
+
"file": "src/tiles/tiles.stories.ts",
|
|
78267
78287
|
"deprecated": false,
|
|
78268
78288
|
"deprecationMessage": "",
|
|
78269
78289
|
"type": "",
|
|
78270
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-
|
|
78290
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tile>\n\t\t\tTile content goes here...\n\t\t</cds-tile>\n\t`\n})"
|
|
78271
78291
|
},
|
|
78272
78292
|
{
|
|
78273
78293
|
"name": "Template",
|
|
78274
78294
|
"ctype": "miscellaneous",
|
|
78275
78295
|
"subtype": "variable",
|
|
78276
|
-
"file": "src/
|
|
78296
|
+
"file": "src/theme/theme.stories.ts",
|
|
78277
78297
|
"deprecated": false,
|
|
78278
78298
|
"deprecationMessage": "",
|
|
78279
78299
|
"type": "",
|
|
78280
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<
|
|
78300
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div cdsTheme>\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>White theme</p>\n\t\t\t</div>\n\t\t</div>\n\t\t<div cdsTheme=\"g10\">\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>G10 theme</p>\n\t\t\t</div>\n\t\t</div>\n\t\t<div cdsTheme=\"g90\">\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>G90 theme</p>\n\t\t\t</div>\n\t\t</div>\n\t\t<div cdsTheme=\"g100\">\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>G100 theme</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.theme-section {\n\t\t\tpadding: 1rem;\n\t\t\tbackground: var(--cds-background);\n\t\t\tcolor: var(--cds-text-primary);\n\t\t}\n\t`]\n})"
|
|
78281
78301
|
},
|
|
78282
78302
|
{
|
|
78283
78303
|
"name": "Template",
|
|
@@ -78313,31 +78333,31 @@
|
|
|
78313
78333
|
"name": "Template",
|
|
78314
78334
|
"ctype": "miscellaneous",
|
|
78315
78335
|
"subtype": "variable",
|
|
78316
|
-
"file": "src/
|
|
78336
|
+
"file": "src/toggletip/toggletip.stories.ts",
|
|
78317
78337
|
"deprecated": false,
|
|
78318
78338
|
"deprecationMessage": "",
|
|
78319
78339
|
"type": "",
|
|
78320
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<
|
|
78340
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<span cdsToggletipLabel>Toggletip label</span>\n\t\t<cds-toggletip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[align]=\"align\"\n\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t(onOpen)=\"onOpen($event)\">\n\t\t\t<button cdsToggletipButton>\n\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t\t<div cdsToggletipContent>\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n\t\t\t\t\tdo eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n\t\t\t\t</p>\n\t\t\t\t<div cdsToggletipAction>\n\t\t\t\t\t<a href=\"#\" cdsLink>Link action</a>\n\t\t\t\t\t<button cdsButton size=\"sm\">Some button</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</cds-toggletip>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
|
|
78321
78341
|
},
|
|
78322
78342
|
{
|
|
78323
78343
|
"name": "Template",
|
|
78324
78344
|
"ctype": "miscellaneous",
|
|
78325
78345
|
"subtype": "variable",
|
|
78326
|
-
"file": "src/tooltip/
|
|
78346
|
+
"file": "src/tooltip/definition-tooptip.stories.ts",
|
|
78327
78347
|
"deprecated": false,
|
|
78328
78348
|
"deprecationMessage": "",
|
|
78329
78349
|
"type": "",
|
|
78330
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tooltip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[caret]=\"caret\"\n\t\t\t[align]=\"align\"\n\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t[description]=\"description\">\n\t\t\t
|
|
78350
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[openOnHover]=\"openOnHover\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
|
|
78331
78351
|
},
|
|
78332
78352
|
{
|
|
78333
78353
|
"name": "Template",
|
|
78334
78354
|
"ctype": "miscellaneous",
|
|
78335
78355
|
"subtype": "variable",
|
|
78336
|
-
"file": "src/
|
|
78356
|
+
"file": "src/tooltip/tooltip.stories.ts",
|
|
78337
78357
|
"deprecated": false,
|
|
78338
78358
|
"deprecationMessage": "",
|
|
78339
78359
|
"type": "",
|
|
78340
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<
|
|
78360
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tooltip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[caret]=\"caret\"\n\t\t\t[align]=\"align\"\n\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t[description]=\"description\">\n\t\t\t<button type=\"button\" class=\"tooltip-trigger\">\n\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t</cds-tooltip>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
|
|
78341
78361
|
},
|
|
78342
78362
|
{
|
|
78343
78363
|
"name": "Template",
|
|
@@ -78635,7 +78655,7 @@
|
|
|
78635
78655
|
"name": "WithAutoAlign",
|
|
78636
78656
|
"ctype": "miscellaneous",
|
|
78637
78657
|
"subtype": "variable",
|
|
78638
|
-
"file": "src/
|
|
78658
|
+
"file": "src/toggletip/toggletip.stories.ts",
|
|
78639
78659
|
"deprecated": false,
|
|
78640
78660
|
"deprecationMessage": "",
|
|
78641
78661
|
"type": "",
|
|
@@ -78645,7 +78665,7 @@
|
|
|
78645
78665
|
"name": "WithAutoAlign",
|
|
78646
78666
|
"ctype": "miscellaneous",
|
|
78647
78667
|
"subtype": "variable",
|
|
78648
|
-
"file": "src/tooltip/
|
|
78668
|
+
"file": "src/tooltip/definition-tooptip.stories.ts",
|
|
78649
78669
|
"deprecated": false,
|
|
78650
78670
|
"deprecationMessage": "",
|
|
78651
78671
|
"type": "",
|
|
@@ -78655,7 +78675,7 @@
|
|
|
78655
78675
|
"name": "WithAutoAlign",
|
|
78656
78676
|
"ctype": "miscellaneous",
|
|
78657
78677
|
"subtype": "variable",
|
|
78658
|
-
"file": "src/
|
|
78678
|
+
"file": "src/tooltip/tooltip.stories.ts",
|
|
78659
78679
|
"deprecated": false,
|
|
78660
78680
|
"deprecationMessage": "",
|
|
78661
78681
|
"type": "",
|
|
@@ -81275,22 +81295,22 @@
|
|
|
81275
81295
|
"defaultValue": "AutoAlignTemplate.bind({})"
|
|
81276
81296
|
}
|
|
81277
81297
|
],
|
|
81278
|
-
"src/
|
|
81298
|
+
"src/toggletip/toggletip.stories.ts": [
|
|
81279
81299
|
{
|
|
81280
81300
|
"name": "AutoAlignTemplate",
|
|
81281
81301
|
"ctype": "miscellaneous",
|
|
81282
81302
|
"subtype": "variable",
|
|
81283
|
-
"file": "src/
|
|
81303
|
+
"file": "src/toggletip/toggletip.stories.ts",
|
|
81284
81304
|
"deprecated": false,
|
|
81285
81305
|
"deprecationMessage": "",
|
|
81286
81306
|
"type": "",
|
|
81287
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t
|
|
81307
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t<span cdsToggletipLabel>Toggletip label</span>\n\t\t\t\t<cds-toggletip\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\">\n\t\t\t\t\t<button cdsToggletipButton>\n\t\t\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div cdsToggletipContent>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n\t\t\t\t\t\t\tdo eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<div cdsToggletipAction>\n\t\t\t\t\t\t\t<a href=\"#\" cdsLink>Link action</a>\n\t\t\t\t\t\t\t<button cdsButton size=\"sm\">Some button</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</cds-toggletip>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
|
|
81288
81308
|
},
|
|
81289
81309
|
{
|
|
81290
81310
|
"name": "Basic",
|
|
81291
81311
|
"ctype": "miscellaneous",
|
|
81292
81312
|
"subtype": "variable",
|
|
81293
|
-
"file": "src/
|
|
81313
|
+
"file": "src/toggletip/toggletip.stories.ts",
|
|
81294
81314
|
"deprecated": false,
|
|
81295
81315
|
"deprecationMessage": "",
|
|
81296
81316
|
"type": "",
|
|
@@ -81300,121 +81320,121 @@
|
|
|
81300
81320
|
"name": "Template",
|
|
81301
81321
|
"ctype": "miscellaneous",
|
|
81302
81322
|
"subtype": "variable",
|
|
81303
|
-
"file": "src/
|
|
81323
|
+
"file": "src/toggletip/toggletip.stories.ts",
|
|
81304
81324
|
"deprecated": false,
|
|
81305
81325
|
"deprecationMessage": "",
|
|
81306
81326
|
"type": "",
|
|
81307
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<
|
|
81327
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<span cdsToggletipLabel>Toggletip label</span>\n\t\t<cds-toggletip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[align]=\"align\"\n\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t(onOpen)=\"onOpen($event)\">\n\t\t\t<button cdsToggletipButton>\n\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t\t<div cdsToggletipContent>\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n\t\t\t\t\tdo eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n\t\t\t\t</p>\n\t\t\t\t<div cdsToggletipAction>\n\t\t\t\t\t<a href=\"#\" cdsLink>Link action</a>\n\t\t\t\t\t<button cdsButton size=\"sm\">Some button</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</cds-toggletip>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
|
|
81308
81328
|
},
|
|
81309
81329
|
{
|
|
81310
81330
|
"name": "WithAutoAlign",
|
|
81311
81331
|
"ctype": "miscellaneous",
|
|
81312
81332
|
"subtype": "variable",
|
|
81313
|
-
"file": "src/
|
|
81333
|
+
"file": "src/toggletip/toggletip.stories.ts",
|
|
81314
81334
|
"deprecated": false,
|
|
81315
81335
|
"deprecationMessage": "",
|
|
81316
81336
|
"type": "",
|
|
81317
81337
|
"defaultValue": "AutoAlignTemplate.bind({})"
|
|
81318
81338
|
}
|
|
81319
81339
|
],
|
|
81320
|
-
"src/tooltip/
|
|
81340
|
+
"src/tooltip/definition-tooptip.stories.ts": [
|
|
81321
81341
|
{
|
|
81322
81342
|
"name": "AutoAlignTemplate",
|
|
81323
81343
|
"ctype": "miscellaneous",
|
|
81324
81344
|
"subtype": "variable",
|
|
81325
|
-
"file": "src/tooltip/
|
|
81345
|
+
"file": "src/tooltip/definition-tooptip.stories.ts",
|
|
81326
81346
|
"deprecated": false,
|
|
81327
81347
|
"deprecationMessage": "",
|
|
81328
81348
|
"type": "",
|
|
81329
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<cds-tooltip\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\
|
|
81349
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[openOnHover]=\"openOnHover\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
|
|
81330
81350
|
},
|
|
81331
81351
|
{
|
|
81332
81352
|
"name": "Basic",
|
|
81333
81353
|
"ctype": "miscellaneous",
|
|
81334
81354
|
"subtype": "variable",
|
|
81335
|
-
"file": "src/tooltip/
|
|
81355
|
+
"file": "src/tooltip/definition-tooptip.stories.ts",
|
|
81336
81356
|
"deprecated": false,
|
|
81337
81357
|
"deprecationMessage": "",
|
|
81338
81358
|
"type": "",
|
|
81339
81359
|
"defaultValue": "Template.bind({})"
|
|
81340
81360
|
},
|
|
81341
81361
|
{
|
|
81342
|
-
"name": "
|
|
81362
|
+
"name": "Template",
|
|
81343
81363
|
"ctype": "miscellaneous",
|
|
81344
81364
|
"subtype": "variable",
|
|
81345
|
-
"file": "src/tooltip/
|
|
81365
|
+
"file": "src/tooltip/definition-tooptip.stories.ts",
|
|
81346
81366
|
"deprecated": false,
|
|
81347
81367
|
"deprecationMessage": "",
|
|
81348
81368
|
"type": "",
|
|
81349
|
-
"defaultValue": "
|
|
81369
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[openOnHover]=\"openOnHover\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
|
|
81350
81370
|
},
|
|
81351
81371
|
{
|
|
81352
|
-
"name": "
|
|
81372
|
+
"name": "WithAutoAlign",
|
|
81353
81373
|
"ctype": "miscellaneous",
|
|
81354
81374
|
"subtype": "variable",
|
|
81355
|
-
"file": "src/tooltip/
|
|
81375
|
+
"file": "src/tooltip/definition-tooptip.stories.ts",
|
|
81356
81376
|
"deprecated": false,
|
|
81357
81377
|
"deprecationMessage": "",
|
|
81358
81378
|
"type": "",
|
|
81359
|
-
"defaultValue": "(
|
|
81360
|
-
}
|
|
81379
|
+
"defaultValue": "AutoAlignTemplate.bind({})"
|
|
81380
|
+
}
|
|
81381
|
+
],
|
|
81382
|
+
"src/tooltip/tooltip.stories.ts": [
|
|
81361
81383
|
{
|
|
81362
|
-
"name": "
|
|
81384
|
+
"name": "AutoAlignTemplate",
|
|
81363
81385
|
"ctype": "miscellaneous",
|
|
81364
81386
|
"subtype": "variable",
|
|
81365
81387
|
"file": "src/tooltip/tooltip.stories.ts",
|
|
81366
81388
|
"deprecated": false,
|
|
81367
81389
|
"deprecationMessage": "",
|
|
81368
81390
|
"type": "",
|
|
81369
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tooltip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[caret]=\"caret\"\n\t\t\t[align]=\"align\"\n\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t[description]=\"description\">\n\t\t\t<button type=\"button\" class=\"tooltip-trigger\">\n\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t</cds-tooltip>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
|
|
81391
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<cds-tooltip\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\t<button type=\"button\" class=\"tooltip-trigger\">\n\t\t\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-tooltip>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
|
|
81370
81392
|
},
|
|
81371
81393
|
{
|
|
81372
|
-
"name": "
|
|
81394
|
+
"name": "Basic",
|
|
81373
81395
|
"ctype": "miscellaneous",
|
|
81374
81396
|
"subtype": "variable",
|
|
81375
81397
|
"file": "src/tooltip/tooltip.stories.ts",
|
|
81376
81398
|
"deprecated": false,
|
|
81377
81399
|
"deprecationMessage": "",
|
|
81378
81400
|
"type": "",
|
|
81379
|
-
"defaultValue": "
|
|
81380
|
-
}
|
|
81381
|
-
],
|
|
81382
|
-
"src/toggletip/toggletip.stories.ts": [
|
|
81401
|
+
"defaultValue": "Template.bind({})"
|
|
81402
|
+
},
|
|
81383
81403
|
{
|
|
81384
|
-
"name": "
|
|
81404
|
+
"name": "Ellipses",
|
|
81385
81405
|
"ctype": "miscellaneous",
|
|
81386
81406
|
"subtype": "variable",
|
|
81387
|
-
"file": "src/
|
|
81407
|
+
"file": "src/tooltip/tooltip.stories.ts",
|
|
81388
81408
|
"deprecated": false,
|
|
81389
81409
|
"deprecationMessage": "",
|
|
81390
81410
|
"type": "",
|
|
81391
|
-
"defaultValue": "
|
|
81411
|
+
"defaultValue": "EllipsesTemplate.bind({})"
|
|
81392
81412
|
},
|
|
81393
81413
|
{
|
|
81394
|
-
"name": "
|
|
81414
|
+
"name": "EllipsesTemplate",
|
|
81395
81415
|
"ctype": "miscellaneous",
|
|
81396
81416
|
"subtype": "variable",
|
|
81397
|
-
"file": "src/
|
|
81417
|
+
"file": "src/tooltip/tooltip.stories.ts",
|
|
81398
81418
|
"deprecated": false,
|
|
81399
81419
|
"deprecationMessage": "",
|
|
81400
81420
|
"type": "",
|
|
81401
|
-
"defaultValue": "
|
|
81421
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tooltip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[caret]=\"caret\"\n\t\t\t[align]=\"align\"\n\t\t\tdescription=\"Tooltip for ellipsis because I can and I am really really long\">\n\t\t\t<span class=\"overflowText\">\n\t\t\t\tTooltip for ellipsis because I can and I am really really long\n\t\t\t</span>\n\t\t</cds-tooltip>\n\t`,\n\tstyles: [`\n\t\t.overflowText {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twidth: 100px;\n\t\t\tdisplay: inline-block;\n\t\t}\n\t`]\n})"
|
|
81402
81422
|
},
|
|
81403
81423
|
{
|
|
81404
81424
|
"name": "Template",
|
|
81405
81425
|
"ctype": "miscellaneous",
|
|
81406
81426
|
"subtype": "variable",
|
|
81407
|
-
"file": "src/
|
|
81427
|
+
"file": "src/tooltip/tooltip.stories.ts",
|
|
81408
81428
|
"deprecated": false,
|
|
81409
81429
|
"deprecationMessage": "",
|
|
81410
81430
|
"type": "",
|
|
81411
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<
|
|
81431
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tooltip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[caret]=\"caret\"\n\t\t\t[align]=\"align\"\n\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t[description]=\"description\">\n\t\t\t<button type=\"button\" class=\"tooltip-trigger\">\n\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t</cds-tooltip>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
|
|
81412
81432
|
},
|
|
81413
81433
|
{
|
|
81414
81434
|
"name": "WithAutoAlign",
|
|
81415
81435
|
"ctype": "miscellaneous",
|
|
81416
81436
|
"subtype": "variable",
|
|
81417
|
-
"file": "src/
|
|
81437
|
+
"file": "src/tooltip/tooltip.stories.ts",
|
|
81418
81438
|
"deprecated": false,
|
|
81419
81439
|
"deprecationMessage": "",
|
|
81420
81440
|
"type": "",
|
|
@@ -84152,48 +84172,6 @@
|
|
|
84152
84172
|
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag\n\t\t\t[type]=\"type\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[size]=\"size\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tRead only\n\t\t</cds-tag>\n\t`\n})"
|
|
84153
84173
|
}
|
|
84154
84174
|
],
|
|
84155
|
-
"src/theme/theme.stories.ts": [
|
|
84156
|
-
{
|
|
84157
|
-
"name": "Basic",
|
|
84158
|
-
"ctype": "miscellaneous",
|
|
84159
|
-
"subtype": "variable",
|
|
84160
|
-
"file": "src/theme/theme.stories.ts",
|
|
84161
|
-
"deprecated": false,
|
|
84162
|
-
"deprecationMessage": "",
|
|
84163
|
-
"type": "",
|
|
84164
|
-
"defaultValue": "Template.bind({})"
|
|
84165
|
-
},
|
|
84166
|
-
{
|
|
84167
|
-
"name": "LayeredTemplate",
|
|
84168
|
-
"ctype": "miscellaneous",
|
|
84169
|
-
"subtype": "variable",
|
|
84170
|
-
"file": "src/theme/theme.stories.ts",
|
|
84171
|
-
"deprecated": false,
|
|
84172
|
-
"deprecationMessage": "",
|
|
84173
|
-
"type": "",
|
|
84174
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div cdsTheme>\n\t\t\t<article class=\"theme-layer-example\">\n\t\t\t\t<header class=\"theme-layer-header\">White theme</header>\n\t\t\t\t<div class=\"theme-with-layer\">Layer one</div>\n\t\t\t\t<div cdsLayer>\n\t\t\t\t\t<div class=\"theme-with-layer\">Layer two</div>\n\t\t\t\t\t<div cdsLayer>\n\t\t\t\t\t\t<div class=\"theme-with-layer\">Layer three</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</article>\n\t\t</div>\n\t\t<div cdsTheme=\"g10\">\n\t\t\t<article class=\"theme-layer-example\">\n\t\t\t\t<header class=\"theme-layer-header\">G10 theme</header>\n\t\t\t\t<div class=\"theme-with-layer\">Layer one</div>\n\t\t\t\t<div cdsLayer>\n\t\t\t\t\t<div class=\"theme-with-layer\">Layer two</div>\n\t\t\t\t\t<div cdsLayer>\n\t\t\t\t\t\t<div class=\"theme-with-layer\">Layer three</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</article>\n\t\t</div>\n\t\t<div cdsTheme=\"g90\">\n\t\t\t<article class=\"theme-layer-example\">\n\t\t\t\t<header class=\"theme-layer-header\">G90 theme</header>\n\t\t\t\t<div class=\"theme-with-layer\">Layer one</div>\n\t\t\t\t<div cdsLayer>\n\t\t\t\t\t<div class=\"theme-with-layer\">Layer two</div>\n\t\t\t\t\t<div cdsLayer>\n\t\t\t\t\t\t<div class=\"theme-with-layer\">Layer three</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</article>\n\t\t</div>\n\t\t<div cdsTheme=\"g100\">\n\t\t\t<article class=\"theme-layer-example\">\n\t\t\t\t<header class=\"theme-layer-header\">G100 theme</header>\n\t\t\t\t<div class=\"theme-with-layer\">Layer one</div>\n\t\t\t\t<div cdsLayer>\n\t\t\t\t\t<div class=\"theme-with-layer\">Layer two</div>\n\t\t\t\t\t<div cdsLayer>\n\t\t\t\t\t\t<div class=\"theme-with-layer\">Layer three</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</article>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.theme-layer-example {\n\t\t\tpadding: 1rem;\n\t\t\tbackground: var(--cds-background);\n\t\t\tcolor: var(--cds-text-primary);\n\t\t}\n\t\t.theme-layer-header {\n\t\t\tmargin-bottom: 1rem;\n\t\t}\n\t\t.theme-with-layer {\n\t\t\tpadding: 1rem;\n\t\t\tbackground: var(--cds-layer);\n\t\t\tcolor: var(--cds-text-primary);\n\t\t}\n\t`]\n})"
|
|
84175
|
-
},
|
|
84176
|
-
{
|
|
84177
|
-
"name": "Template",
|
|
84178
|
-
"ctype": "miscellaneous",
|
|
84179
|
-
"subtype": "variable",
|
|
84180
|
-
"file": "src/theme/theme.stories.ts",
|
|
84181
|
-
"deprecated": false,
|
|
84182
|
-
"deprecationMessage": "",
|
|
84183
|
-
"type": "",
|
|
84184
|
-
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div cdsTheme>\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>White theme</p>\n\t\t\t</div>\n\t\t</div>\n\t\t<div cdsTheme=\"g10\">\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>G10 theme</p>\n\t\t\t</div>\n\t\t</div>\n\t\t<div cdsTheme=\"g90\">\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>G90 theme</p>\n\t\t\t</div>\n\t\t</div>\n\t\t<div cdsTheme=\"g100\">\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>G100 theme</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.theme-section {\n\t\t\tpadding: 1rem;\n\t\t\tbackground: var(--cds-background);\n\t\t\tcolor: var(--cds-text-primary);\n\t\t}\n\t`]\n})"
|
|
84185
|
-
},
|
|
84186
|
-
{
|
|
84187
|
-
"name": "WithLayer",
|
|
84188
|
-
"ctype": "miscellaneous",
|
|
84189
|
-
"subtype": "variable",
|
|
84190
|
-
"file": "src/theme/theme.stories.ts",
|
|
84191
|
-
"deprecated": false,
|
|
84192
|
-
"deprecationMessage": "",
|
|
84193
|
-
"type": "",
|
|
84194
|
-
"defaultValue": "LayeredTemplate.bind({})"
|
|
84195
|
-
}
|
|
84196
|
-
],
|
|
84197
84175
|
"src/tiles/clickable-tile.stories.ts": [
|
|
84198
84176
|
{
|
|
84199
84177
|
"name": "Basic",
|
|
@@ -84360,6 +84338,48 @@
|
|
|
84360
84338
|
"defaultValue": "LayerTemplate.bind({})"
|
|
84361
84339
|
}
|
|
84362
84340
|
],
|
|
84341
|
+
"src/theme/theme.stories.ts": [
|
|
84342
|
+
{
|
|
84343
|
+
"name": "Basic",
|
|
84344
|
+
"ctype": "miscellaneous",
|
|
84345
|
+
"subtype": "variable",
|
|
84346
|
+
"file": "src/theme/theme.stories.ts",
|
|
84347
|
+
"deprecated": false,
|
|
84348
|
+
"deprecationMessage": "",
|
|
84349
|
+
"type": "",
|
|
84350
|
+
"defaultValue": "Template.bind({})"
|
|
84351
|
+
},
|
|
84352
|
+
{
|
|
84353
|
+
"name": "LayeredTemplate",
|
|
84354
|
+
"ctype": "miscellaneous",
|
|
84355
|
+
"subtype": "variable",
|
|
84356
|
+
"file": "src/theme/theme.stories.ts",
|
|
84357
|
+
"deprecated": false,
|
|
84358
|
+
"deprecationMessage": "",
|
|
84359
|
+
"type": "",
|
|
84360
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div cdsTheme>\n\t\t\t<article class=\"theme-layer-example\">\n\t\t\t\t<header class=\"theme-layer-header\">White theme</header>\n\t\t\t\t<div class=\"theme-with-layer\">Layer one</div>\n\t\t\t\t<div cdsLayer>\n\t\t\t\t\t<div class=\"theme-with-layer\">Layer two</div>\n\t\t\t\t\t<div cdsLayer>\n\t\t\t\t\t\t<div class=\"theme-with-layer\">Layer three</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</article>\n\t\t</div>\n\t\t<div cdsTheme=\"g10\">\n\t\t\t<article class=\"theme-layer-example\">\n\t\t\t\t<header class=\"theme-layer-header\">G10 theme</header>\n\t\t\t\t<div class=\"theme-with-layer\">Layer one</div>\n\t\t\t\t<div cdsLayer>\n\t\t\t\t\t<div class=\"theme-with-layer\">Layer two</div>\n\t\t\t\t\t<div cdsLayer>\n\t\t\t\t\t\t<div class=\"theme-with-layer\">Layer three</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</article>\n\t\t</div>\n\t\t<div cdsTheme=\"g90\">\n\t\t\t<article class=\"theme-layer-example\">\n\t\t\t\t<header class=\"theme-layer-header\">G90 theme</header>\n\t\t\t\t<div class=\"theme-with-layer\">Layer one</div>\n\t\t\t\t<div cdsLayer>\n\t\t\t\t\t<div class=\"theme-with-layer\">Layer two</div>\n\t\t\t\t\t<div cdsLayer>\n\t\t\t\t\t\t<div class=\"theme-with-layer\">Layer three</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</article>\n\t\t</div>\n\t\t<div cdsTheme=\"g100\">\n\t\t\t<article class=\"theme-layer-example\">\n\t\t\t\t<header class=\"theme-layer-header\">G100 theme</header>\n\t\t\t\t<div class=\"theme-with-layer\">Layer one</div>\n\t\t\t\t<div cdsLayer>\n\t\t\t\t\t<div class=\"theme-with-layer\">Layer two</div>\n\t\t\t\t\t<div cdsLayer>\n\t\t\t\t\t\t<div class=\"theme-with-layer\">Layer three</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</article>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.theme-layer-example {\n\t\t\tpadding: 1rem;\n\t\t\tbackground: var(--cds-background);\n\t\t\tcolor: var(--cds-text-primary);\n\t\t}\n\t\t.theme-layer-header {\n\t\t\tmargin-bottom: 1rem;\n\t\t}\n\t\t.theme-with-layer {\n\t\t\tpadding: 1rem;\n\t\t\tbackground: var(--cds-layer);\n\t\t\tcolor: var(--cds-text-primary);\n\t\t}\n\t`]\n})"
|
|
84361
|
+
},
|
|
84362
|
+
{
|
|
84363
|
+
"name": "Template",
|
|
84364
|
+
"ctype": "miscellaneous",
|
|
84365
|
+
"subtype": "variable",
|
|
84366
|
+
"file": "src/theme/theme.stories.ts",
|
|
84367
|
+
"deprecated": false,
|
|
84368
|
+
"deprecationMessage": "",
|
|
84369
|
+
"type": "",
|
|
84370
|
+
"defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div cdsTheme>\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>White theme</p>\n\t\t\t</div>\n\t\t</div>\n\t\t<div cdsTheme=\"g10\">\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>G10 theme</p>\n\t\t\t</div>\n\t\t</div>\n\t\t<div cdsTheme=\"g90\">\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>G90 theme</p>\n\t\t\t</div>\n\t\t</div>\n\t\t<div cdsTheme=\"g100\">\n\t\t\t<div class=\"theme-section\">\n\t\t\t\t<p>G100 theme</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.theme-section {\n\t\t\tpadding: 1rem;\n\t\t\tbackground: var(--cds-background);\n\t\t\tcolor: var(--cds-text-primary);\n\t\t}\n\t`]\n})"
|
|
84371
|
+
},
|
|
84372
|
+
{
|
|
84373
|
+
"name": "WithLayer",
|
|
84374
|
+
"ctype": "miscellaneous",
|
|
84375
|
+
"subtype": "variable",
|
|
84376
|
+
"file": "src/theme/theme.stories.ts",
|
|
84377
|
+
"deprecated": false,
|
|
84378
|
+
"deprecationMessage": "",
|
|
84379
|
+
"type": "",
|
|
84380
|
+
"defaultValue": "LayeredTemplate.bind({})"
|
|
84381
|
+
}
|
|
84382
|
+
],
|
|
84363
84383
|
"src/timepicker/timepicker.stories.ts": [
|
|
84364
84384
|
{
|
|
84365
84385
|
"name": "Basic",
|
|
@@ -93030,8 +93050,8 @@
|
|
|
93030
93050
|
"type": "component",
|
|
93031
93051
|
"linktype": "component",
|
|
93032
93052
|
"name": "TooltipDefinition",
|
|
93033
|
-
"coveragePercent":
|
|
93034
|
-
"coverageCount": "15/
|
|
93053
|
+
"coveragePercent": 38,
|
|
93054
|
+
"coverageCount": "15/39",
|
|
93035
93055
|
"status": "medium"
|
|
93036
93056
|
},
|
|
93037
93057
|
{
|