npm - @siemens/ix-docs - Versions diffs - 4.0.0 → 4.2.0 - Mend

@siemens/ix-docs 4.0.0 → 4.2.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 (853) hide show

package/build/docs/autogenerated/prompt/ix-menu-about/readme.md CHANGED Viewed

@@ -1,809 +1,3 @@
-# ix-menu-about
-## HTML Examples
-### Example: about-and-legal
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>About and legal example</title>
-  </head>
-  <body>
-    <ix-application>
-      <ix-application-header>
-        <div class="placeholder-logo" slot="logo"></div>
-      </ix-application-header>
-      <ix-menu>
-        <ix-menu-about>
-          <ix-menu-about-item label="Tab 1">Content 1</ix-menu-about-item>
-          <ix-menu-about-item label="Tab 2">Content 2</ix-menu-about-item>
-        </ix-menu-about>
-      </ix-menu>
-    </ix-application>
-    <script>
-      (async function () {
-        await window.customElements.whenDefined('ix-menu');
-        const instance = document.querySelector('ix-menu');
-        await instance.toggleAbout(true);
-      })();
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: application-advanced
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Application advanced example</title>
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import {
-        iconAlarmBell,
-        iconHome,
-        iconPiechart,
-        iconPlant,
-        iconNetworkDevice,
-      } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconAlarmBell,
-        iconHome,
-        iconPiechart,
-        iconPlant,
-        iconNetworkDevice,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-application>
-      <ix-application-header name="My Application">
-        <div class="placeholder-logo" slot="logo"></div>
-        <ix-avatar username="Example User" extra="Additional info"></ix-avatar>
-      </ix-application-header>
-      <ix-menu>
-        <ix-menu-item home icon="home" active>Home</ix-menu-item>
-        <ix-menu-item icon="alarm-bell">Alarm</ix-menu-item>
-        <ix-menu-category icon="piechart" label="Analysis">
-          <ix-menu-item icon="plant">Plant</ix-menu-item>
-          <ix-menu-item icon="network-device">Network</ix-menu-item>
-        </ix-menu-category>
-        <ix-menu-settings></ix-menu-settings>
-        <ix-menu-about></ix-menu-about>
-      </ix-menu>
-      <ix-content>
-        <ix-content-header
-          id="contentHeaderId"
-          header-title="Example home content"
-        ></ix-content-header>
-      </ix-content>
-    </ix-application>
-    <script type="module">
-      (async function () {
-        await window.customElements.whenDefined('ix-menu');
-        const menuItems = document.querySelectorAll('ix-menu-item');
-        function registerClickListener(itemElement) {
-          itemElement.addEventListener('click', () => {
-            for (const item of menuItems) {
-              item.removeAttribute('active');
-            }
-            itemElement.setAttribute('active', '');
-            document
-              .getElementById('contentHeaderId')
-              .setAttribute(
-                'header-title',
-                `Example ${itemElement.innerText.toLowerCase()} content`
-              );
-          });
-        }
-        for (const element of menuItems) {
-          registerClickListener(element);
-        }
-      })();
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: popover-news
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Popover news example</title>
-  </head>
-  <body>
-    <ix-application>
-      <ix-application-header>
-        <div class="placeholder-logo" slot="logo"></div>
-      </ix-application-header>
-      <ix-menu>
-        <ix-menu-about>
-          <ix-menu-about-item label="Example"> </ix-menu-about-item>
-        </ix-menu-about>
-        <ix-menu-about-news label="Test" show about-item-label="Example">
-          Test
-        </ix-menu-about-news>
-      </ix-menu>
-    </ix-application>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-## React Examples
-### Example: about-and-legal
-```tsx
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxMenu,
-  IxMenuAbout,
-  IxMenuAboutItem,
-} from '@siemens/ix-react';
-import { useLayoutEffect, useRef } from 'react';
-export default () => {
-  const ref = useRef<HTMLIxMenuElement>(null);
-  useLayoutEffect(() => {
-    const element = ref.current;
-    if (element) {
-      element.toggleAbout(true);
-    }
-  }, []);
-  return (
-    <IxApplication>
-      <IxApplicationHeader>
-        <div className="placeholder-logo" slot="logo"></div>
-      </IxApplicationHeader>
-      <IxMenu ref={ref}>
-        <IxMenuAbout>
-          <IxMenuAboutItem label="Tab 1">Content 1</IxMenuAboutItem>
-          <IxMenuAboutItem label="Tab 2">Content 2</IxMenuAboutItem>
-        </IxMenuAbout>
-      </IxMenu>
-    </IxApplication>
-  );
-};
-```
-### Example: application-advanced
-```tsx
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxAvatar,
-  IxContent,
-  IxContentHeader,
-  IxMenu,
-  IxMenuAbout,
-  IxMenuCategory,
-  IxMenuItem,
-  IxMenuSettings,
-} from '@siemens/ix-react';
-import {
-  iconAlarmBell,
-  iconHome,
-  iconPiechart,
-  iconPlant,
-  iconNetworkDevice,
-} from '@siemens/ix-icons/icons';
-import { useState } from 'react';
-export default function ApplicationAdvancedExample() {
-  const [activeContent, setActiveContent] = useState('home');
-  return (
-    <IxApplication>
-      <IxApplicationHeader name="My Application">
-        <div className="placeholder-logo" slot="logo"></div>
-        <IxAvatar username="Example User" extra="Additional info"></IxAvatar>
-      </IxApplicationHeader>
-      <IxMenu>
-        <IxMenuItem
-          home
-          icon={iconHome}
-          onClick={() => setActiveContent('home')}
-          active={activeContent === 'home'}
-        >
-          Home
-        </IxMenuItem>
-        <IxMenuItem
-          icon={iconAlarmBell}
-          onClick={() => setActiveContent('alarm')}
-          active={activeContent === 'alarm'}
-        >
-          Alarm
-        </IxMenuItem>
-        <IxMenuCategory icon={iconPiechart} label="Analysis">
-          <IxMenuItem
-            icon={iconPlant}
-            onClick={() => setActiveContent('plant')}
-            active={activeContent === 'plant'}
-          >
-            Plant
-          </IxMenuItem>
-          <IxMenuItem
-            icon={iconNetworkDevice}
-            onClick={() => setActiveContent('network')}
-            active={activeContent === 'network'}
-          >
-            Network
-          </IxMenuItem>
-        </IxMenuCategory>
-        <IxMenuSettings></IxMenuSettings>
-        <IxMenuAbout></IxMenuAbout>
-      </IxMenu>
-      <IxContent>
-        <IxContentHeader
-          headerTitle={`Example ${activeContent} content`}
-        ></IxContentHeader>
-      </IxContent>
-    </IxApplication>
-  );
-};
-```
-### Example: popover-news
-```tsx
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxMenu,
-  IxMenuAbout,
-  IxMenuAboutItem,
-  IxMenuAboutNews,
-} from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxApplication>
-      <IxApplicationHeader>
-        <div className="placeholder-logo" slot="logo"></div>
-      </IxApplicationHeader>
-      <IxMenu>
-        <IxMenuAbout>
-          <IxMenuAboutItem label="Example"> </IxMenuAboutItem>
-        </IxMenuAbout>
-        <IxMenuAboutNews label="Test" show about-item-label="Example">
-          Test
-        </IxMenuAboutNews>
-      </IxMenu>
-    </IxApplication>
-  );
-};
-```
-## Vue Examples
-### Example: about-and-legal
-```tsx
-<script setup lang="ts">
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxMenu,
-  IxMenuAbout,
-  IxMenuAboutItem,
-} from '@siemens/ix-vue';
-import { useTemplateRef, onMounted } from 'vue';
-const input = useTemplateRef<HTMLIxMenuElement>('menu');
-onMounted(() => {
-  input.value?.toggleAbout(true);
-});
-</script>
-<template>
-  <IxApplication>
-    <IxApplicationHeader>
-      <div className="placeholder-logo" slot="logo"></div>
-    </IxApplicationHeader>
-    <IxMenu ref="menu">
-      <IxMenuAbout>
-        <IxMenuAboutItem label="Tab 1">Content 1</IxMenuAboutItem>
-        <IxMenuAboutItem label="Tab 2">Content 2</IxMenuAboutItem>
-      </IxMenuAbout>
-    </IxMenu>
-  </IxApplication>
-</template>
-```
-### Example: application-advanced
-```tsx
-<script setup lang="ts">
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxAvatar,
-  IxContent,
-  IxContentHeader,
-  IxMenu,
-  IxMenuAbout,
-  IxMenuCategory,
-  IxMenuItem,
-  IxMenuSettings,
-} from '@siemens/ix-vue';
-import {
-  iconAlarmBell,
-  iconHome,
-  iconPiechart,
-  iconPlant,
-  iconNetworkDevice,
-} from '@siemens/ix-icons/icons';
-import { ref } from 'vue';
-const activeContent = ref('home');
-</script>
-<template>
-  <IxApplication>
-    <IxApplicationHeader name="My Application">
-      <div class="placeholder-logo" slot="logo"></div>
-      <IxAvatar username="Example User" extra="Additional info"></IxAvatar>
-    </IxApplicationHeader>
-    <IxMenu>
-      <IxMenuItem
-        home
-        :icon="iconHome"
-        :active="activeContent === 'home'"
-        @click="activeContent = 'home'"
-        >Home</IxMenuItem
-      >
-      <IxMenuItem
-        :icon="iconAlarmBell"
-        :active="activeContent === 'alarm'"
-        @click="activeContent = 'alarm'"
-        >Alarm</IxMenuItem
-      >
-      <IxMenuCategory :icon="iconPiechart" label="Analysis">
-        <IxMenuItem
-          :icon="iconPlant"
-          :active="activeContent === 'plant'"
-          @click="activeContent = 'plant'"
-          >Plant</IxMenuItem
-        >
-        <IxMenuItem
-          :icon="iconNetworkDevice"
-          :active="activeContent === 'network'"
-          @click="activeContent = 'network'"
-          >Network</IxMenuItem
-        >
-      </IxMenuCategory>
-      <IxMenuSettings></IxMenuSettings>
-      <IxMenuAbout></IxMenuAbout>
-    </IxMenu>
-    <IxContent>
-      <IxContentHeader
-        :header-title="`Example ${activeContent} content`"
-      ></IxContentHeader>
-    </IxContent>
-  </IxApplication>
-</template>
-```
-### Example: popover-news
-```tsx
-<script setup lang="ts">
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxMenu,
-  IxMenuAbout,
-  IxMenuAboutItem,
-  IxMenuAboutNews,
-} from '@siemens/ix-vue';
-</script>
-<template>
-  <IxApplication>
-    <IxApplicationHeader>
-      <div className="placeholder-logo" slot="logo"></div>
-    </IxApplicationHeader>
-    <IxMenu>
-      <IxMenuAbout>
-        <IxMenuAboutItem label="Example"> </IxMenuAboutItem>
-      </IxMenuAbout>
-      <IxMenuAboutNews label="Test" show about-item-label="Example">
-        Test
-      </IxMenuAboutNews>
-    </IxMenu>
-  </IxApplication>
-</template>
-```
-## Angular Examples
-### Example: about-and-legal
-#### Component typescript
-```typescript
-import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './about-and-legal.html',
-})
-export default class AboutAndLegal implements AfterViewInit {
-  @ViewChild('menu', { read: ElementRef })
-  menuRef!: ElementRef<HTMLIxMenuElement>;
-  ngAfterViewInit() {
-    const { nativeElement } = this.menuRef;
-    nativeElement.toggleAbout(true);
-  }
-}
-```
-#### Component template
-```html
-<ix-application>
-  <ix-application-header>
-    <div class="placeholder-logo" slot="logo"></div>
-  </ix-application-header>
-  <ix-menu #menu>
-    <ix-menu-about>
-      <ix-menu-about-item label="Tab 1">Content 1</ix-menu-about-item>
-      <ix-menu-about-item label="Tab 2">Content 2</ix-menu-about-item>
-    </ix-menu-about>
-  </ix-menu>
-</ix-application>
-```
-### Example: application-advanced
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  selector: 'app-example',
-  templateUrl: './application-advanced.html',
-  standalone: false,
-})
-export default class ApplicationAdvancedExample {
-  activeContent: string = 'home';
-  updateContent(contentKey: string) {
-    this.activeContent = contentKey;
-  }
-}
-```
-#### Component template
-```html
-<!--
-SPDX-FileCopyrightText: 2025 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.
--->
-<ix-application>
-  <ix-application-header name="My Application">
-    <div class="placeholder-logo" slot="logo"></div>
-    <ix-avatar username="Example User" extra="Additional info"></ix-avatar>
-  </ix-application-header>
-  <ix-menu>
-    <ix-menu-item
-      home
-      icon="home"
-      (click)="updateContent('home')"
-      [active]="activeContent === 'home'"
-      >Home</ix-menu-item
-    >
-    <ix-menu-item
-      icon="alarm-bell"
-      (click)="updateContent('alarm')"
-      [active]="activeContent === 'alarm'"
-      >Alarm</ix-menu-item
-    >
-    <ix-menu-category icon="piechart" label="Analysis">
-      <ix-menu-item
-        icon="plant"
-        (click)="updateContent('plant')"
-        [active]="activeContent === 'plant'"
-        >Plant</ix-menu-item
-      >
-      <ix-menu-item
-        icon="network-device"
-        (click)="updateContent('network')"
-        [active]="activeContent === 'network'"
-        >Network</ix-menu-item
-      >
-    </ix-menu-category>
-    <ix-menu-settings></ix-menu-settings>
-    <ix-menu-about></ix-menu-about>
-  </ix-menu>
-  <ix-content>
-    <ix-content-header headerTitle="Example {{ activeContent }} content"></ix-content-header>
-  </ix-content>
-</ix-application>
-```
-### Example: popover-news
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './popover-news.html',
-})
-export default class PopoverNews {}
-```
-#### Component template
-```html
-<ix-application>
-  <ix-application-header>
-    <div class="placeholder-logo" slot="logo"></div>
-  </ix-application-header>
-  <ix-menu>
-    <ix-menu-about>
-      <ix-menu-about-item label="Example"> </ix-menu-about-item>
-    </ix-menu-about>
-    <ix-menu-about-news label="Test" show about-item-label="Example">
-      Test
-    </ix-menu-about-news>
-  </ix-menu>
-</ix-application>
-```
-## Angular Standalone Examples
-### Example: about-and-legal
-#### Component typescript
-```typescript
-import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxMenu,
-  IxMenuAbout,
-  IxMenuAboutItem,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [
-    IxApplication,
-    IxApplicationHeader,
-    IxMenu,
-    IxMenuAbout,
-    IxMenuAboutItem,
-  ],
-  templateUrl: './about-and-legal.html',
-})
-export default class AboutAndLegal implements AfterViewInit {
-  @ViewChild('menu', { read: ElementRef })
-  menuRef!: ElementRef<HTMLIxMenuElement>;
-  ngAfterViewInit() {
-    const { nativeElement } = this.menuRef;
-    nativeElement.toggleAbout(true);
-  }
-}
-```
-#### Component template
-```html
-<!--
-SPDX-FileCopyrightText: 2025 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.
--->
-<ix-application>
-  <ix-application-header>
-    <div class="placeholder-logo" slot="logo"></div>
-  </ix-application-header>
-  <ix-menu #menu>
-    <ix-menu-about>
-      <ix-menu-about-item label="Tab 1">Content 1</ix-menu-about-item>
-      <ix-menu-about-item label="Tab 2">Content 2</ix-menu-about-item>
-    </ix-menu-about>
-  </ix-menu>
-</ix-application>
-```
-### Example: application-advanced
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxAvatar,
-  IxContent,
-  IxContentHeader,
-  IxMenu,
-  IxMenuAbout,
-  IxMenuCategory,
-  IxMenuItem,
-  IxMenuSettings,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [
-    IxApplication,
-    IxApplicationHeader,
-    IxAvatar,
-    IxContent,
-    IxContentHeader,
-    IxMenu,
-    IxMenuAbout,
-    IxMenuCategory,
-    IxMenuItem,
-    IxMenuSettings,
-  ],
-  templateUrl: './application-advanced.html',
-})
-export default class ApplicationAdvancedExample {
-  activeContent: string = 'home';
-  updateContent(contentKey: string) {
-    this.activeContent = contentKey;
-  }
-}
-```
-#### Component template
-```html
-<!--
-SPDX-FileCopyrightText: 2025 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.
--->
-<ix-application>
-  <ix-application-header name="My Application">
-    <div class="placeholder-logo" slot="logo"></div>
-    <ix-avatar username="Example User" extra="Additional info"></ix-avatar>
-  </ix-application-header>
-  <ix-menu>
-    <ix-menu-item
-      home
-      icon="home"
-      (click)="updateContent('home')"
-      [active]="activeContent === 'home'"
-      >Home</ix-menu-item
-    >
-    <ix-menu-item
-      icon="alarm-bell"
-      (click)="updateContent('alarm')"
-      [active]="activeContent === 'alarm'"
-      >Alarm</ix-menu-item
-    >
-    <ix-menu-category icon="piechart" label="Analysis">
-      <ix-menu-item
-        icon="plant"
-        (click)="updateContent('plant')"
-        [active]="activeContent === 'plant'"
-        >Plant</ix-menu-item
-      >
-      <ix-menu-item
-        icon="network-device"
-        (click)="updateContent('network')"
-        [active]="activeContent === 'network'"
-        >Network</ix-menu-item
-      >
-    </ix-menu-category>
-    <ix-menu-settings></ix-menu-settings>
-    <ix-menu-about></ix-menu-about>
-  </ix-menu>
-  <ix-content>
-    <ix-content-header headerTitle="Example {{ activeContent }} content"></ix-content-header>
-  </ix-content>
-</ix-application>
-```
-### Example: popover-news
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxMenu,
-  IxMenuAbout,
-  IxMenuAboutItem,
-  IxMenuAboutNews,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [
-    IxApplication,
-    IxApplicationHeader,
-    IxMenu,
-    IxMenuAbout,
-    IxMenuAboutItem,
-    IxMenuAboutNews,
-  ],
-  templateUrl: './popover-news.html',
-})
-export default class PopoverNews {}
-```
-#### Component template
-```html
-<!--
-SPDX-FileCopyrightText: 2025 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.
--->
-<ix-application>
-  <ix-application-header>
-    <div class="placeholder-logo" slot="logo"></div>
-  </ix-application-header>
-  <ix-menu>
-    <ix-menu-about>
-      <ix-menu-about-item label="Example"> </ix-menu-about-item>
-    </ix-menu-about>
-    <ix-menu-about-news label="Test" show about-item-label="Example">
-      Test
-    </ix-menu-about-news>
-  </ix-menu>
-</ix-application>
-```
 <!-- Auto Generated Below -->