npm - @siemens/ix-docs - Versions diffs - 0.0.0-pr-2238-20251103105018 → 4.1.0 - Mend

@siemens/ix-docs 0.0.0-pr-2238-20251103105018 → 4.1.0

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.

Files changed (996) hide show

package/build/docs/autogenerated/prompt/ix-empty-state/readme.md CHANGED Viewed

@@ -1,846 +1,3 @@
-# ix-empty-state
-## HTML Examples
-### Example: echarts-empty-state
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>ECharts empty state example</title>
-    <link rel="stylesheet" href="./echarts-empty-state.css" />
-    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconInfo } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconInfo,
-      });
-    </script>
-  </head>
-  <body class="theme-classic-dark">
-    <div class="echarts">
-      <div id="empty-state-container" class="empty-state-container">
-        <ix-empty-state
-          class="empty-state"
-          header="No elements available"
-          sub-header="Failed to retrieve data"
-          icon="info"
-          action="Try again"
-        ></ix-empty-state>
-      </div>
-      <div class="echarts" id="main"></div>
-    </div>
-    <script type="module">
-      import { registerTheme } from '@siemens/ix-echarts';
-      import { themeSwitcher } from '@siemens/ix';
-      function initChart(theme, options) {
-        var myChart = echarts.init(document.querySelector('#main'), theme);
-        myChart.setOption(options);
-        return myChart;
-      }
-      function toggleOverlay() {
-        const overlay = document.getElementById('empty-state-container');
-        if (overlay.style.display === 'block') {
-          overlay.style.display = 'none';
-        } else {
-          overlay.style.display = 'block';
-        }
-      }
-      async function loadData(chart) {
-        toggleOverlay();
-        chart.showLoading({
-          text: 'Loading...',
-          textStyle: {
-            fontSize: 30,
-          },
-        });
-        await new Promise((resolve) => setTimeout(resolve, 2000));
-        chart.hideLoading();
-        toggleOverlay();
-      }
-      const data = {
-        weekdays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-        value: [],
-      };
-      const options = {
-        xAxis: {
-          type: 'category',
-          data: data.weekdays,
-        },
-        yAxis: {
-          type: 'value',
-        },
-        series: [
-          {
-            data: data.value,
-            type: 'line',
-          },
-        ],
-      };
-      const overlay = document.getElementById('empty-state-container');
-      if (data.value.length === 0) {
-        overlay.style.display = 'block';
-      } else {
-        overlay.style.display = 'none';
-      }
-      registerTheme(echarts);
-      var myChart = initChart(themeSwitcher.getCurrentTheme(), options);
-      themeSwitcher.themeChanged.on((theme) => {
-        myChart.dispose();
-        myChart = initChart(theme, options);
-      });
-      (async function () {
-        await window.customElements.whenDefined('ix-empty-state');
-        const emptyState = document.querySelector('ix-empty-state');
-        emptyState.addEventListener('actionClick', (event) =>
-          loadData(myChart)
-        );
-      })();
-      window.onresize = function () {
-        myChart.resize();
-      };
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: empty-state-compact-break
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Empty state compact break example</title>
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconAdd } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconAdd,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-empty-state
-      layout="compactBreak"
-      header="No elements available"
-      sub-header="Create an element first"
-      icon="add"
-      action="Create element"
-    ></ix-empty-state>
-    <script>
-      (async function () {
-        await window.customElements.whenDefined('ix-empty-state');
-        const emptyState = document.querySelector('ix-empty-state');
-        emptyState.addEventListener('actionClick', (event) =>
-          console.log(event)
-        );
-      })();
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: empty-state-compact
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Empty state compact example</title>
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconAdd } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconAdd,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-empty-state
-      layout="compact"
-      header="No elements available"
-      sub-header="Create an element first"
-      icon="add"
-      action="Create element"
-    ></ix-empty-state>
-    <script>
-      (async function () {
-        await window.customElements.whenDefined('ix-empty-state');
-        const emptyState = document.querySelector('ix-empty-state');
-        emptyState.addEventListener('actionClick', (event) =>
-          console.log(event)
-        );
-      })();
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: empty-state
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Empty state example</title>
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconAdd } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconAdd,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-empty-state
-      header="No elements available"
-      sub-header="Create an element first"
-      icon="add"
-      action="Create element"
-    ></ix-empty-state>
-    <script>
-      (async function () {
-        await window.customElements.whenDefined('ix-empty-state');
-        const emptyState = document.querySelector('ix-empty-state');
-        emptyState.addEventListener('actionClick', (event) =>
-          console.log(event)
-        );
-      })();
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-## React Examples
-### Example: echarts-empty-state
-```tsx
-import './echarts-empty-state.scoped.css';
-import { useEffect, useState } from 'react';
-import { registerTheme } from '@siemens/ix-echarts';
-import { themeSwitcher } from '@siemens/ix';
-import ReactEcharts from 'echarts-for-react';
-import * as echarts from 'echarts';
-import { EChartsOption } from 'echarts';
-import { IxEmptyState } from '@siemens/ix-react';
-import { iconInfo } from '@siemens/ix-icons/icons';
-export default function Echarts() {
-  registerTheme(echarts);
-  const [theme, setTheme] = useState(themeSwitcher.getCurrentTheme());
-  useEffect(() => {
-    themeSwitcher.themeChanged.on((theme: string) => {
-      setTheme(theme);
-    });
-  }, []);
-  const data = {
-    weekdays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    value: [],
-  };
-  const options: EChartsOption = {
-    xAxis: {
-      type: 'category',
-      data: data.weekdays,
-    },
-    yAxis: {
-      type: 'value',
-    },
-    series: [
-      {
-        data: data.value,
-        type: 'line',
-      },
-    ],
-  };
-  return (
-    <div className="echarts">
-      {data.value.length === 0 && (
-        <div className="empty-state-container">
-          <IxEmptyState
-            className="empty-state"
-            header="No elements available"
-            subHeader="Failed to retrieve data"
-            icon={iconInfo}
-            action="Try again"
-          />
-        </div>
-      )}
-      <ReactEcharts option={options} theme={theme} className="echarts" />
-    </div>
-  );
-}
-```
-### Example: empty-state-compact-break
-```tsx
-import { iconAdd } from '@siemens/ix-icons/icons';
-import { IxEmptyState } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxEmptyState
-      layout="compactBreak"
-      header="No elements available"
-      subHeader="Create an element first"
-      icon={iconAdd}
-      action="Create element"
-      onActionClick={console.log}
-    ></IxEmptyState>
-  );
-};
-```
-### Example: empty-state-compact
-```tsx
-import { iconAdd } from '@siemens/ix-icons/icons';
-import { IxEmptyState } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxEmptyState
-      layout="compact"
-      header="No elements available"
-      subHeader="Create an element first"
-      icon={iconAdd}
-      action="Create element"
-      onActionClick={console.log}
-    ></IxEmptyState>
-  );
-};
-```
-### Example: empty-state
-```tsx
-import { iconAdd } from '@siemens/ix-icons/icons';
-import { IxEmptyState } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxEmptyState
-      header="No elements available"
-      subHeader="Create an element first"
-      icon={iconAdd}
-      action="Create element"
-      onActionClick={console.log}
-    ></IxEmptyState>
-  );
-};
-```
-## Vue Examples
-### Example: echarts-empty-state
-```tsx
-<script setup lang="ts">
-import { ref } from 'vue';
-import { registerTheme } from '@siemens/ix-echarts';
-import { themeSwitcher } from '@siemens/ix';
-import VueECharts from 'vue-echarts';
-import * as echarts from 'echarts';
-import * as charts from 'echarts/charts';
-import * as components from 'echarts/components';
-import * as renderer from 'echarts/renderers';
-import { EChartsOption } from 'echarts';
-import { IxEmptyState } from '@siemens/ix-vue';
-import { iconInfo } from '@siemens/ix-icons/icons';
-echarts.use([
-  components.TooltipComponent,
-  components.LegendComponent,
-  components.GridComponent,
-  components.MarkLineComponent,
-  charts.LineChart,
-  renderer.CanvasRenderer,
-]);
-registerTheme(echarts);
-const theme = ref(themeSwitcher.getCurrentTheme());
-themeSwitcher.themeChanged.on((newTheme: string) => {
-  theme.value = newTheme;
-});
-const data = {
-  weekdays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-  value: [],
-};
-const options = {
-  xAxis: {
-    type: 'category',
-    data: data.weekdays,
-  },
-  yAxis: {
-    type: 'value',
-  },
-  series: [
-    {
-      data: data.value,
-      type: 'line',
-    },
-  ],
-} as EChartsOption;
-</script>
-<style scoped src="./echarts-empty-state.css"></style>
-<template>
-  <div class="echarts">
-    <div v-if="data.value.length === 0" class="empty-state-container">
-      <IxEmptyState
-        className="empty-state"
-        header="No elements available"
-        sub-header="Failed to retrieve data"
-        :icon="iconInfo"
-        action="Try again"
-      ></IxEmptyState>
-    </div>
-    <VueECharts :theme="theme" :option="options" autoresize></VueECharts>
-  </div>
-</template>
-```
-### Example: empty-state-compact-break
-```tsx
-<script setup lang="ts">
-import { iconAdd } from '@siemens/ix-icons/icons';
-import { IxEmptyState } from '@siemens/ix-vue';
-</script>
-<template>
-  <IxEmptyState
-    layout="compactBreak"
-    header="No elements available"
-    subHeader="Create an element first"
-    :icon="iconAdd"
-    action="Create element"
-  ></IxEmptyState>
-</template>
-```
-### Example: empty-state-compact
-```tsx
-<script setup lang="ts">
-import { iconAdd } from '@siemens/ix-icons/icons';
-import { IxEmptyState } from '@siemens/ix-vue';
-</script>
-<template>
-  <IxEmptyState
-    layout="compact"
-    header="No elements available"
-    subHeader="Create an element first"
-    :icon="iconAdd"
-    action="Create element"
-  ></IxEmptyState>
-</template>
-```
-### Example: empty-state
-```tsx
-<script setup lang="ts">
-import { iconAdd } from '@siemens/ix-icons/icons';
-import { IxEmptyState } from '@siemens/ix-vue';
-</script>
-<template>
-  <IxEmptyState
-    header="No elements available"
-    subHeader="Create an element first"
-    :icon="iconAdd"
-    action="Create element"
-  ></IxEmptyState>
-</template>
-```
-## Angular Examples
-### Example: echarts-empty-state
-#### Component typescript
-```typescript
-import { Component, OnInit } from '@angular/core';
-import { registerTheme } from '@siemens/ix-echarts';
-import { themeSwitcher } from '@siemens/ix';
-import * as echarts from 'echarts';
-import { EChartsOption } from 'echarts';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './echarts-empty-state.html',
-  styleUrls: ['./echarts-empty-state.css'],
-})
-export default class EchartsLineSimple implements OnInit {
-  theme = themeSwitcher.getCurrentTheme();
-  data = {
-    weekdays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    value: [],
-  };
-  options: EChartsOption = {
-    xAxis: {
-      type: 'category',
-      data: this.data.weekdays,
-    },
-    yAxis: {
-      type: 'value',
-    },
-    series: [
-      {
-        data: this.data.value,
-        type: 'line',
-      },
-    ],
-  };
-  ngOnInit() {
-    registerTheme(echarts);
-    themeSwitcher.themeChanged.on((theme: string) => {
-      this.theme = theme;
-    });
-  }
-}
-```
-#### Component template
-```html
-<!--
-SPDX-FileCopyrightText: 2023 Siemens AG
-SPDX-License-Identifier: MIT
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
--->
-<div class="echarts">
-  <div
-    *ngIf="this.data.value.length === 0"
-    id="empty-state-container"
-    class="empty-state-container"
-  >
-    <ix-empty-state
-      class="empty-state"
-      header="No elements available"
-      sub-header="Failed to retrieve data"
-      icon="info"
-      action="Try again"
-    ></ix-empty-state>
-  </div>
-  <div
-    echarts
-    class="echarts"
-    [options]="options"
-    [theme]="theme"
-    id="main"
-  ></div>
-</div>
-```
-### Example: empty-state-compact-break
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: ` <ix-empty-state
-    layout="compactBreak"
-    header="No elements available"
-    subHeader="Create an element first"
-    icon="add"
-    action="Create element"
-    (actionClick)="onActionClick($event)"
-  ></ix-empty-state>`,
-})
-export default class EmptyStateCompactBreak {
-  onActionClick(event: Event) {
-    console.log(event);
-  }
-}
-```
-### Example: empty-state-compact
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `<ix-empty-state
-    layout="compact"
-    header="No elements available"
-    subHeader="Create an element first"
-    icon="add"
-    action="Create element"
-    (actionClick)="onActionClick($event)"
-  ></ix-empty-state>`,
-})
-export default class EmptyStateCompact {
-  onActionClick(event: Event) {
-    console.log(event);
-  }
-}
-```
-### Example: empty-state
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `<ix-empty-state
-    header="No elements available"
-    subHeader="Create an element first"
-    icon="add"
-    action="Create element"
-    (actionClick)="onActionClick($event)"
-  ></ix-empty-state>`,
-})
-export default class EmptyState {
-  onActionClick(event: Event) {
-    console.log(event);
-  }
-}
-```
-## Angular Standalone Examples
-### Example: echarts-empty-state
-#### Component typescript
-```typescript
-import { Component, OnInit } from '@angular/core';
-import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
-import { NgIf } from '@angular/common';
-import { IxEmptyState } from '@siemens/ix-angular/standalone';
-import { registerTheme } from '@siemens/ix-echarts';
-import { themeSwitcher } from '@siemens/ix';
-import * as echarts from 'echarts';
-import { EChartsOption } from 'echarts';
-@Component({
-  selector: 'app-example',
-  providers: [provideEchartsCore({ echarts })],
-  imports: [IxEmptyState, NgIf, NgxEchartsDirective],
-  templateUrl: './echarts-empty-state.html',
-  styleUrls: ['./echarts-empty-state.css'],
-})
-export default class EchartsLineSimple implements OnInit {
-  theme = themeSwitcher.getCurrentTheme();
-  data = {
-    weekdays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    value: [],
-  };
-  options: EChartsOption = {
-    xAxis: {
-      type: 'category',
-      data: this.data.weekdays,
-    },
-    yAxis: {
-      type: 'value',
-    },
-    series: [
-      {
-        data: this.data.value,
-        type: 'line',
-      },
-    ],
-  };
-  ngOnInit() {
-    registerTheme(echarts);
-    themeSwitcher.themeChanged.on((theme: string) => {
-      this.theme = theme;
-    });
-  }
-}
-```
-#### Component template
-```html
-<!--
-SPDX-FileCopyrightText: 2023 Siemens AG
-SPDX-License-Identifier: MIT
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
--->
-<div class="echarts">
-  <div
-    *ngIf="this.data.value.length === 0"
-    id="empty-state-container"
-    class="empty-state-container"
-  >
-    <ix-empty-state
-      class="empty-state"
-      header="No elements available"
-      sub-header="Failed to retrieve data"
-      icon="info"
-      action="Try again"
-    ></ix-empty-state>
-  </div>
-  <div
-    echarts
-    class="echarts"
-    [options]="options"
-    [theme]="theme"
-    id="main"
-  ></div>
-</div>
-```
-### Example: empty-state-compact-break
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxEmptyState } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxEmptyState],
-  template: ` <ix-empty-state
-    layout="compactBreak"
-    header="No elements available"
-    subHeader="Create an element first"
-    icon="add"
-    action="Create element"
-    (actionClick)="onActionClick($event)"
-  ></ix-empty-state>`,
-})
-export default class EmptyStateCompactBreak {
-  onActionClick(event: Event) {
-    console.log(event);
-  }
-}
-```
-### Example: empty-state-compact
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxEmptyState } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxEmptyState],
-  template: `<ix-empty-state
-    layout="compact"
-    header="No elements available"
-    subHeader="Create an element first"
-    icon="add"
-    action="Create element"
-    (actionClick)="onActionClick($event)"
-  ></ix-empty-state>`,
-})
-export default class EmptyStateCompact {
-  onActionClick(event: Event) {
-    console.log(event);
-  }
-}
-```
-### Example: empty-state
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxEmptyState } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxEmptyState],
-  template: `<ix-empty-state
-    header="No elements available"
-    subHeader="Create an element first"
-    icon="add"
-    action="Create element"
-    (actionClick)="onActionClick($event)"
-  ></ix-empty-state>`,
-})
-export default class EmptyState {
-  onActionClick(event: Event) {
-    console.log(event);
-  }
-}
-```
 <!-- Auto Generated Below -->