diff --git a/packages/components-dev/radio/module.ts b/packages/components-dev/radio/module.ts index 4462a7022..266384e0d 100644 --- a/packages/components-dev/radio/module.ts +++ b/packages/components-dev/radio/module.ts @@ -4,6 +4,7 @@ import { ThemePalette } from '@koobiq/components/core'; import { KbqFormFieldModule } from '@koobiq/components/form-field'; import { KbqRadioChange, KbqRadioModule } from '@koobiq/components/radio'; import { RadioExamplesModule } from 'packages/docs-examples/components/radio'; +import { DevThemeToggle } from '../theme-toggle'; @Component({ standalone: true, @@ -17,6 +18,8 @@ import { RadioExamplesModule } from 'packages/docs-examples/components/radio';
+
+ `, changeDetection: ChangeDetectionStrategy.OnPush }) @@ -28,7 +31,8 @@ export class DevRadioExamples {} FormsModule, KbqFormFieldModule, KbqRadioModule, - DevRadioExamples + DevRadioExamples, + DevThemeToggle ], selector: 'app', templateUrl: './template.html', diff --git a/packages/components-dev/radio/template.html b/packages/components-dev/radio/template.html index 7da98b55e..8dcef5836 100644 --- a/packages/components-dev/radio/template.html +++ b/packages/components-dev/radio/template.html @@ -1,3 +1,11 @@ + + +
+ + + +
+
@@ -83,7 +91,3 @@
- -
- - diff --git a/packages/components-dev/toggle/main.ts b/packages/components-dev/toggle/main.ts index f06d549ed..2160535dd 100644 --- a/packages/components-dev/toggle/main.ts +++ b/packages/components-dev/toggle/main.ts @@ -1,6 +1,9 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DemoModule } from './module'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { provideAnimations } from '@angular/platform-browser/animations'; +import { ToggleDev } from './module'; -platformBrowserDynamic() - .bootstrapModule(DemoModule) - .catch((error) => console.error(error)); +bootstrapApplication(ToggleDev, { + providers: [ + provideAnimations() + ] +}).catch((error) => console.error(error)); diff --git a/packages/components-dev/toggle/module.ts b/packages/components-dev/toggle/module.ts index b03e0ab30..10b6a2876 100644 --- a/packages/components-dev/toggle/module.ts +++ b/packages/components-dev/toggle/module.ts @@ -1,19 +1,43 @@ -import { Component, NgModule, ViewEncapsulation } from '@angular/core'; +import { JsonPipe } from '@angular/common'; +import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core'; import { FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms'; -import { BrowserModule } from '@angular/platform-browser'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { KbqButtonModule } from '@koobiq/components/button'; import { ThemePalette } from '@koobiq/components/core'; import { KbqFormFieldModule } from '@koobiq/components/form-field'; -import { KbqButtonModule } from '../../components/button/'; -import { KbqToggleModule } from '../../components/toggle/'; +import { KbqToggleModule } from '@koobiq/components/toggle'; +import { ToggleExamplesModule } from 'packages/docs-examples/components/toggle'; +import { DevThemeToggle } from '../theme-toggle'; @Component({ + standalone: true, + imports: [ToggleExamplesModule], + selector: 'dev-toggle-examples', + template: ` + + `, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class DevToggleExamples {} + +@Component({ + standalone: true, selector: 'app', + imports: [ + FormsModule, + KbqToggleModule, + KbqButtonModule, + KbqFormFieldModule, + ReactiveFormsModule, + JsonPipe, + DevToggleExamples, + DevThemeToggle + ], templateUrl: './template.html', - styleUrls: ['./styles.scss'], - encapsulation: ViewEncapsulation.None + styleUrl: './styles.scss', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush }) -export class DemoComponent { +export class ToggleDev { themePalette = ThemePalette; valueSmallOff: boolean = false; @@ -30,22 +54,3 @@ export class DemoComponent { this.toggleControl.valueChanges.subscribe(console.log); } } - -@NgModule({ - declarations: [ - DemoComponent - ], - imports: [ - BrowserModule, - BrowserAnimationsModule, - FormsModule, - KbqToggleModule, - KbqButtonModule, - KbqFormFieldModule, - ReactiveFormsModule - ], - bootstrap: [ - DemoComponent - ] -}) -export class DemoModule {} diff --git a/packages/components-dev/toggle/template.html b/packages/components-dev/toggle/template.html index c80e7c96f..8aac70cf5 100644 --- a/packages/components-dev/toggle/template.html +++ b/packages/components-dev/toggle/template.html @@ -1,3 +1,11 @@ + + +
+ + + +
+

Toggles

diff --git a/packages/components/radio/radio.en.md b/packages/components/radio/radio.en.md index 7bc435c92..2faef3848 100644 --- a/packages/components/radio/radio.en.md +++ b/packages/components/radio/radio.en.md @@ -1,22 +1,5 @@ -`` provides the same functionality as a native ``. +🚧 **Documentation in progress** 🚧 - +Unfortunately, the documentation for this section is not ready yet. We are actively working on its creation and plan to add it soon. -### Radio groups - -Radio-buttons should typically be placed inside of an `` unless the DOM structure -would make that impossible (e.g., radio-buttons inside of table cells). The radio-group has a -`value` property that reflects the currently selected radio-button inside of the group. - -Individual radio-buttons inside of a radio-group will inherit the `name` of the group. - -### Use with @angular/forms - -`` is compatible with `@angular/forms` and supports both `FormsModule` -and `ReactiveFormsModule`. - -### Accessibility - -The `` uses an internal `` to provide an accessible experience. -This internal radio button receives focus and is automatically labelled by the text content of the -`` element. +If you would like to contribute to the documentation or have any questions, please feel free to [open an issue](https://github.com/koobiq/angular-components/issues) in our GitHub repository. diff --git a/packages/components/radio/radio.ru.md b/packages/components/radio/radio.ru.md index 2f2668151..4abcdf32d 100644 --- a/packages/components/radio/radio.ru.md +++ b/packages/components/radio/radio.ru.md @@ -20,6 +20,10 @@ +#### Многострочный + + + ### Рекомендации - По умолчанию рекомендуется использовать до 7 вариантов в Radio Group. diff --git a/packages/components/radio/radio.scss b/packages/components/radio/radio.scss index 484e49ba1..7fcb4a863 100644 --- a/packages/components/radio/radio.scss +++ b/packages/components/radio/radio.scss @@ -27,7 +27,6 @@ cursor: pointer; - white-space: nowrap; // for maximum clickable area. width: 100%; } diff --git a/packages/components/toggle/toggle.ru.md b/packages/components/toggle/toggle.ru.md index 8400d1194..109eec44b 100644 --- a/packages/components/toggle/toggle.ru.md +++ b/packages/components/toggle/toggle.ru.md @@ -1 +1,5 @@ + +### Многострочный + + diff --git a/packages/docs-examples/components/radio/index.ts b/packages/docs-examples/components/radio/index.ts index b3e52fa93..9fe13f2e1 100644 --- a/packages/docs-examples/components/radio/index.ts +++ b/packages/docs-examples/components/radio/index.ts @@ -1,16 +1,18 @@ import { NgModule } from '@angular/core'; import { RadioContentExample } from './radio-content/radio-content-example'; import { RadioGroupExample } from './radio-group/radio-group-example'; +import { RadioMultilineExample } from './radio-multiline/radio-multiline-example'; import { RadioSizeExample } from './radio-size/radio-size-example'; import { RadioStyleExample } from './radio-style/radio-style-example'; -export { RadioContentExample, RadioGroupExample, RadioSizeExample, RadioStyleExample }; +export { RadioContentExample, RadioGroupExample, RadioMultilineExample, RadioSizeExample, RadioStyleExample }; const EXAMPLES = [ RadioSizeExample, RadioStyleExample, RadioContentExample, - RadioGroupExample + RadioGroupExample, + RadioMultilineExample ]; @NgModule({ diff --git a/packages/docs-examples/components/radio/radio-group/radio-group-example.ts b/packages/docs-examples/components/radio/radio-group/radio-group-example.ts index a983cc624..d9de2577e 100644 --- a/packages/docs-examples/components/radio/radio-group/radio-group-example.ts +++ b/packages/docs-examples/components/radio/radio-group/radio-group-example.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; import { KbqRadioModule } from '@koobiq/components/radio'; /** @@ -23,6 +23,7 @@ import { KbqRadioModule } from '@koobiq/components/radio'; Item 5 (Disabled) - ` + `, + changeDetection: ChangeDetectionStrategy.OnPush }) export class RadioGroupExample {} diff --git a/packages/docs-examples/components/radio/radio-multiline/radio-multiline-example.ts b/packages/docs-examples/components/radio/radio-multiline/radio-multiline-example.ts new file mode 100644 index 000000000..5b3ff0f7e --- /dev/null +++ b/packages/docs-examples/components/radio/radio-multiline/radio-multiline-example.ts @@ -0,0 +1,51 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { KbqFormFieldModule } from '@koobiq/components/form-field'; +import { KbqRadioModule } from '@koobiq/components/radio'; + +type ExampleOption = { label: string; hint: string }; + +/** + * @title Radio multiline example + */ +@Component({ + standalone: true, + selector: 'radio-multiline-example', + imports: [KbqRadioModule, KbqFormFieldModule], + template: ` + + @for (option of options; track option) { + + {{ option.label }} + {{ option.hint }} + + } + + `, + styles: ` + :host { + display: flex; + justify-content: center; + } + + .kbq-radio-group { + max-width: 255px; + } + `, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class RadioMultilineExample { + readonly options: ExampleOption[] = [ + { + label: 'Regular software and operating system updates', + hint: 'Updating software and operating systems regularly helps to patch vulnerabilities and enhance security measures against potential threats' + }, + { + label: 'Using strong and unique passwords', + hint: 'Creating strong and unique passwords for each online account can enhance cybersecurity, as cyber attacks often exploit weak or stolen passwords' + }, + { + label: 'Implementing multi-factor authentication (MFA)', + hint: 'Multi-factor authentication involves multiple identification forms before account access, reducing the risk of unauthorized access' + } + ]; +} diff --git a/packages/docs-examples/components/radio/radio-size/radio-size-example.ts b/packages/docs-examples/components/radio/radio-size/radio-size-example.ts index fc73c2338..c771b8dd2 100644 --- a/packages/docs-examples/components/radio/radio-size/radio-size-example.ts +++ b/packages/docs-examples/components/radio/radio-size/radio-size-example.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; import { KbqRadioModule } from '@koobiq/components/radio'; /** @@ -43,6 +43,7 @@ import { KbqRadioModule } from '@koobiq/components/radio';
- ` + `, + changeDetection: ChangeDetectionStrategy.OnPush }) export class RadioSizeExample {} diff --git a/packages/docs-examples/components/radio/radio-style/radio-style-example.ts b/packages/docs-examples/components/radio/radio-style/radio-style-example.ts index 2632d3e49..e43d2b910 100644 --- a/packages/docs-examples/components/radio/radio-style/radio-style-example.ts +++ b/packages/docs-examples/components/radio/radio-style/radio-style-example.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; import { ThemePalette } from '@koobiq/components/core'; import { KbqRadioModule } from '@koobiq/components/radio'; @@ -54,7 +54,8 @@ import { KbqRadioModule } from '@koobiq/components/radio'; - ` + `, + changeDetection: ChangeDetectionStrategy.OnPush }) export class RadioStyleExample { protected readonly themePalette = ThemePalette; diff --git a/packages/docs-examples/components/toggle/index.ts b/packages/docs-examples/components/toggle/index.ts index f98ad929d..d24dcd159 100644 --- a/packages/docs-examples/components/toggle/index.ts +++ b/packages/docs-examples/components/toggle/index.ts @@ -1,10 +1,12 @@ import { NgModule } from '@angular/core'; +import { ToggleMultilineExample } from './toggle-multiline/toggle-multiline-example'; import { ToggleOverviewExample } from './toggle-overview/toggle-overview-example'; -export { ToggleOverviewExample }; +export { ToggleMultilineExample, ToggleOverviewExample }; const EXAMPLES = [ - ToggleOverviewExample + ToggleOverviewExample, + ToggleMultilineExample ]; @NgModule({ diff --git a/packages/docs-examples/components/toggle/toggle-multiline/toggle-multiline-example.ts b/packages/docs-examples/components/toggle/toggle-multiline/toggle-multiline-example.ts new file mode 100644 index 000000000..399cde820 --- /dev/null +++ b/packages/docs-examples/components/toggle/toggle-multiline/toggle-multiline-example.ts @@ -0,0 +1,34 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { KbqFormFieldModule } from '@koobiq/components/form-field'; +import { KbqToggleModule } from '@koobiq/components/toggle'; + +/** + * @title Toggle multiline example + */ +@Component({ + standalone: true, + selector: 'toggle-multiline-example', + imports: [KbqToggleModule, KbqFormFieldModule], + template: ` + + I accept the security policy terms and acknowledge the responsibility to safeguard sensitive information + + Please review our security policy for detailed information about data protection and privacy standards. + By checking this box, you confirm that you understand and agree to comply with all security + requirements. + + + `, + styles: ` + :host { + display: flex; + justify-content: center; + } + + .kbq-toggle { + max-width: 400px; + } + `, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class ToggleMultilineExample {} diff --git a/packages/docs-examples/example-module.ts b/packages/docs-examples/example-module.ts index 5542d29f3..9401dfe2d 100644 --- a/packages/docs-examples/example-module.ts +++ b/packages/docs-examples/example-module.ts @@ -191,7 +191,9 @@ export const EXAMPLE_COMPONENTS: {[id: string]: LiveExample} = { "ag-grid-overview-example.ts" ], "selector": "ag-grid-overview-example", - "additionalComponents": [], + "additionalComponents": [ + "ExampleLinkCellRenderer" + ], "primaryFile": "ag-grid-overview-example.ts", "importPath": "components/ag-grid" }, @@ -654,6 +656,18 @@ export const EXAMPLE_COMPONENTS: {[id: string]: LiveExample} = { "primaryFile": "checkbox-indeterminate-example.ts", "importPath": "components/checkbox" }, + "checkbox-multiline": { + "packagePath": "components/checkbox/checkbox-multiline", + "title": "Checkbox multiline example", + "componentName": "CheckboxMultilineExample", + "files": [ + "checkbox-multiline-example.ts" + ], + "selector": "checkbox-multiline-example", + "additionalComponents": [], + "primaryFile": "checkbox-multiline-example.ts", + "importPath": "components/checkbox" + }, "checkbox-overview": { "packagePath": "components/checkbox/checkbox-overview", "title": "Checkbox", @@ -2601,6 +2615,18 @@ export const EXAMPLE_COMPONENTS: {[id: string]: LiveExample} = { "primaryFile": "radio-group-example.ts", "importPath": "components/radio" }, + "radio-multiline": { + "packagePath": "components/radio/radio-multiline", + "title": "Radio multiline example", + "componentName": "RadioMultilineExample", + "files": [ + "radio-multiline-example.ts" + ], + "selector": "radio-multiline-example", + "additionalComponents": [], + "primaryFile": "radio-multiline-example.ts", + "importPath": "components/radio" + }, "radio-size": { "packagePath": "components/radio/radio-size", "title": "Radio size", @@ -3473,6 +3499,18 @@ export const EXAMPLE_COMPONENTS: {[id: string]: LiveExample} = { "primaryFile": "toast-user-data-example.ts", "importPath": "components/toast" }, + "toggle-multiline": { + "packagePath": "components/toggle/toggle-multiline", + "title": "Toggle multiline example", + "componentName": "ToggleMultilineExample", + "files": [ + "toggle-multiline-example.ts" + ], + "selector": "toggle-multiline-example", + "additionalComponents": [], + "primaryFile": "toggle-multiline-example.ts", + "importPath": "components/toggle" + }, "toggle-overview": { "packagePath": "components/toggle/toggle-overview", "title": "Toggle", @@ -4087,6 +4125,8 @@ return import('@koobiq/docs-examples/components/button'); case 'button-overview': return import('@koobiq/docs-examples/components/button'); case 'checkbox-indeterminate': +return import('@koobiq/docs-examples/components/checkbox'); + case 'checkbox-multiline': return import('@koobiq/docs-examples/components/checkbox'); case 'checkbox-overview': return import('@koobiq/docs-examples/components/checkbox'); @@ -4401,6 +4441,8 @@ return import('@koobiq/docs-examples/components/progress-spinner'); case 'radio-content': return import('@koobiq/docs-examples/components/radio'); case 'radio-group': +return import('@koobiq/docs-examples/components/radio'); + case 'radio-multiline': return import('@koobiq/docs-examples/components/radio'); case 'radio-size': return import('@koobiq/docs-examples/components/radio'); @@ -4544,6 +4586,8 @@ return import('@koobiq/docs-examples/components/toast'); return import('@koobiq/docs-examples/components/toast'); case 'toast-user-data': return import('@koobiq/docs-examples/components/toast'); + case 'toggle-multiline': +return import('@koobiq/docs-examples/components/toggle'); case 'toggle-overview': return import('@koobiq/docs-examples/components/toggle'); case 'tooltip-arrow-and-offset':