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

src/lib/components/password/password.component.ts

@@ -0,0 +1,136 @@
+import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, Input, Output, TemplateRef, forwardRef } from '@angular/core';
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgTemplateOutlet } from '@angular/common';
+import { Password } from 'primeng/password';
+import { PrimeTemplate } from 'primeng/api';
+import { FloatLabel } from 'primeng/floatlabel';
+
+export type PasswordSize = 'small' | 'base' | 'large' | 'xlarge';
+
+@Component({
+  selector: 'password',
+  host: { style: 'display: block' },
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [Password, FormsModule, FloatLabel, NgTemplateOutlet, PrimeTemplate],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => PasswordComponent),
+      multi: true,
+    },
+  ],
+  template: `
+    @if (floatLabel) {
+      <p-floatlabel variant="in">
+        <ng-container *ngTemplateOutlet="passwordTpl"></ng-container>
+        <label [attr.for]="inputId">{{ label }}</label>
+      </p-floatlabel>
+    } @else {
+      <ng-container *ngTemplateOutlet="passwordTpl"></ng-container>
+    }
+
+    <ng-template #passwordTpl>
+      <p-password
+        [ngModel]="modelValue"
+        (ngModelChange)="handleChange($event)"
+        [feedback]="feedback"
+        [toggleMask]="toggleMask"
+        [inputStyleClass]="computedInputStyleClass"
+        [disabled]="disabled"
+        [placeholder]="placeholder"
+        [promptLabel]="promptLabel"
+        [weakLabel]="weakLabel"
+        [mediumLabel]="mediumLabel"
+        [strongLabel]="strongLabel"
+        [variant]="variant"
+        [fluid]="fluid"
+        [invalid]="invalid"
+        [inputId]="inputId"
+        [ariaLabel]="ariaLabel"
+        [ariaLabelledBy]="ariaLabelledBy"
+        [appendTo]="appendTo"
+        [autofocus]="autofocus"
+        (onFocus)="onFocus.emit($event)"
+        (onBlur)="onBlur.emit($event)"
+      >
+        @if (headerTemplate) {
+          <ng-template pTemplate="header">
+            <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+          </ng-template>
+        }
+        @if (footerTemplate) {
+          <ng-template pTemplate="footer">
+            <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+          </ng-template>
+        }
+      </p-password>
+    </ng-template>
+  `,
+})
+export class PasswordComponent implements ControlValueAccessor {
+  @ContentChild('header') headerTemplate: TemplateRef<any> | null = null;
+  @ContentChild('footer') footerTemplate: TemplateRef<any> | null = null;
+
+  @Input() feedback = true;
+  @Input() toggleMask = false;
+  @Input() disabled = false;
+  @Input() placeholder: string | undefined = undefined;
+  @Input() size: PasswordSize = 'base';
+  @Input() variant: 'filled' | 'outlined' = 'outlined';
+  @Input() fluid = false;
+  @Input() invalid = false;
+  @Input() floatLabel = false;
+  @Input() label = '';
+  @Input() promptLabel = 'Введите пароль';
+  @Input() weakLabel = 'Слабый';
+  @Input() mediumLabel = 'Средний';
+  @Input() strongLabel = 'Надёжный';
+  @Input() inputId: string | undefined = undefined;
+  @Input() inputStyleClass: string | undefined = undefined;
+  @Input() ariaLabel: string | undefined = undefined;
+  @Input() ariaLabelledBy: string | undefined = undefined;
+  @Input() appendTo: any = 'body';
+  @Input() autofocus = false;
+
+  @Output() onFocus = new EventEmitter<Event>();
+  @Output() onBlur = new EventEmitter<Event>();
+
+  get sizeClass(): string {
+    if (this.size === 'small') return 'p-inputtext-sm';
+    if (this.size === 'large') return 'p-inputtext-lg';
+    if (this.size === 'xlarge') return 'p-inputtext-lg p-inputtext-xlg';
+    return '';
+  }
+
+  get computedInputStyleClass(): string {
+    return [this.sizeClass, this.inputStyleClass].filter(Boolean).join(' ');
+  }
+
+  modelValue: string | null = null;
+
+  private _onChange: (value: string | null) => void = () => {};
+  private _onTouched: () => void = () => {};
+
+  handleChange(value: string | null): void {
+    this.modelValue = value;
+    this._onChange(value);
+    this._onTouched();
+  }
+
+  writeValue(value: string | null): void {
+    this.modelValue = value;
+  }
+
+  registerOnChange(fn: (value: string | null) => 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

@@ -10,8 +10,9 @@ import { checkboxCss } from './tokens/components/checkbox';
 import { inputmaskCss } from './tokens/components/inputmask';
 import { inputtextCss } from './tokens/components/inputtext';
 import { progressspinnerCss } from './tokens/components/progressspinner';
+import { passwordCss } from './tokens/components/password';
 import { tagCss } from './tokens/components/tag';
-import { timelineCss } from './tokens/components/timeline';
+import { textareaCss } from './tokens/components/textarea';
 import { tooltipCss } from './tokens/components/tooltip';
 import { megamenuCss } from './tokens/components/megamenu';
 import { selectCss } from './tokens/components/select';
@@ -62,9 +63,9 @@ const presetTokens: Preset<AuraBaseDesignTokens> = {
       ...(tokens.components.tag as unknown as ComponentsDesignTokens['tag']),
       css: tagCss,
     },
-    timeline: {
-      ...(tokens.components.timeline as unknown as ComponentsDesignTokens['timeline']),
-      css: timelineCss,
+    textarea: {
+      ...(tokens.components.textarea as unknown as ComponentsDesignTokens['textarea']),
+      css: textareaCss,
     },
     tooltip: {
       ...(tokens.components.tooltip as unknown as ComponentsDesignTokens['tooltip']),

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

@@ -0,0 +1,97 @@
+/**
+ * Кастомная CSS-стилизация для компонента p-password.
+ * Подключается в map-tokens.ts: `import { passwordCss } from './components/password'`
+ */
+export const passwordCss = ({ dt }: { dt: (token: string) => string }): string => `
+  /* ─── Иконки управления ─── */
+  .p-password-toggle-mask-icon,
+  .p-icon.p-password-toggle-mask-icon.p-password-unmask-icon {
+    cursor: pointer;
+    color: ${dt('password.icon.color')};
+  }
+
+  /* ─── Оверлей и индикатор ─── */
+  .p-password-overlay {
+    border-width: ${dt('password.extend.borderWidth')};
+  }
+
+  .p-password-meter-text {
+    font-family: ${dt('fonts.fontFamily.base')};
+    font-size: ${dt('fonts.fontSize.200')};
+    font-weight: ${dt('fonts.fontWeight.regular')};
+    line-height: ${dt('fonts.lineHeight.250')};
+    color: ${dt('password.overlay.color')};
+  }
+
+  /* ─── Focus ─── */
+  .p-password:has(.p-inputtext:enabled:focus) {
+    box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('inputtext.focusRing.color')};
+    border-radius: ${dt('inputtext.root.borderRadius')};
+  }
+
+  /* ─── Invalid + Focus ─── */
+  .p-password:has(.p-inputtext.p-invalid:focus) {
+    box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('focusRing.extend.invalid')};
+    border-radius: ${dt('inputtext.root.borderRadius')};
+  }
+
+  .p-password:has(.p-inputtext.p-invalid:focus) .p-inputtext {
+    border-color: ${dt('inputtext.root.invalidBorderColor')};
+  }
+
+  /* ─── FloatLabel ─── */
+  .p-floatlabel:has(.p-password) label {
+    font-family: ${dt('fonts.fontFamily.base')};
+    font-weight: ${dt('floatlabel.root.fontWeight')};
+    line-height: ${dt('fonts.lineHeight.250')};
+    color: ${dt('floatlabel.root.color')};
+  }
+
+  .p-floatlabel:has(.p-password) .p-floatlabel-active label {
+    font-weight: ${dt('floatlabel.root.active.fontWeight')};
+  }
+
+  .p-floatlabel-in .p-password .p-inputtext {
+    font-family: ${dt('fonts.fontFamily.base')};
+    padding-block-start: ${dt('floatlabel.in.input.paddingTop')};
+    padding-block-end: ${dt('floatlabel.in.input.paddingBottom')};
+  }
+
+  /* ─── Кастомный контент (правила пароля) ─── */
+  .p-password-rules {
+    display: flex;
+    flex-direction: column;
+    gap: ${dt('password.content.gap')};
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .p-password-rule {
+    display: flex;
+    align-items: center;
+    gap: ${dt('password.content.gap')};
+    font-family: ${dt('fonts.fontFamily.base')};
+    font-size: ${dt('fonts.fontSize.200')};
+    font-weight: ${dt('fonts.fontWeight.regular')};
+    line-height: ${dt('fonts.lineHeight.250')};
+    color: ${dt('password.overlay.color')};
+  }
+
+  /* ─── Состояния иконок правил ─── */
+  .p-password-rule i {
+    font-size: ${dt('fonts.fontSize.200')};
+  }
+
+  .p-password-rule .ti-circle {
+    color: ${dt('surface.400')};
+  }
+
+  .p-password-rule .ti-circle-check {
+    color: ${dt('password.colorScheme.light.strength.strongBackground')};
+  }
+
+  .p-password-rule .ti-circle-x {
+    color: ${dt('password.colorScheme.light.strength.weakBackground')};
+  }
+`;

src/prime-preset/tokens/tokens.json

@@ -3968,6 +3968,16 @@
           "icon": {
             "color": "{form.placeholderColor}"
           }
+        },
+        "dark": {
+          "strength": {
+            "weakBackground": "{error.500}",
+            "mediumBackground": "{warn.500}",
+            "strongBackground": "{success.600}"
+          },
+          "icon": {
+            "color": "{form.placeholderColor}"
+          }
         }
       },
       "meter": {

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

@@ -0,0 +1,51 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { StoryObj } from '@storybook/angular';
+import { PasswordComponent } from '../../../../lib/components/password/password.component';
+
+const template = `
+<div style="width: 280px">
+  <password [disabled]="true" [(ngModel)]="value" placeholder="Отключено"></password>
+</div>
+`;
+
+@Component({
+  selector: 'app-password-disabled',
+  standalone: true,
+  imports: [PasswordComponent, FormsModule],
+  template,
+})
+export class PasswordDisabledComponent {
+  value: string | null = 'secret123';
+}
+
+export const Disabled: StoryObj = {
+  render: () => ({
+    template: `<app-password-disabled></app-password-disabled>`,
+  }),
+  parameters: {
+    docs: {
+      description: { story: 'Поле ввода пароля в отключённом состоянии.' },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { PasswordComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-password-disabled',
+  standalone: true,
+  imports: [PasswordComponent, FormsModule],
+  template: \`
+    <password [disabled]="true" [(ngModel)]="value" placeholder="Отключено"></password>
+  \`,
+})
+export class PasswordDisabledComponent {
+  value: string | null = 'secret123';
+}
+        `,
+      },
+    },
+  },
+};

src/stories/components/password/examples/password-feedback.component.ts

@@ -0,0 +1,51 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { StoryObj } from '@storybook/angular';
+import { PasswordComponent } from '../../../../lib/components/password/password.component';
+
+const template = `
+<div style="width: 280px">
+  <password [feedback]="true" [toggleMask]="true" [(ngModel)]="value" placeholder="Введите пароль"></password>
+</div>
+`;
+
+@Component({
+  selector: 'app-password-feedback',
+  standalone: true,
+  imports: [PasswordComponent, FormsModule],
+  template,
+})
+export class PasswordFeedbackComponent {
+  value: string | null = null;
+}
+
+export const Feedback: StoryObj = {
+  render: () => ({
+    template: `<app-password-feedback></app-password-feedback>`,
+  }),
+  parameters: {
+    docs: {
+      description: { story: 'Индикатор надёжности пароля с визуальной шкалой (слабый / средний / сильный).' },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { PasswordComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-password-feedback',
+  standalone: true,
+  imports: [PasswordComponent, FormsModule],
+  template: \`
+    <password [feedback]="true" [toggleMask]="true" [(ngModel)]="value" placeholder="Введите пароль"></password>
+  \`,
+})
+export class PasswordFeedbackComponent {
+  value: string | null = null;
+}
+        `,
+      },
+    },
+  },
+};