@siemens/ix-docs 4.0.0 → 4.2.0

package/build/docs/autogenerated/api/ix-pagination/api.mdx

@@ -68,6 +68,30 @@ Will be set as aria-label on the nested HTML button element`}</ReactMarkdown>
   </ApiTable.Code>
 
 
+</ApiTable>
+<ApiTable id="property-ariaLabelPageSelection">
+  <ApiTable.PropertyHeader name="ariaLabelPageSelection" singleFramework="">
+      <SinceTag message={`4.1.0`} />
+      
+  </ApiTable.PropertyHeader>
+
+  <ApiTable.Text name="Description">
+    <ReactMarkdown>{`ARIA label for the page selection input
+Will be set as aria-label on the nested HTML input element`}</ReactMarkdown>
+  </ApiTable.Text>
+
+  <ApiTable.Code name="Attribute">
+    {`aria-label-page-selection`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Type">
+   {`string`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Default">
+    {`'Page selection input'`}
+  </ApiTable.Code>
+
 </ApiTable>
 <ApiTable id="property-count">
   <ApiTable.PropertyHeader name="count" singleFramework="">

package/build/docs/autogenerated/api/ix-pagination/props.mdx

@@ -59,6 +59,30 @@ Will be set as aria-label on the nested HTML button element`}</ReactMarkdown>
   </ApiTable.Code>
 
 
