Skip to content

Commit 1eafd17

Browse files
artembelikartembelik
committed
refactor: toggle
1 parent 67b0e08 commit 1eafd17

File tree

7 files changed

+104
-34
lines changed

7 files changed

+104
-34
lines changed

‎packages/components-dev/toggle/main.ts

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1-
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2-
import { DemoModule } from './module';
1+
import { bootstrapApplication } from '@angular/platform-browser';
2+
import { provideAnimations } from '@angular/platform-browser/animations';
3+
import { ToggleDev } from './module';
34

4-
platformBrowserDynamic()
5-
.bootstrapModule(DemoModule)
6-
.catch((error) => console.error(error));
5+
bootstrapApplication(ToggleDev, {
6+
providers: [
7+
provideAnimations()
8+
]
9+
}).catch((error) => console.error(error));

‎packages/components-dev/toggle/module.ts

Lines changed: 32 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,43 @@
1-
import { Component, NgModule, ViewEncapsulation } from '@angular/core';
1+
import { JsonPipe } from '@angular/common';
2+
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
23
import { FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
3-
import { BrowserModule } from '@angular/platform-browser';
4-
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
4+
import { KbqButtonModule } from '@koobiq/components/button';
55
import { ThemePalette } from '@koobiq/components/core';
66
import { KbqFormFieldModule } from '@koobiq/components/form-field';
7-
import { KbqButtonModule } from '../../components/button/';
8-
import { KbqToggleModule } from '../../components/toggle/';
7+
import { KbqToggleModule } from '@koobiq/components/toggle';
8+
import { ToggleExamplesModule } from 'packages/docs-examples/components/toggle';
9+
import { DevThemeToggle } from '../theme-toggle';
910

1011
@Component({
12+
standalone: true,
13+
imports: [ToggleExamplesModule],
14+
selector: 'dev-toggle-examples',
15+
template: `
16+
<toggle-multiline-example />
17+
`,
18+
changeDetection: ChangeDetectionStrategy.OnPush
19+
})
20+
export class DevToggleExamples {}
21+
22+
@Component({
23+
standalone: true,
1124
selector: 'app',
25+
imports: [
26+
FormsModule,
27+
KbqToggleModule,
28+
KbqButtonModule,
29+
KbqFormFieldModule,
30+
ReactiveFormsModule,
31+
JsonPipe,
32+
DevToggleExamples,
33+
DevThemeToggle
34+
],
1235
templateUrl: './template.html',
13-
styleUrls: ['./styles.scss'],
14-
encapsulation: ViewEncapsulation.None
36+
styleUrl: './styles.scss',
37+
encapsulation: ViewEncapsulation.None,
38+
changeDetection: ChangeDetectionStrategy.OnPush
1539
})
16-
export class DemoComponent {
40+
export class ToggleDev {
1741
themePalette = ThemePalette;
1842

1943
valueSmallOff: boolean = false;
@@ -30,22 +54,3 @@ export class DemoComponent {
3054
this.toggleControl.valueChanges.subscribe(console.log);
3155
}
3256
}
33-
34-
@NgModule({
35-
declarations: [
36-
DemoComponent
37-
],
38-
imports: [
39-
BrowserModule,
40-
BrowserAnimationsModule,
41-
FormsModule,
42-
KbqToggleModule,
43-
KbqButtonModule,
44-
KbqFormFieldModule,
45-
ReactiveFormsModule
46-
],
47-
bootstrap: [
48-
DemoComponent
49-
]
50-
})
51-
export class DemoModule {}

‎packages/components-dev/toggle/template.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
<dev-theme-toggle />
2+
3+
<hr />
4+
5+
<dev-toggle-examples />
6+
7+
<hr />
8+
19
<div class="container">
210
<h1>Toggles</h1>
311
<kbq-toggle [formControl]="toggleControl" />

‎packages/components/toggle/toggle.ru.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
11
<!-- example(toggle-overview) -->
2+
3+
### Многострочный
4+
5+
<!-- example(toggle-multiline) -->

‎packages/docs-examples/components/toggle/index.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { NgModule } from '@angular/core';
2+
import { ToggleMultilineExample } from './toggle-multiline/toggle-multiline-example';
23
import { ToggleOverviewExample } from './toggle-overview/toggle-overview-example';
34

4-
export { ToggleOverviewExample };
5+
export { ToggleMultilineExample, ToggleOverviewExample };
56

67
const EXAMPLES = [
7-
ToggleOverviewExample
8+
ToggleOverviewExample,
9+
ToggleMultilineExample
810
];
911

1012
@NgModule({

‎packages/docs-examples/components/toggle/toggle-multiline/toggle-multiline-example.ts

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { KbqFormFieldModule } from '@koobiq/components/form-field';
3+
import { KbqToggleModule } from '@koobiq/components/toggle';
4+
5+
/**
6+
* @title Toggle multiline example
7+
*/
8+
@Component({
9+
standalone: true,
10+
selector: 'toggle-multiline-example',
11+
imports: [KbqToggleModule, KbqFormFieldModule],
12+
template: `
13+
<kbq-toggle>
14+
I accept the security policy terms and acknowledge the responsibility to safeguard sensitive information
15+
<kbq-hint>
16+
Please review our security policy for detailed information about data protection and privacy standards.
17+
By checking this box, you confirm that you understand and agree to comply with all security
18+
requirements.
19+
</kbq-hint>
20+
</kbq-toggle>
21+
`,
22+
styles: `
23+
:host {
24+
display: flex;
25+
justify-content: center;
26+
}
27+
28+
.kbq-toggle {
29+
max-width: 400px;
30+
}
31+
`,
32+
changeDetection: ChangeDetectionStrategy.OnPush
33+
})
34+
export class ToggleMultilineExample {}

‎packages/docs-examples/example-module.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3499,6 +3499,18 @@ export const EXAMPLE_COMPONENTS: {[id: string]: LiveExample} = {
34993499
"primaryFile": "toast-user-data-example.ts",
35003500
"importPath": "components/toast"
35013501
},
3502+
"toggle-multiline": {
3503+
"packagePath": "components/toggle/toggle-multiline",
3504+
"title": "Toggle multiline example",
3505+
"componentName": "ToggleMultilineExample",
3506+
"files": [
3507+
"toggle-multiline-example.ts"
3508+
],
3509+
"selector": "toggle-multiline-example",
3510+
"additionalComponents": [],
3511+
"primaryFile": "toggle-multiline-example.ts",
3512+
"importPath": "components/toggle"
3513+
},
35023514
"toggle-overview": {
35033515
"packagePath": "components/toggle/toggle-overview",
35043516
"title": "Toggle",
@@ -4574,6 +4586,8 @@ return import('@koobiq/docs-examples/components/toast');
45744586
return import('@koobiq/docs-examples/components/toast');
45754587
case 'toast-user-data':
45764588
return import('@koobiq/docs-examples/components/toast');
4589+
case 'toggle-multiline':
4590+
return import('@koobiq/docs-examples/components/toggle');
45774591
case 'toggle-overview':
45784592
return import('@koobiq/docs-examples/components/toggle');
45794593
case 'tooltip-arrow-and-offset':

0 commit comments

Comments
 (0)