docs: add docs for some more webcomponents

libs/docs/ui5-webcomponents/api-files.ts

@@ -40,5 +40,8 @@ export const API_FILES = {
     textArea: ['TextArea'],
     timePicker: ['TimePicker'],
     title: ['Title'],
-    toast: ['Toast']
+    toast: ['Toast'],
+    toggleButton: ['ToggleButton'],
+    token: ['Token'],
+    tokenizer: ['Tokenizer']
 };

libs/docs/ui5-webcomponents/docs-data.json

@@ -141,6 +141,18 @@
         {
             "url": "ui5-webcomponents/toast",
             "name": "Toast"
+        },
+        {
+            "url": "ui5-webcomponents/toggle-button",
+            "name": "Toggle Button"
+        },
+        {
+            "url": "ui5-webcomponents/token",
+            "name": "Token"
+        },
+        {
+            "url": "ui5-webcomponents/tokenizer",
+            "name": "Tokenizer"
         }
     ]
 }

libs/docs/ui5-webcomponents/docs-routes.ts

@@ -154,6 +154,18 @@ const componentRoutes = [
     {
         path: 'toast',
         loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents/toast').then(configureLibRoutes)
+    },
+    {
+        path: 'toggle-button',
+        loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents/toggle-button').then(configureLibRoutes)
+    },
+    {
+        path: 'token',
+        loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents/token').then(configureLibRoutes)
+    },
+    {
+        path: 'tokenizer',
+        loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents/tokenizer').then(configureLibRoutes)
     }
 ];
 

libs/docs/ui5-webcomponents/toggle-button/examples/basic-sample.html

@@ -0,0 +1,5 @@
+<ui5-toggle-button [pressed]="isPressed()" (ui5Click)="onToggleClick()"> Toggle Me </ui5-toggle-button>
+
+<p>
+    <ui5-label>Current state: <strong>{{ isPressed() ? 'Pressed' : 'Unpressed' }}</strong></ui5-label>
+</p>

libs/docs/ui5-webcomponents/toggle-button/examples/basic-sample.ts

@@ -0,0 +1,17 @@
+import { Component, signal } from '@angular/core';
+import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
+import { ToggleButton } from '@fundamental-ngx/ui5-webcomponents/toggle-button';
+
+@Component({
+    selector: 'ui5-toggle-button-basic-sample',
+    templateUrl: './basic-sample.html',
+    standalone: true,
+    imports: [ToggleButton, Label]
+})
+export class ToggleButtonBasicSample {
+    readonly isPressed = signal(false);
+
+    onToggleClick(): void {
+        this.isPressed.update(() => !this.isPressed());
+    }
+}

libs/docs/ui5-webcomponents/toggle-button/examples/designs.html

@@ -0,0 +1,14 @@
+<div class="fd-container">
+    <div class="fd-row">
+        @for (design of designs; track design) {
+        <div class="fd-col fd-col--4 fd-margin-bottom--md">
+            <ui5-toggle-button [design]="design" [pressed]="pressedStates()[design]" (ui5Click)="onToggle(design)">
+                {{ design }} Button
+            </ui5-toggle-button>
+            <p class="fd-margin-top--sm">
+                State: <strong>{{ pressedStates()[design] ? 'Pressed' : 'Unpressed' }}</strong>
+            </p>
+        </div>
+        }
+    </div>
+</div>

libs/docs/ui5-webcomponents/toggle-button/examples/designs.ts

@@ -0,0 +1,32 @@
+import { Component, signal } from '@angular/core';
+import { ButtonDesign } from '@fundamental-ngx/ui5-webcomponents';
+import { ToggleButton } from '@fundamental-ngx/ui5-webcomponents/toggle-button';
+
+// Import Fundamental Styles
+import 'fundamental-styles/dist/layout-grid.css';
+import 'fundamental-styles/dist/margins.css';
+
+@Component({
+    selector: 'ui5-toggle-button-designs-sample',
+    templateUrl: './designs.html',
+    standalone: true,
+    imports: [ToggleButton]
+})
+export class ToggleButtonDesignsSample {
+    readonly designs: Array<keyof typeof ButtonDesign> = Object.keys(ButtonDesign) as Array<keyof typeof ButtonDesign>;
+    readonly pressedStates = signal<Record<string, boolean>>({
+        Default: false,
+        Emphasized: false,
+        Positive: false,
+        Negative: false,
+        Transparent: false,
+        Attention: false
+    });
+
+    onToggle(design: string): void {
+        this.pressedStates.update((states) => ({
+            ...states,
+            [design]: !states[design]
+        }));
+    }
+}

libs/docs/ui5-webcomponents/toggle-button/examples/icons.html

