toggleswitch: стилизация, сторисы, обёртки

src/lib/components/toggleswitch/toggleswitch.component.ts

@@ -0,0 +1,62 @@
+import { Component, EventEmitter, Input, Output, forwardRef } from '@angular/core';
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ToggleSwitch } from 'primeng/toggleswitch';
+
+@Component({
+  selector: 'toggleswitch',
+  standalone: true,
+  imports: [ToggleSwitch, FormsModule],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ToggleSwitchComponent),
+      multi: true,
+    },
+  ],
+  template: `
+    <p-toggleswitch
+      [ngModel]="modelValue"
+      (ngModelChange)="handleChange($event)"
+      [invalid]="invalid"
+      [disabled]="disabled"
+      (onChange)="onChange.emit($event)"
+      (onFocus)="onFocus.emit($event)"
+      (onBlur)="onBlur.emit($event)"
+    ></p-toggleswitch>
+  `,
+})
+export class ToggleSwitchComponent implements ControlValueAccessor {
+  @Input() invalid = false;
+  @Input() disabled = false;
+
+  @Output() onChange = new EventEmitter<any>();
+  @Output() onFocus = new EventEmitter<FocusEvent>();
+  @Output() onBlur = new EventEmitter<FocusEvent>();
+
+  modelValue = false;
+
+  private _onChange: (value: boolean) => void = () => {};
+  private _onTouched: () => void = () => {};
+
+  handleChange(value: boolean): void {
+    this.modelValue = value;
+    this._onChange(value);
+    this._onTouched();
+  }
+
+  writeValue(value: boolean): void {
+    this.modelValue = value ?? false;
+  }
+
+  registerOnChange(fn: (value: boolean) => void): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this._onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+}

src/prime-preset/map-tokens.ts

@@ -4,6 +4,7 @@ import type { AuraBaseDesignTokens } from '@primeuix/themes/aura/base';
 
 import tokens from './tokens/tokens.json';
 import { buttonCss } from './tokens/components/button';
+import { toggleswitchCss } from './tokens/components/toggleswitch';
 
 const presetTokens: Preset<AuraBaseDesignTokens> = {
   primitive: tokens.primitive as unknown as AuraBaseDesignTokens['primitive'],
@@ -14,6 +15,10 @@ const presetTokens: Preset<AuraBaseDesignTokens> = {
       ...(tokens.components.button as unknown as ComponentsDesignTokens['button']),
       css: buttonCss,
     },
+    toggleswitch: {
+      ...(tokens.components.toggleswitch as unknown as ComponentsDesignTokens['toggleswitch']),
+      css: toggleswitchCss,
+    },
   } as ComponentsDesignTokens,
 };
 

src/prime-preset/tokens/components/toggleswitch.ts

@@ -0,0 +1,11 @@
+export const toggleswitchCss = ({ dt }: { dt: (token: string) => string }): string => `
+  /* Focus ring для валидных состояний */
+  .p-toggleswitch:not(.p-disabled):not(.p-invalid):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider {
+    box-shadow: 0 0 0 ${dt('toggleswitch.root.focusRing.width')} ${dt('focusRing.extend.success')};
+  }
+
+  /* Focus ring для состояния ошибки */
+  .p-toggleswitch.p-invalid:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider {
+    box-shadow: 0 0 0 ${dt('focusRing.width')} ${dt('focusRing.extend.invalid')};
+  }
+`;

src/stories/components/toggleswitch/examples/toggleswitch-checked.component.ts

@@ -0,0 +1,49 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { StoryObj } from '@storybook/angular';
+import { ToggleSwitchComponent } from '../../../../lib/components/toggleswitch/toggleswitch.component';
+
+const template = `
+  <toggleswitch [(ngModel)]="value"></toggleswitch>
+`;
+
+@Component({
+  selector: 'app-toggleswitch-checked',
+  standalone: true,
+  imports: [ToggleSwitchComponent, FormsModule],
+  template,
+})
+export class ToggleSwitchCheckedComponent {
+  value = true;
+}
+
+export const Checked: StoryObj = {
+  render: () => ({
+    template: `<app-toggleswitch-checked></app-toggleswitch-checked>`,
+  }),
+  parameters: {
+    docs: {
+      description: { story: 'Переключатель во включённом состоянии.' },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { ToggleSwitchComponent } from '@cdek-it/angular-ui-kit';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-toggleswitch-checked',
+  standalone: true,
+  imports: [ToggleSwitchComponent, FormsModule],
+  template: \`
+    <toggleswitch [(ngModel)]="value"></toggleswitch>
+  \`,
+})
+export class ToggleSwitchCheckedComponent {
+  value = true;
+}
+        `,
+      },
+    },
+  },
+};

src/stories/components/toggleswitch/examples/toggleswitch-disabled.component.ts

@@ -0,0 +1,49 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { StoryObj } from '@storybook/angular';
+import { ToggleSwitchComponent } from '../../../../lib/components/toggleswitch/toggleswitch.component';
+
+const template = `
+  <toggleswitch [(ngModel)]="value" [disabled]="true"></toggleswitch>
+`;
+
+@Component({
+  selector: 'app-toggleswitch-disabled',
+  standalone: true,
+  imports: [ToggleSwitchComponent, FormsModule],
+  template,
+})
+export class ToggleSwitchDisabledComponent {
+  value = false;
+}
+
+export const Disabled: StoryObj = {
+  render: () => ({
+    template: `<app-toggleswitch-disabled></app-toggleswitch-disabled>`,
+  }),
+  parameters: {
+    docs: {
+      description: { story: 'Заблокированное состояние переключателя.' },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { ToggleSwitchComponent } from '@cdek-it/angular-ui-kit';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-toggleswitch-disabled',
+  standalone: true,
+  imports: [ToggleSwitchComponent, FormsModule],
+  template: \`
+    <toggleswitch [(ngModel)]="value" [disabled]="true"></toggleswitch>
+  \`,
+})
+export class ToggleSwitchDisabledComponent {
+  value = false;
+}
+        `,
+      },
+    },
+  },
+};

src/stories/components/toggleswitch/examples/toggleswitch-invalid.component.ts

@@ -0,0 +1,49 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { StoryObj } from '@storybook/angular';
+import { ToggleSwitchComponent } from '../../../../lib/components/toggleswitch/toggleswitch.component';
+
+const template = `
+  <toggleswitch [(ngModel)]="value" [invalid]="true"></toggleswitch>
+`;
+
+@Component({
+  selector: 'app-toggleswitch-invalid',
+  standalone: true,
+  imports: [ToggleSwitchComponent, FormsModule],
+  template,
+})
+export class ToggleSwitchInvalidComponent {
+  value = false;
+}
+
+export const Invalid: StoryObj = {
+  render: () => ({
+    template: `<app-toggleswitch-invalid></app-toggleswitch-invalid>`,
+  }),
+  parameters: {
+    docs: {
+      description: { story: 'Невалидное состояние переключателя.' },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { ToggleSwitchComponent } from '@cdek-it/angular-ui-kit';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-toggleswitch-invalid',
+  standalone: true,
+  imports: [ToggleSwitchComponent, FormsModule],
+  template: \`
+    <toggleswitch [(ngModel)]="value" [invalid]="true"></toggleswitch>
+  \`,
+})
+export class ToggleSwitchInvalidComponent {
+  value = false;
+}
+        `,
+      },
+    },
+  },
+};