Skip to content

Commit 903838f

Browse files
bsastregxbsastregx
authored
[showcase][switch] Add Switch to the showcase (#570)
* `[showcase][switch]` Add showcase page * Update yarn.lock
1 parent 5f3fa9f commit 903838f

File tree

6 files changed

+2090
-1160
lines changed

6 files changed

+2090
-1160
lines changed

‎packages/showcase/src/app/app.routes.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,13 @@ const childRoutes: Routes = [
124124
m => m.SliderComponent
125125
)
126126
},
127+
{
128+
path: COMPONENTS_ROUTES.SWITCH.substring(1),
129+
loadComponent: () =>
130+
import("./components/switch/switch.component").then(
131+
m => m.SwitchComponent
132+
)
133+
},
127134
{
128135
path: COMPONENTS_ROUTES.TAB.substring(1),
129136
loadComponent: () =>

‎packages/showcase/src/app/bundles-and-url-mapping.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export const COMPONENTS_ROUTES = {
1616
SEARCH: "/components/search",
1717
SEGMENTED_CONTROL: "/components/segmented-control",
1818
SLIDER: "/components/slider",
19+
SWITCH: "/components/switch",
1920
TAB: "/components/tab",
2021
TABULAR_GRID: "/components/tabular-grid",
2122
TOOLTIP: "/components/tooltip",
@@ -53,6 +54,7 @@ export const bundleMapping = {
5354
[COMPONENTS_ROUTES.SEARCH]: "components/edit",
5455
[COMPONENTS_ROUTES.SEGMENTED_CONTROL]: "components/segmented-control",
5556
[COMPONENTS_ROUTES.SLIDER]: "components/slider",
57+
[COMPONENTS_ROUTES.SWITCH]: "components/switch",
5658
[COMPONENTS_ROUTES.TAB]: "components/tab",
5759
[COMPONENTS_ROUTES.TABULAR_GRID]: "components/tabular-grid",
5860
[COMPONENTS_ROUTES.TOOLTIP]: "components/tooltip",
@@ -83,6 +85,7 @@ export const URL_MAPPING = {
8385
[COMPONENTS_ROUTES.SEARCH]: "Search",
8486
[COMPONENTS_ROUTES.SEGMENTED_CONTROL]: "Segmented Control",
8587
[COMPONENTS_ROUTES.SLIDER]: "Slider",
88+
[COMPONENTS_ROUTES.SWITCH]: "Switch",
8689
[COMPONENTS_ROUTES.TAB]: "Tab",
8790
[COMPONENTS_ROUTES.TABULAR_GRID]: "Tabular Grid",
8891
[COMPONENTS_ROUTES.TOOLTIP]: "Tooltip",

‎packages/showcase/src/app/components/switch/metadata.ts‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import type { ComponentMetadata } from "../../../common/types";
2+
3+
const CHECKED_CAPTION = "On";
4+
const UNCHECKED_CAPTION = "Off";
5+
const CHECKED_VALUE = "On";
6+
const UNCHECKED_VALUE = "Off";
7+
8+
export const switchMetadata = {
9+
title: "Switch",
10+
description:
11+
"A switch component is a user interface control designed to toggle between two states, typically on and off. It provides a clear, accessible way for users to make binary choices, often used for settings, preferences, or enabling features, and enhances interaction by offering immediate visual feedback.",
12+
codeSnippets: {
13+
smallChecked: {
14+
linkId: "small-checkewd",
15+
title: "1.1. Small: Checked",
16+
template: {
17+
tag: "ch-switch",
18+
class: "switch-small",
19+
properties: [
20+
{ name: "checkedCaption", value: CHECKED_CAPTION },
21+
{ name: "unCheckedCaption", value: UNCHECKED_CAPTION },
22+
{ name: "checkedValue", value: CHECKED_VALUE },
23+
{ name: "unCheckedValue", value: UNCHECKED_VALUE }
24+
]
25+
}
26+
},
27+
28+
smallUnchecked: {
29+
linkId: "small-uncheckewd",
30+
title: "1.2. Small: Unchecked",
31+
template: {
32+
tag: "ch-switch",
33+
class: "switch-small",
34+
properties: [
35+
{ name: "checkedCaption", value: CHECKED_CAPTION },
36+
{ name: "unCheckedCaption", value: UNCHECKED_CAPTION },
37+
{ name: "checkedValue", value: CHECKED_VALUE },
38+
{ name: "unCheckedValue", value: UNCHECKED_VALUE }
39+
]
40+
}
41+
},
42+
43+
smallDisabled: {
44+
linkId: "small-disabled",
45+
title: "1.3. Small: Disabled",
46+
template: {
47+
tag: "ch-switch",
48+
class: "switch-small",
49+
properties: [
50+
{ name: "checkedCaption", value: CHECKED_CAPTION },
51+
{ name: "unCheckedCaption", value: UNCHECKED_CAPTION },
52+
{ name: "checkedValue", value: CHECKED_VALUE },
53+
{ name: "unCheckedValue", value: UNCHECKED_VALUE },
54+
{ name: "disabled", value: true, variable: true }
55+
]
56+
}
57+
},
58+
59+
largeChecked: {
60+
linkId: "large-checkewd",
61+
title: "2.1. Large: Checked",
62+
template: {
63+
tag: "ch-switch",
64+
class: "switch-large",
65+
properties: [
66+
{ name: "checkedCaption", value: CHECKED_CAPTION },
67+
{ name: "unCheckedCaption", value: UNCHECKED_CAPTION },
68+
{ name: "checkedValue", value: CHECKED_VALUE },
69+
{ name: "unCheckedValue", value: UNCHECKED_VALUE }
70+
]
71+
}
72+
},
73+
74+
largeUnchecked: {
75+
linkId: "large-uncheckewd",
76+
title: "2.2. Large: Unchecked",
77+
template: {
78+
tag: "ch-switch",
79+
class: "switch-large",
80+
properties: [
81+
{ name: "checkedCaption", value: CHECKED_CAPTION },
82+
{ name: "unCheckedCaption", value: UNCHECKED_CAPTION },
83+
{ name: "checkedValue", value: CHECKED_VALUE },
84+
{ name: "unCheckedValue", value: UNCHECKED_VALUE }
85+
]
86+
}
87+
},
88+
89+
largeDisabled: {
90+
linkId: "large-disabled",
91+
title: "2.3. Large: Disabled",
92+
template: {
93+
tag: "ch-switch",
94+
class: "switch-large",
95+
properties: [
96+
{ name: "checkedCaption", value: CHECKED_CAPTION },
97+
{ name: "unCheckedCaption", value: UNCHECKED_CAPTION },
98+
{ name: "checkedValue", value: CHECKED_VALUE },
99+
{ name: "unCheckedValue", value: UNCHECKED_VALUE },
100+
{ name: "disabled", value: true, variable: true }
101+
]
102+
}
103+
}
104+
}
105+
} as const satisfies ComponentMetadata;

‎packages/showcase/src/app/components/switch/switch.component.html‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
<runtime-bundles [bundles]="['components/switch', 'components/checkbox']" />
2+
3+
<header>
4+
<h1 class="heading-1">{{ metadata.title }}</h1>
5+
</header>
6+
7+
<p class="body-regular-l">{{ metadata.description }}</p>
8+
9+
<ol class="filters elevation-1">
10+
@for (switchEntry of this.switches().entries(); track switchEntry[0]) {
11+
@let switchName = switchEntry[0];
12+
13+
<li class="filters-checkbox">
14+
<ch-checkbox
15+
class="checkbox"
16+
[caption]="switchName"
17+
[checkedValue]="'true'"
18+
[unCheckedValue]="'false'"
19+
[value]="switchEntry[1].toString()"
20+
(input)="updateRenderedSwitch(switchName)($event)"
21+
></ch-checkbox>
22+
</li>
23+
}
24+
</ol>
25+
26+
<!-- switch small -->
27+
28+
<section aria-labelledby="switch-small">
29+
<h2 id="switch-small" class="heading-2">
30+
<a routerLink="." fragment="button-primary">1. Switch Small</a>
31+
</h2>
32+
33+
@if (showSmallChecked()) {
34+
<code-snippet
35+
[codeSnippet]="codeSnippets.smallChecked"
36+
[language]="'ts'"
37+
[headingLevel]="3"
38+
>
39+
<ch-switch
40+
class="switch-small"
41+
[checkedCaption]="'On'"
42+
[unCheckedCaption]="'Off'"
43+
[checkedValue]="'checked'"
44+
[unCheckedValue]="'unchecked'"
45+
[value]="'checked'"
46+
></ch-switch>
47+
</code-snippet>
48+
}
49+
50+
@if (showSmallUnchecked()) {
51+
<code-snippet
52+
[codeSnippet]="codeSnippets.smallUnchecked"
53+
[language]="'ts'"
54+
[headingLevel]="3"
55+
>
56+
<ch-switch
57+
class="switch-small"
58+
[checkedCaption]="'On'"
59+
[unCheckedCaption]="'Off'"
60+
[checkedValue]="'checked'"
61+
[unCheckedValue]="'unchecked'"
62+
[value]="'unchecked'"
63+
></ch-switch>
64+
</code-snippet>
65+
}
66+
67+
@if (showSmallDisabled()) {
68+
<code-snippet
69+
[codeSnippet]="codeSnippets.smallDisabled"
70+
[language]="'ts'"
71+
[headingLevel]="3"
72+
>
73+
<ch-switch
74+
class="switch-small"
75+
[checkedCaption]="'On'"
76+
[unCheckedCaption]="'Off'"
77+
[checkedValue]="'checked'"
78+
[unCheckedValue]="'unchecked'"
79+
[value]="'checked'"
80+
disabled
81+
></ch-switch>
82+
</code-snippet>
83+
}
84+
</section>
85+
86+
<!-- switch large -->
87+
88+
<section aria-labelledby="switch-large">
89+
<h2 id="switch-large" class="heading-2">
90+
<a routerLink="." fragment="button-primary">2. Switch Large</a>
91+
</h2>
92+
93+
@if (showLargeChecked()) {
94+
<code-snippet
95+
[codeSnippet]="codeSnippets.largeChecked"
96+
[language]="'ts'"
97+
[headingLevel]="3"
98+
>
99+
<ch-switch
100+
class="switch-large"
101+
[checkedCaption]="'On'"
102+
[unCheckedCaption]="'Off'"
103+
[checkedValue]="'checked'"
104+
[unCheckedValue]="'unchecked'"
105+
[value]="'checked'"
106+
></ch-switch>
107+
</code-snippet>
108+
}
109+
110+
@if (showLargeUnchecked()) {
111+
<code-snippet
112+
[codeSnippet]="codeSnippets.largeUnchecked"
113+
[language]="'ts'"
114+
[headingLevel]="3"
115+
>
116+
<ch-switch
117+
class="switch-large"
118+
[checkedCaption]="'On'"
119+
[unCheckedCaption]="'Off'"
120+
[checkedValue]="'checked'"
121+
[unCheckedValue]="'unchecked'"
122+
[value]="'unchecked'"
123+
></ch-switch>
124+
</code-snippet>
125+
}
126+
127+
@if (showLargeDisabled()) {
128+
<code-snippet
129+
[codeSnippet]="codeSnippets.largeDisabled"
130+
[language]="'ts'"
131+
[headingLevel]="3"
132+
>
133+
<ch-switch
134+
class="switch-large"
135+
[checkedCaption]="'On'"
136+
[unCheckedCaption]="'Off'"
137+
[checkedValue]="'checked'"
138+
[unCheckedValue]="'unchecked'"
139+
[value]="'checked'"
140+
disabled
141+
></ch-switch>
142+
</code-snippet>
143+
}
144+
</section>

‎packages/showcase/src/app/components/switch/switch.component.ts‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import {
2+
ChangeDetectionStrategy,
3+
Component,
4+
computed,
5+
input,
6+
CUSTOM_ELEMENTS_SCHEMA,
7+
inject
8+
} from "@angular/core";
9+
import { CommonModule } from "@angular/common";
10+
import type { ChCheckboxCustomEvent } from "@genexus/chameleon-controls-library";
11+
12+
import { switchMetadata } from "./metadata";
13+
import { CodeSnippetComponent } from "../../../user-controls/code-snippet/code-snippet.component";
14+
import { RuntimeBundlesComponent } from "../../../user-controls/runtime-bundles/runtime-bundles.component";
15+
import { Router } from "@angular/router";
16+
17+
@Component({
18+
selector: "components-switch",
19+
templateUrl: "./switch.component.html",
20+
changeDetection: ChangeDetectionStrategy.OnPush,
21+
imports: [CommonModule, CodeSnippetComponent, RuntimeBundlesComponent],
22+
host: { class: "main-content" },
23+
schemas: [CUSTOM_ELEMENTS_SCHEMA]
24+
})
25+
export class SwitchComponent {
26+
metadata = switchMetadata;
27+
codeSnippets = switchMetadata.codeSnippets;
28+
router = inject(Router);
29+
30+
hiddenSwitches = input<string>("");
31+
/**
32+
* This map is useful for rendering checkboxes to determine whether a
33+
* migration section must be rendered.
34+
*/
35+
switches = computed(() => {
36+
const newMigrations = new Map<string, boolean>([
37+
["Small: Checked", true],
38+
["Small: Unchecked", true],
39+
["Small: Disabled", true],
40+
41+
["Large: Checked", true],
42+
["Large: Unchecked", true],
43+
["Large: Disabled", true]
44+
]);
45+
46+
// Update the rendered migrations by watching changes for the
47+
// hiddenSwitches query parameter
48+
const hiddenSwitchesArray = this.hiddenSwitches()
49+
? this.hiddenSwitches().split(",")
50+
: [];
51+
52+
// Display all typographies
53+
newMigrations.forEach((_, migrationName) =>
54+
newMigrations.set(migrationName, true)
55+
);
56+
57+
// Remove those typographies that must be hidden
58+
hiddenSwitchesArray.forEach(hiddenMigrationName =>
59+
newMigrations.set(hiddenMigrationName, false)
60+
);
61+
62+
return newMigrations;
63+
});
64+
65+
showSmallChecked = computed(() => this.switches().get("Small: Checked"));
66+
showSmallUnchecked = computed(() => this.switches().get("Small: Unchecked"));
67+
showSmallDisabled = computed(() => this.switches().get("Small: Disabled"));
68+
69+
showLargeChecked = computed(() => this.switches().get("Large: Checked"));
70+
showLargeUnchecked = computed(() => this.switches().get("Large: Unchecked"));
71+
showLargeDisabled = computed(() => this.switches().get("Large: Disabled"));
72+
73+
updateRenderedSwitch =
74+
(switchName: string) => (event: ChCheckboxCustomEvent<string>) => {
75+
this.switches().set(switchName, event.detail === "true");
76+
77+
let hiddenSwitchesQueryParm = "";
78+
79+
this.switches().forEach((renderDialog, switchName) => {
80+
if (!renderDialog) {
81+
hiddenSwitchesQueryParm +=
82+
hiddenSwitchesQueryParm === "" ? switchName : "," + switchName;
83+
}
84+
});
85+
86+
this.router.navigate([], {
87+
queryParams: { hiddenSwitches: hiddenSwitchesQueryParm },
88+
queryParamsHandling: "merge" // Conserve other query parameters
89+
});
90+
};
91+
}

0 commit comments

Comments
 (0)