@@ -0,0 +1,59 @@
+<div class="fd-container">
+    <div class="fd-row">
+        <h5>Icon Only:</h5>
+    </div>
+
+    <div class="fd-row">
+        <div class="fd-col fd-col--3">
+            <ui5-toggle-button
+                [icon]="favoritePressed() ? 'favorite' : 'unfavorite'"
+                [pressed]="favoritePressed()"
+                design="Transparent"
+                (ui5Click)="toggleFavorite()"
+            >
+            </ui5-toggle-button>
+        </div>
+
+        <div class="fd-col fd-col--3">
+            <ui5-toggle-button
+                icon="bookmark"
+                [pressed]="bookmarkPressed()"
+                design="Transparent"
+                (ui5Click)="toggleBookmark()"
+            >
+            </ui5-toggle-button>
+        </div>
+
+        <div class="fd-col fd-col--3">
+            <ui5-toggle-button
+                [icon]="playPressed() ? 'media-pause' : 'media-play'"
+                [pressed]="playPressed()"
+                design="Emphasized"
+                (ui5Click)="togglePlay()"
+            >
+            </ui5-toggle-button>
+        </div>
+
+        <div class="fd-col fd-col--3">
+            <ui5-toggle-button
+                [icon]="soundPressed() ? 'sound' : 'sound-off'"
+                [pressed]="soundPressed()"
+                design="Transparent"
+                (ui5Click)="toggleSound()"
+            >
+            </ui5-toggle-button>
+        </div>
+    </div>
+
+    <div class="fd-row">
+        <h5>Icon with Text:</h5>
+    </div>
+
+    <div class="fd-row">
+        <div class="fd-col fd-col--12">
+            <ui5-toggle-button icon="favorite" [pressed]="favoritePressed()" (ui5Click)="toggleFavorite()">
+                Add to Favorites
+            </ui5-toggle-button>
+        </div>
+    </div>
+</div>

libs/docs/ui5-webcomponents/toggle-button/examples/icons.ts

@@ -0,0 +1,40 @@
+import { Component, signal } from '@angular/core';
+import { ToggleButton } from '@fundamental-ngx/ui5-webcomponents/toggle-button';
+
+// Import SAP Icons
+import '@ui5/webcomponents-icons/dist/bookmark.js';
+import '@ui5/webcomponents-icons/dist/favorite.js';
+import '@ui5/webcomponents-icons/dist/media-pause.js';
+import '@ui5/webcomponents-icons/dist/media-play.js';
+import '@ui5/webcomponents-icons/dist/sound-off.js';
+import '@ui5/webcomponents-icons/dist/sound.js';
+import '@ui5/webcomponents-icons/dist/unfavorite.js';
+
+@Component({
+    selector: 'ui5-toggle-button-icons-sample',
+    templateUrl: './icons.html',
+    standalone: true,
+    imports: [ToggleButton]
+})
+export class ToggleButtonIconsSample {
+    readonly favoritePressed = signal(false);
+    readonly bookmarkPressed = signal(false);
+    readonly playPressed = signal(false);
+    readonly soundPressed = signal(true);
+
+    toggleFavorite(): void {
+        this.favoritePressed.update(() => !this.favoritePressed());
+    }
+
+    toggleBookmark(): void {
+        this.bookmarkPressed.update(() => !this.bookmarkPressed());
+    }
+
+    togglePlay(): void {
+        this.playPressed.update(() => !this.playPressed());
+    }
+
+    toggleSound(): void {
+        this.soundPressed.update(() => !this.soundPressed());
+    }
+}

libs/docs/ui5-webcomponents/toggle-button/examples/interactive.html

@@ -0,0 +1,65 @@
+<div class="fd-container">
+    <div class="fd-row">
+        <div class="fd-col fd-col--4">
+            <h5 for="design-select">Design:</h5>
+            <ui5-select
+                id="design-select"
+                [value]="selectedDesign()"
+                (ui5Change)="onDesignChange($event)"
+                class="fd-margin-bottom--md"
+            >
+                @for (design of designs; track design) {
+                <ui5-option [value]="design">{{ design }}</ui5-option>
+                }
+            </ui5-select>
+        </div>
+
+        <div class="fd-col fd-col--8">
+            <div class="fd-margin-bottom--sm">
+                <ui5-checkbox [checked]="isDisabled()" (ui5Change)="onDisabledChange($event)" text="Disabled">
+                </ui5-checkbox>
+            </div>
+
+            <div class="fd-margin-bottom--sm">
+                <ui5-checkbox [checked]="hasIcon()" (ui5Change)="onIconChange($event)" text="Show Icon"> </ui5-checkbox>
+            </div>
+
+            <div class="fd-margin-bottom--sm">
+                <ui5-checkbox [checked]="hasText()" (ui5Change)="onTextChange($event)" text="Show Text"> </ui5-checkbox>
+            </div>
+
+            <div class="fd-margin-bottom--sm">
+                <ui5-checkbox [checked]="isLoading()" (ui5Change)="onLoadingChange($event)" text="Loading State">
+                </ui5-checkbox>
+            </div>
+        </div>
+    </div>
+
+    <div class="fd-row">
+        <div class="fd-col fd-col--12">
+            <h5>Preview:</h5>
+            <ui5-toggle-button
+                [design]="selectedDesign()"
+                [pressed]="isPressed()"
+                [disabled]="isDisabled()"
+                [icon]="hasIcon() ? 'settings' : undefined"
+                [loading]="isLoading()"
+                (ui5Click)="onToggleClick()"
+            >
+                @if (hasText()) { Toggle Button }
+            </ui5-toggle-button>
+
+            <div class="fd-margin-top--md">
+                <h5>Configuration:</h5>
+                <ul>
+                    <li>Design: {{ selectedDesign() }}</li>
+                    <li>State: {{ isPressed() ? 'Pressed' : 'Unpressed' }}</li>
+                    <li>Disabled: {{ isDisabled() ? 'Yes' : 'No' }}</li>
+                    <li>Icon: {{ hasIcon() ? 'Yes' : 'No' }}</li>
+                    <li>Text: {{ hasText() ? 'Yes' : 'No' }}</li>
+                    <li>Loading: {{ isLoading() ? 'Yes' : 'No' }}</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>