+</ApiTable>
+<ApiTable id="property-ariaLabelPageSelection">
+  <ApiTable.PropertyHeader name="ariaLabelPageSelection" singleFramework="">
+      <SinceTag message={`4.1.0`} />
+      
+  </ApiTable.PropertyHeader>
+
+  <ApiTable.Text name="Description">
+    <ReactMarkdown>{`ARIA label for the page selection input
+Will be set as aria-label on the nested HTML input element`}</ReactMarkdown>
+  </ApiTable.Text>
+
+  <ApiTable.Code name="Attribute">
+    {`aria-label-page-selection`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Type">
+   {`string`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Default">
+    {`'Page selection input'`}
+  </ApiTable.Code>
+
 </ApiTable>
 <ApiTable id="property-count">
   <ApiTable.PropertyHeader name="count" singleFramework="">

package/build/docs/autogenerated/api/ix-select/api.mdx

@@ -32,6 +32,7 @@ import ReactMarkdown from 'react-markdown';
 <ApiTable id="property-ariaLabelChevronDownIconButton">
   <ApiTable.PropertyHeader name="ariaLabelChevronDownIconButton" singleFramework="">
       <SinceTag message={`3.2.0`} />
+      
   </ApiTable.PropertyHeader>
 
   <ApiTable.Text name="Description">
@@ -47,6 +48,9 @@ Will be set as aria-label on the nested HTML button element`}</ReactMarkdown>
    {`string | undefined`}
   </ApiTable.Code>
 
+  <ApiTable.Code name="Default">
+    {`'Open select dropdown'`}
+  </ApiTable.Code>
 
 </ApiTable>
 <ApiTable id="property-ariaLabelClearIconButton">
@@ -68,6 +72,28 @@ Will be set as aria-label on the nested HTML button element`}</ReactMarkdown>
   </ApiTable.Code>
 
 
+</ApiTable>
+<ApiTable id="property-collapseMultipleSelection">
+  <ApiTable.PropertyHeader name="collapseMultipleSelection" singleFramework="">
+      
+  </ApiTable.PropertyHeader>
+
+  <ApiTable.Text name="Description">
+    <ReactMarkdown>{`Show "all" chip when all items are selected in multiple mode`}</ReactMarkdown>
+  </ApiTable.Text>
+
+  <ApiTable.Code name="Attribute">
+    {`collapse-multiple-selection`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Type">
+   {`boolean`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Default">
+    {`false`}
+  </ApiTable.Code>
+
 </ApiTable>
 <ApiTable id="property-disabled">
   <ApiTable.PropertyHeader name="disabled" singleFramework="">
@@ -189,6 +215,28 @@ By default the maximum width of the dropdown element is set to 100%.`}</ReactMar
     {`false`}
   </ApiTable.Code>
 
+</ApiTable>
+<ApiTable id="property-i18nAllSelected">
+  <ApiTable.PropertyHeader name="i18nAllSelected" singleFramework="">
+      
+  </ApiTable.PropertyHeader>
+
+  <ApiTable.Text name="Description">
+    <ReactMarkdown>{`Chip label for all selected items in multiple mode.`}</ReactMarkdown>
+  </ApiTable.Text>
+
+  <ApiTable.Code name="Attribute">
+    {`i18n-all-selected`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Type">
+   {`string`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Default">
+    {`'All'`}
+  </ApiTable.Code>
+
 </ApiTable>
 <ApiTable id="property-i18nNoMatches">
   <ApiTable.PropertyHeader name="i18nNoMatches" singleFramework="">

package/build/docs/autogenerated/api/ix-select/props.mdx

@@ -23,6 +23,7 @@
 <ApiTable id="property-ariaLabelChevronDownIconButton">
   <ApiTable.PropertyHeader name="ariaLabelChevronDownIconButton" singleFramework="">
       <SinceTag message={`3.2.0`} />
+      
   </ApiTable.PropertyHeader>
 
   <ApiTable.Text name="Description">
@@ -38,6 +39,9 @@ Will be set as aria-label on the nested HTML button element`}</ReactMarkdown>
    {`string | undefined`}
   </ApiTable.Code>
 
+  <ApiTable.Code name="Default">
+    {`'Open select dropdown'`}
+  </ApiTable.Code>
 
 </ApiTable>
 <ApiTable id="property-ariaLabelClearIconButton">
@@ -59,6 +63,28 @@ Will be set as aria-label on the nested HTML button element`}</ReactMarkdown>
   </ApiTable.Code>
 
 
+</ApiTable>
+<ApiTable id="property-collapseMultipleSelection">
+  <ApiTable.PropertyHeader name="collapseMultipleSelection" singleFramework="">
+      
+  </ApiTable.PropertyHeader>
+
+  <ApiTable.Text name="Description">
+    <ReactMarkdown>{`Show "all" chip when all items are selected in multiple mode`}</ReactMarkdown>
+  </ApiTable.Text>
+
+  <ApiTable.Code name="Attribute">
+    {`collapse-multiple-selection`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Type">
+   {`boolean`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Default">
+    {`false`}
+  </ApiTable.Code>
+
 </ApiTable>
 <ApiTable id="property-disabled">
   <ApiTable.PropertyHeader name="disabled" singleFramework="">
@@ -180,6 +206,28 @@ By default the maximum width of the dropdown element is set to 100%.`}</ReactMar
     {`false`}
   </ApiTable.Code>
 
+</ApiTable>
+<ApiTable id="property-i18nAllSelected">
+  <ApiTable.PropertyHeader name="i18nAllSelected" singleFramework="">
+      
+  </ApiTable.PropertyHeader>
+
+  <ApiTable.Text name="Description">
+    <ReactMarkdown>{`Chip label for all selected items in multiple mode.`}</ReactMarkdown>
+  </ApiTable.Text>
+
+  <ApiTable.Code name="Attribute">
+    {`i18n-all-selected`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Type">
+   {`string`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Default">
+    {`'All'`}
+  </ApiTable.Code>
+
 </ApiTable>
 <ApiTable id="property-i18nNoMatches">
   <ApiTable.PropertyHeader name="i18nNoMatches" singleFramework="">

package/build/docs/autogenerated/api/ix-split-button/api.mdx

@@ -66,6 +66,52 @@ import ReactMarkdown from 'react-markdown';
     {`'both'`}
   </ApiTable.Code>
 
+</ApiTable>
+<ApiTable id="property-disableButton">
+  <ApiTable.PropertyHeader name="disableButton" singleFramework="">
+      <SinceTag message={`4.1.0`} />
+      
+  </ApiTable.PropertyHeader>
+
+  <ApiTable.Text name="Description">
+    <ReactMarkdown>{`Disables only the main button while keeping the dropdown trigger enabled`}</ReactMarkdown>
+  </ApiTable.Text>
+
+  <ApiTable.Code name="Attribute">
+    {`disable-button`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Type">
+   {`boolean`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Default">
+    {`false`}
+  </ApiTable.Code>
+
+</ApiTable>
+<ApiTable id="property-disableDropdownButton">
+  <ApiTable.PropertyHeader name="disableDropdownButton" singleFramework="">
+      <SinceTag message={`4.1.0`} />
+      
+  </ApiTable.PropertyHeader>
+
+  <ApiTable.Text name="Description">
+    <ReactMarkdown>{`Disables only the dropdown trigger while keeping the main button enabled`}</ReactMarkdown>
+  </ApiTable.Text>
+
+  <ApiTable.Code name="Attribute">
+    {`disable-dropdown-button`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Type">
+   {`boolean`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Default">
+    {`false`}
+  </ApiTable.Code>
+
 </ApiTable>
 <ApiTable id="property-disabled">
   <ApiTable.PropertyHeader name="disabled" singleFramework="">

package/build/docs/autogenerated/api/ix-split-button/props.mdx

@@ -57,6 +57,52 @@
     {`'both'`}
   </ApiTable.Code>
 
+</ApiTable>
+<ApiTable id="property-disableButton">
+  <ApiTable.PropertyHeader name="disableButton" singleFramework="">
+      <SinceTag message={`4.1.0`} />
+      
+  </ApiTable.PropertyHeader>
+
+  <ApiTable.Text name="Description">
+    <ReactMarkdown>{`Disables only the main button while keeping the dropdown trigger enabled`}</ReactMarkdown>
+  </ApiTable.Text>
+
+  <ApiTable.Code name="Attribute">
+    {`disable-button`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Type">
+   {`boolean`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Default">
+    {`false`}
+  </ApiTable.Code>
+
+</ApiTable>
+<ApiTable id="property-disableDropdownButton">
+  <ApiTable.PropertyHeader name="disableDropdownButton" singleFramework="">
+      <SinceTag message={`4.1.0`} />
+      
+  </ApiTable.PropertyHeader>
+
+  <ApiTable.Text name="Description">
+    <ReactMarkdown>{`Disables only the dropdown trigger while keeping the main button enabled`}</ReactMarkdown>
+  </ApiTable.Text>
+
+  <ApiTable.Code name="Attribute">
+    {`disable-dropdown-button`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Type">
+   {`boolean`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Default">
+    {`false`}
+  </ApiTable.Code>
+
 </ApiTable>
 <ApiTable id="property-disabled">
   <ApiTable.PropertyHeader name="disabled" singleFramework="">

package/build/docs/autogenerated/api/ix-time-input/api.mdx

@@ -482,6 +482,51 @@ See [https://moment.github.io/luxon/#/formatting?id=table-of-tokens](https://mom
   </ApiTable.Code>
 
 
+</ApiTable>
+<ApiTable id="property-suppressSubmitOnEnter">
+  <ApiTable.PropertyHeader name="suppressSubmitOnEnter" singleFramework="">
+      
+  </ApiTable.PropertyHeader>
+
+  <ApiTable.Text name="Description">
+    <ReactMarkdown>{`If false, pressing Enter will submit the form (if inside a form).
+Set to true to suppress submit on Enter.`}</ReactMarkdown>
+  </ApiTable.Text>
+
+  <ApiTable.Code name="Attribute">
+    {`suppress-submit-on-enter`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Type">
+   {`boolean`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Default">
+    {`false`}
+  </ApiTable.Code>
+
+</ApiTable>
+<ApiTable id="property-textAlignment">
+  <ApiTable.PropertyHeader name="textAlignment" singleFramework="">
+      
+  </ApiTable.PropertyHeader>
+
+  <ApiTable.Text name="Description">
+    <ReactMarkdown>{`Text alignment within the time input. 'start' aligns the text to the start of the input, 'end' aligns the text to the end of the input.`}</ReactMarkdown>
+  </ApiTable.Text>
+
+  <ApiTable.Code name="Attribute">
+    {`text-alignment`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Type">
+   {`"end" | "start"`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Default">
+    {`'start'`}
+  </ApiTable.Code>
+
 </ApiTable>
 <ApiTable id="property-validText">
   <ApiTable.PropertyHeader name="validText" singleFramework="">

package/build/docs/autogenerated/api/ix-time-input/props.mdx

@@ -473,6 +473,51 @@ See [https://moment.github.io/luxon/#/formatting?id=table-of-tokens](https://mom
   </ApiTable.Code>
 
 
+</ApiTable>
+<ApiTable id="property-suppressSubmitOnEnter">
+  <ApiTable.PropertyHeader name="suppressSubmitOnEnter" singleFramework="">
+      
+  </ApiTable.PropertyHeader>
+
+  <ApiTable.Text name="Description">
+    <ReactMarkdown>{`If false, pressing Enter will submit the form (if inside a form).
+Set to true to suppress submit on Enter.`}</ReactMarkdown>
+  </ApiTable.Text>
+
+  <ApiTable.Code name="Attribute">
+    {`suppress-submit-on-enter`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Type">
+   {`boolean`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Default">
+    {`false`}
+  </ApiTable.Code>
+
+</ApiTable>
+<ApiTable id="property-textAlignment">
+  <ApiTable.PropertyHeader name="textAlignment" singleFramework="">
+      
+  </ApiTable.PropertyHeader>
+
+  <ApiTable.Text name="Description">
+    <ReactMarkdown>{`Text alignment within the time input. 'start' aligns the text to the start of the input, 'end' aligns the text to the end of the input.`}</ReactMarkdown>
+  </ApiTable.Text>
+
+  <ApiTable.Code name="Attribute">
+    {`text-alignment`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Type">
+   {`"end" | "start"`}
+  </ApiTable.Code>
+
+  <ApiTable.Code name="Default">
+    {`'start'`}
+  </ApiTable.Code>
+
 </ApiTable>
 <ApiTable id="property-validText">
   <ApiTable.PropertyHeader name="validText" singleFramework="">

package/build/docs/autogenerated/api/ix-time-picker/api.mdx

@@ -324,7 +324,6 @@ Note: Formats that combine date and time (like f or F) are not supported. Timest
 </ApiTable>
 <ApiTable id="property-time">
   <ApiTable.PropertyHeader name="time" singleFramework="">
-      
   </ApiTable.PropertyHeader>
 
   <ApiTable.Text name="Description">
@@ -337,12 +336,9 @@ Format has to match the \`format\` property.`}</ReactMarkdown>
   </ApiTable.Code>
 
   <ApiTable.Code name="Type">
-   {`string`}
+   {`string | undefined`}
   </ApiTable.Code>
 
-  <ApiTable.Code name="Default">
-    {`DateTime.now().toFormat(this.format)`}
-  </ApiTable.Code>
 
 </ApiTable>
 

package/build/docs/autogenerated/api/ix-time-picker/props.mdx

@@ -315,7 +315,6 @@ Note: Formats that combine date and time (like f or F) are not supported. Timest
 </ApiTable>
 <ApiTable id="property-time">
   <ApiTable.PropertyHeader name="time" singleFramework="">
-      
   </ApiTable.PropertyHeader>
 
   <ApiTable.Text name="Description">
@@ -328,11 +327,8 @@ Format has to match the \`format\` property.`}</ReactMarkdown>
   </ApiTable.Code>
 
   <ApiTable.Code name="Type">
-   {`string`}
+   {`string | undefined`}
   </ApiTable.Code>
 
-  <ApiTable.Code name="Default">
-    {`DateTime.now().toFormat(this.format)`}
-  </ApiTable.Code>
 
 </ApiTable>

package/build/docs/autogenerated/api/ix-tooltip/api.mdx

@@ -106,7 +106,7 @@ If the selected placement doesn't have enough space, the tooltip will be reposit
   </ApiTable.SlotHeader>
 
   <ApiTable.Text name="Description">
-    <ReactMarkdown>{ `Icon of tooltip title` }</ReactMarkdown>
+    <ReactMarkdown>{ `Icon displayed next to the tooltip title. The icon will be displayed as 16x16px.` }</ReactMarkdown>
   </ApiTable.Text>
 </ApiTable>
 

package/build/docs/autogenerated/api/ix-tooltip/slots.mdx

@@ -11,7 +11,7 @@
   </ApiTable.SlotHeader>
 
   <ApiTable.Text name="Description">
-    <ReactMarkdown>{ `Icon of tooltip title` }</ReactMarkdown>
+    <ReactMarkdown>{ `Icon displayed next to the tooltip title. The icon will be displayed as 16x16px.` }</ReactMarkdown>
   </ApiTable.Text>
 </ApiTable>
 

package/build/docs/autogenerated/playground/modal-close.mdx

@@ -0,0 +1,52 @@
+import Playground from '@site/src/components/Playground'
+
+import ModalClose_tsx_react from '@site/docs/autogenerated/usage/react/modal-close.tsx.md';
+import ModalClose_ts_angular from '@site/docs/autogenerated/usage/angular/modal-close.ts.md';
+import ModalClose_html_angular from '@site/docs/autogenerated/usage/angular/modal-close.html.md';
+import ModalClose_ts_angular_standalone from '@site/docs/autogenerated/usage/angular_standalone/modal-close.ts.md';
+import ModalClose_html_angular_standalone from '@site/docs/autogenerated/usage/angular_standalone/modal-close.html.md';
+import ModalClose_vue_vue from '@site/docs/autogenerated/usage/vue/modal-close.vue.md';
+import ModalClose_html_html from '@site/docs/autogenerated/usage/html/modal-close.html.md';
+
+<Playground
+  name="modal-close"
+  
+  source={{react: {
+             'modal-close.tsx': ModalClose_tsx_react,
+           },
+           angular: {
+             'modal-close.ts': ModalClose_ts_angular,
+             'modal-close.html': ModalClose_html_angular,
+           },
+           angular_standalone: {
+             'modal-close.ts': ModalClose_ts_angular_standalone,
+             'modal-close.html': ModalClose_html_angular_standalone,
+           },
+           vue: {
+             'modal-close.vue': ModalClose_vue_vue,
+           },
+           html: {
+             'modal-close.html': ModalClose_html_html,
+           }
+}}
+  files={{react: {
+            'modal-close.tsx': 'react/modal-close.tsx',
+          },
+          angular: {
+            'modal-close.ts': 'angular/modal-close.ts',
+            'modal-close.html': 'angular/modal-close.html',
+          },
+          angular_standalone: {
+            'modal-close.ts': 'angular_standalone/modal-close.ts',
+            'modal-close.html': 'angular_standalone/modal-close.html',
+          },
+          vue: {
+            'modal-close.vue': 'vue/modal-close.vue',
+          },
+          html: {
+            'modal-close.html': 'html/modal-close.html',
+          }
+}}
+  height={props.height}
+  onlyFramework={props.onlyFramework}
+></Playground>

package/build/docs/autogenerated/playground/split-button.mdx

@@ -1,44 +1,59 @@
 import Playground from '@site/src/components/Playground'
 
 import SplitButton_tsx_react from '@site/docs/autogenerated/usage/react/split-button.tsx.md';
+import SplitButton_scoped_css_react from '@site/docs/autogenerated/usage/react/split-button.scoped.css.md';
 import SplitButton_ts_angular from '@site/docs/autogenerated/usage/angular/split-button.ts.md';
+import SplitButton_css_angular from '@site/docs/autogenerated/usage/angular/split-button.css.md';
 import SplitButton_ts_angular_standalone from '@site/docs/autogenerated/usage/angular_standalone/split-button.ts.md';
+import SplitButton_css_angular_standalone from '@site/docs/autogenerated/usage/angular_standalone/split-button.css.md';
 import SplitButton_vue_vue from '@site/docs/autogenerated/usage/vue/split-button.vue.md';
+import SplitButton_css_vue from '@site/docs/autogenerated/usage/vue/split-button.css.md';
 import SplitButton_html_html from '@site/docs/autogenerated/usage/html/split-button.html.md';
+import SplitButton_css_html from '@site/docs/autogenerated/usage/html/split-button.css.md';
 
 <Playground
   name="split-button"
   
   source={{react: {
              'split-button.tsx': SplitButton_tsx_react,
+             'split-button.scoped.css': SplitButton_scoped_css_react,
            },
            angular: {
              'split-button.ts': SplitButton_ts_angular,
+             'split-button.css': SplitButton_css_angular,
            },
            angular_standalone: {
              'split-button.ts': SplitButton_ts_angular_standalone,
+             'split-button.css': SplitButton_css_angular_standalone,
            },
            vue: {
              'split-button.vue': SplitButton_vue_vue,
+             'split-button.css': SplitButton_css_vue,
            },
            html: {
              'split-button.html': SplitButton_html_html,
+             'split-button.css': SplitButton_css_html,
            }
 }}
   files={{react: {
             'split-button.tsx': 'react/split-button.tsx',
+            'split-button.scoped.css': 'react/split-button.scoped.css',
           },
           angular: {
             'split-button.ts': 'angular/split-button.ts',
+            'split-button.css': 'angular/split-button.css',
           },
           angular_standalone: {
             'split-button.ts': 'angular_standalone/split-button.ts',
+            'split-button.css': 'angular_standalone/split-button.css',
           },
           vue: {
             'split-button.vue': 'vue/split-button.vue',
+            'split-button.css': 'vue/split-button.css',
           },
           html: {
             'split-button.html': 'html/split-button.html',
+            'split-button.css': 'html/split-button.css',
           }
 }}
   height={props.height}

package/build/docs/autogenerated/playground/tooltip-with-icon.mdx

@@ -0,0 +1,52 @@
+import Playground from '@site/src/components/Playground'
+
+import TooltipWithIcon_tsx_react from '@site/docs/autogenerated/usage/react/tooltip-with-icon.tsx.md';
+import TooltipWithIcon_ts_angular from '@site/docs/autogenerated/usage/angular/tooltip-with-icon.ts.md';
+import TooltipWithIcon_html_angular from '@site/docs/autogenerated/usage/angular/tooltip-with-icon.html.md';
+import TooltipWithIcon_ts_angular_standalone from '@site/docs/autogenerated/usage/angular_standalone/tooltip-with-icon.ts.md';
+import TooltipWithIcon_html_angular_standalone from '@site/docs/autogenerated/usage/angular_standalone/tooltip-with-icon.html.md';
+import TooltipWithIcon_vue_vue from '@site/docs/autogenerated/usage/vue/tooltip-with-icon.vue.md';
+import TooltipWithIcon_html_html from '@site/docs/autogenerated/usage/html/tooltip-with-icon.html.md';
+
+<Playground
+  name="tooltip-with-icon"
+  
+  source={{react: {
+             'tooltip-with-icon.tsx': TooltipWithIcon_tsx_react,
+           },
+           angular: {
+             'tooltip-with-icon.ts': TooltipWithIcon_ts_angular,
+             'tooltip-with-icon.html': TooltipWithIcon_html_angular,
+           },
+           angular_standalone: {
+             'tooltip-with-icon.ts': TooltipWithIcon_ts_angular_standalone,
+             'tooltip-with-icon.html': TooltipWithIcon_html_angular_standalone,
+           },
+           vue: {
+             'tooltip-with-icon.vue': TooltipWithIcon_vue_vue,
+           },
+           html: {
+             'tooltip-with-icon.html': TooltipWithIcon_html_html,
+           }
+}}
+  files={{react: {
+            'tooltip-with-icon.tsx': 'react/tooltip-with-icon.tsx',
+          },
+          angular: {
+            'tooltip-with-icon.ts': 'angular/tooltip-with-icon.ts',
+            'tooltip-with-icon.html': 'angular/tooltip-with-icon.html',
+          },
+          angular_standalone: {
+            'tooltip-with-icon.ts': 'angular_standalone/tooltip-with-icon.ts',
+            'tooltip-with-icon.html': 'angular_standalone/tooltip-with-icon.html',
+          },
+          vue: {
+            'tooltip-with-icon.vue': 'vue/tooltip-with-icon.vue',
+          },
+          html: {
+            'tooltip-with-icon.html': 'html/tooltip-with-icon.html',
+          }
+}}
+  height={props.height}
+  onlyFramework={props.onlyFramework}
+></Playground>