Skip to content

Commit 984a11d

Browse files
MariaIDinevaMariaIDineva
authored
docs: add docs for some more webcomponents (#13602)
* docs: add docs for toggle-button * docs: add docs for token * docs: add docs for tokenizer
1 parent 9aa93e0 commit 984a11d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1170
-1
lines changed

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,5 +40,8 @@ export const API_FILES = {
4040
textArea: ['TextArea'],
4141
timePicker: ['TimePicker'],
4242
title: ['Title'],
43-
toast: ['Toast']
43+
toast: ['Toast'],
44+
toggleButton: ['ToggleButton'],
45+
token: ['Token'],
46+
tokenizer: ['Tokenizer']
4447
};

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,18 @@
141141
{
142142
"url": "ui5-webcomponents/toast",
143143
"name": "Toast"
144+
},
145+
{
146+
"url": "ui5-webcomponents/toggle-button",
147+
"name": "Toggle Button"
148+
},
149+
{
150+
"url": "ui5-webcomponents/token",
151+
"name": "Token"
152+
},
153+
{
154+
"url": "ui5-webcomponents/tokenizer",
155+
"name": "Tokenizer"
144156
}
145157
]
146158
}

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,18 @@ const componentRoutes = [
154154
{
155155
path: 'toast',
156156
loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents/toast').then(configureLibRoutes)
157+
},
158+
{
159+
path: 'toggle-button',
160+
loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents/toggle-button').then(configureLibRoutes)
161+
},
162+
{
163+
path: 'token',
164+
loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents/token').then(configureLibRoutes)
165+
},
166+
{
167+
path: 'tokenizer',
168+
loadChildren: () => import('@fundamental-ngx/docs/ui5-webcomponents/tokenizer').then(configureLibRoutes)
157169
}
158170
];
159171

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<ui5-toggle-button [pressed]="isPressed()" (ui5Click)="onToggleClick()"> Toggle Me </ui5-toggle-button>
2+
3+
<p>
4+
<ui5-label>Current state: <strong>{{ isPressed() ? 'Pressed' : 'Unpressed' }}</strong></ui5-label>
5+
</p>

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Component, signal } from '@angular/core';
2+
import { Label } from '@fundamental-ngx/ui5-webcomponents/label';
3+
import { ToggleButton } from '@fundamental-ngx/ui5-webcomponents/toggle-button';
4+
5+
@Component({
6+
selector: 'ui5-toggle-button-basic-sample',
7+
templateUrl: './basic-sample.html',
8+
standalone: true,
9+
imports: [ToggleButton, Label]
10+
})
11+
export class ToggleButtonBasicSample {
12+
readonly isPressed = signal(false);
13+
14+
onToggleClick(): void {
15+
this.isPressed.update(() => !this.isPressed());
16+
}
17+
}

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<div class="fd-container">
2+
<div class="fd-row">
3+
@for (design of designs; track design) {
4+
<div class="fd-col fd-col--4 fd-margin-bottom--md">
5+
<ui5-toggle-button [design]="design" [pressed]="pressedStates()[design]" (ui5Click)="onToggle(design)">
6+
{{ design }} Button
7+
</ui5-toggle-button>
8+
<p class="fd-margin-top--sm">
9+
State: <strong>{{ pressedStates()[design] ? 'Pressed' : 'Unpressed' }}</strong>
10+
</p>
11+
</div>
12+
}
13+
</div>
14+
</div>

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { Component, signal } from '@angular/core';
2+
import { ButtonDesign } from '@fundamental-ngx/ui5-webcomponents';
3+
import { ToggleButton } from '@fundamental-ngx/ui5-webcomponents/toggle-button';
4+
5+
// Import Fundamental Styles
6+
import 'fundamental-styles/dist/layout-grid.css';
7+
import 'fundamental-styles/dist/margins.css';
8+
9+
@Component({
10+
selector: 'ui5-toggle-button-designs-sample',
11+
templateUrl: './designs.html',
12+
standalone: true,
13+
imports: [ToggleButton]
14+
})
15+
export class ToggleButtonDesignsSample {
16+
readonly designs: Array<keyof typeof ButtonDesign> = Object.keys(ButtonDesign) as Array<keyof typeof ButtonDesign>;
17+
readonly pressedStates = signal<Record<string, boolean>>({
18+
Default: false,
19+
Emphasized: false,
20+
Positive: false,
21+
Negative: false,
22+
Transparent: false,
23+
Attention: false
24+
});
25+
26+
onToggle(design: string): void {
27+
this.pressedStates.update((states) => ({
28+
...states,
29+
[design]: !states[design]
30+
}));
31+
}
32+
}

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<div class="fd-container">
2+
<div class="fd-row">
3+
<h5>Icon Only:</h5>
4+
</div>
5+
6+
<div class="fd-row">
7+
<div class="fd-col fd-col--3">
8+
<ui5-toggle-button
9+
[icon]="favoritePressed() ? 'favorite' : 'unfavorite'"
10+
[pressed]="favoritePressed()"
11+
design="Transparent"
12+
(ui5Click)="toggleFavorite()"
13+
>
14+
</ui5-toggle-button>
15+
</div>
16+
17+
<div class="fd-col fd-col--3">
18+
<ui5-toggle-button
19+
icon="bookmark"
20+
[pressed]="bookmarkPressed()"
21+
design="Transparent"
22+
(ui5Click)="toggleBookmark()"
23+
>
24+
</ui5-toggle-button>
25+
</div>
26+
27+
<div class="fd-col fd-col--3">
28+
<ui5-toggle-button
29+
[icon]="playPressed() ? 'media-pause' : 'media-play'"
30+
[pressed]="playPressed()"
31+
design="Emphasized"
32+
(ui5Click)="togglePlay()"
33+
>
34+
</ui5-toggle-button>
35+
</div>
36+
37+
<div class="fd-col fd-col--3">
38+
<ui5-toggle-button
39+
[icon]="soundPressed() ? 'sound' : 'sound-off'"
40+
[pressed]="soundPressed()"
41+
design="Transparent"
42+
(ui5Click)="toggleSound()"
43+
>
44+
</ui5-toggle-button>
45+
</div>
46+
</div>
47+
48+
<div class="fd-row">
49+
<h5>Icon with Text:</h5>
50+
</div>
51+
52+
<div class="fd-row">
53+
<div class="fd-col fd-col--12">
54+
<ui5-toggle-button icon="favorite" [pressed]="favoritePressed()" (ui5Click)="toggleFavorite()">
55+
Add to Favorites
56+
</ui5-toggle-button>
57+
</div>
58+
</div>
59+
</div>

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Component, signal } from '@angular/core';
2+
import { ToggleButton } from '@fundamental-ngx/ui5-webcomponents/toggle-button';
3+
4+
// Import SAP Icons
5+
import '@ui5/webcomponents-icons/dist/bookmark.js';
6+
import '@ui5/webcomponents-icons/dist/favorite.js';
7+
import '@ui5/webcomponents-icons/dist/media-pause.js';
8+
import '@ui5/webcomponents-icons/dist/media-play.js';
9+
import '@ui5/webcomponents-icons/dist/sound-off.js';
10+
import '@ui5/webcomponents-icons/dist/sound.js';
11+
import '@ui5/webcomponents-icons/dist/unfavorite.js';
12+
13+
@Component({
14+
selector: 'ui5-toggle-button-icons-sample',
15+
templateUrl: './icons.html',
16+
standalone: true,
17+
imports: [ToggleButton]
18+
})
19+
export class ToggleButtonIconsSample {
20+
readonly favoritePressed = signal(false);
21+
readonly bookmarkPressed = signal(false);
22+
readonly playPressed = signal(false);
23+
readonly soundPressed = signal(true);
24+
25+
toggleFavorite(): void {
26+
this.favoritePressed.update(() => !this.favoritePressed());
27+
}
28+
29+
toggleBookmark(): void {
30+
this.bookmarkPressed.update(() => !this.bookmarkPressed());
31+
}
32+
33+
togglePlay(): void {
34+
this.playPressed.update(() => !this.playPressed());
35+
}
36+
37+
toggleSound(): void {
38+
this.soundPressed.update(() => !this.soundPressed());
39+
}
40+
}

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

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<div class="fd-container">
2+
<div class="fd-row">
3+
<div class="fd-col fd-col--4">
4+
<h5 for="design-select">Design:</h5>
5+
<ui5-select
6+
id="design-select"
7+
[value]="selectedDesign()"
8+
(ui5Change)="onDesignChange($event)"
9+
class="fd-margin-bottom--md"
10+
>
11+
@for (design of designs; track design) {
12+
<ui5-option [value]="design">{{ design }}</ui5-option>
13+
}
14+
</ui5-select>
15+
</div>
16+
17+
<div class="fd-col fd-col--8">
18+
<div class="fd-margin-bottom--sm">
19+
<ui5-checkbox [checked]="isDisabled()" (ui5Change)="onDisabledChange($event)" text="Disabled">
20+
</ui5-checkbox>
21+
</div>
22+
23+
<div class="fd-margin-bottom--sm">
24+
<ui5-checkbox [checked]="hasIcon()" (ui5Change)="onIconChange($event)" text="Show Icon"> </ui5-checkbox>
25+
</div>
26+
27+
<div class="fd-margin-bottom--sm">
28+
<ui5-checkbox [checked]="hasText()" (ui5Change)="onTextChange($event)" text="Show Text"> </ui5-checkbox>
29+
</div>
30+
31+
<div class="fd-margin-bottom--sm">
32+
<ui5-checkbox [checked]="isLoading()" (ui5Change)="onLoadingChange($event)" text="Loading State">
33+
</ui5-checkbox>
34+
</div>
35+
</div>
36+
</div>
37+
38+
<div class="fd-row">
39+
<div class="fd-col fd-col--12">
40+
<h5>Preview:</h5>
41+
<ui5-toggle-button
42+
[design]="selectedDesign()"
43+
[pressed]="isPressed()"
44+
[disabled]="isDisabled()"
45+
[icon]="hasIcon() ? 'settings' : undefined"
46+
[loading]="isLoading()"
47+
(ui5Click)="onToggleClick()"
48+
>
49+
@if (hasText()) { Toggle Button }
50+
</ui5-toggle-button>
51+
52+
<div class="fd-margin-top--md">
53+
<h5>Configuration:</h5>
54+
<ul>
55+
<li>Design: {{ selectedDesign() }}</li>
56+
<li>State: {{ isPressed() ? 'Pressed' : 'Unpressed' }}</li>
57+
<li>Disabled: {{ isDisabled() ? 'Yes' : 'No' }}</li>
58+
<li>Icon: {{ hasIcon() ? 'Yes' : 'No' }}</li>
59+
<li>Text: {{ hasText() ? 'Yes' : 'No' }}</li>
60+
<li>Loading: {{ isLoading() ? 'Yes' : 'No' }}</li>
61+
</ul>
62+
</div>
63+
</div>
64+
</div>
65+
</div>

0 commit comments

Comments
 (0)