libs/docs/ui5-webcomponents/toggle-button/examples/interactive.ts

@@ -0,0 +1,52 @@
+import { Component, signal, WritableSignal } from '@angular/core';
+import { ButtonDesign, CheckBox, Option, Select } from '@fundamental-ngx/ui5-webcomponents';
+import { ToggleButton } from '@fundamental-ngx/ui5-webcomponents/toggle-button';
+
+// Import SAP Icon
+import '@ui5/webcomponents-icons/dist/settings.js';
+
+@Component({
+    selector: 'ui5-toggle-button-interactive-sample',
+    templateUrl: './interactive.html',
+    standalone: true,
+    imports: [ToggleButton, Select, Option, CheckBox]
+})
+export class ToggleButtonInteractiveSample {
+    readonly designs: Array<keyof typeof ButtonDesign> = Object.keys(ButtonDesign) as Array<keyof typeof ButtonDesign>;
+
+    readonly selectedDesign: WritableSignal<keyof typeof ButtonDesign> = signal('Default');
+    readonly isPressed = signal(false);
+    readonly isDisabled = signal(false);
+    readonly hasIcon = signal(false);
+    readonly hasText = signal(true);
+    readonly isLoading = signal(false);
+
+    onDesignChange(event: any): void {
+        const selectedOption = event.detail?.selectedOption;
+        if (selectedOption) {
+            this.selectedDesign.set(selectedOption.getAttribute('value') || 'Default');
+        }
+    }
+
+    onToggleClick(): void {
+        if (!this.isDisabled() && !this.isLoading()) {
+            this.isPressed.update((v) => !v);
+        }
+    }
+
+    onDisabledChange(event: any): void {
+        this.isDisabled.set(event.target.checked);
+    }
+
+    onIconChange(event: any): void {
+        this.hasIcon.set(event.target.checked);
+    }
+
+    onTextChange(event: any): void {
+        this.hasText.set(event.target.checked);
+    }
+
+    onLoadingChange(event: any): void {
+        this.isLoading.set(event.target.checked);
+    }
+}

libs/docs/ui5-webcomponents/toggle-button/header/toggle-button-header.html

@@ -0,0 +1,9 @@
+<fd-doc-page>
+    <header>{{componentName}}</header>
+
+    <description [component]="componentName" [package]="packageName"></description>
+
+    <import module="ToggleButton" subPackage="toggle-button"></import>
+
+    <fd-header-tabs></fd-header-tabs>
+</fd-doc-page>

libs/docs/ui5-webcomponents/toggle-button/header/toggle-button-header.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import {
+    DescriptionComponent,
+    DocPageComponent,
+    HeaderComponent,
+    HeaderTabsComponent,
+    ImportComponent
+} from '@fundamental-ngx/docs/shared';
+
+@Component({
+    selector: 'ui5-toggle-button-header',
+    templateUrl: './toggle-button-header.html',
+    standalone: true,
+    imports: [DocPageComponent, HeaderComponent, DescriptionComponent, ImportComponent, HeaderTabsComponent]
+})
+export class ToggleButtonHeader {
+    componentName = 'ToggleButton';
+    packageName = '@ui5/webcomponents';
+}

libs/docs/ui5-webcomponents/toggle-button/index.ts

@@ -0,0 +1,19 @@
+import { Routes } from '@angular/router';
+import { ToggleButtonHeader } from './header/toggle-button-header';
+import { ToggleButtonDocs } from './toggle-button-docs';
+
+export const ROUTES: Routes = [
+    {
+        path: '',
+        component: ToggleButtonHeader,
+        data: { primary: true },
+        children: [
+            {
+                path: '',
+                component: ToggleButtonDocs
+            }
+        ]
+    }
+];
+export const LIBRARY_NAME = 'toggle-button';
+export const API_FILE_KEY = 'toggleButton';