feat(experimental): Textfield add new component

taiga-family · Dec 21, 2023 · 033adb0 · 033adb0
1 parent 54efbb8
commit 033adb0
Show file tree

Hide file tree

Showing 35 changed files with 1,042 additions and 22 deletions.
diff --git a/projects/cdk/directives/native-validator/native-validator.directive.ts b/projects/cdk/directives/native-validator/native-validator.directive.ts
@@ -13,7 +13,7 @@ import {AbstractControl, NG_VALIDATORS, Validator} from '@angular/forms';
     ],
 })
 export class TuiNativeValidatorDirective implements Validator {
-    private readonly el: HTMLInputElement = inject(ElementRef).nativeElement;
+    private readonly host: HTMLInputElement = inject(ElementRef).nativeElement;
     private readonly zone = inject(NgZone);
     private control?: AbstractControl;
 
@@ -33,4 +33,8 @@ export class TuiNativeValidatorDirective implements Validator {
 
         return null;
     }
+
+    private get el(): HTMLInputElement {
+        return this.host.querySelector('input,textarea,select') || this.host;
+    }
 }
diff --git a/projects/cdk/services/directive-styles.service.ts b/projects/cdk/services/directive-styles.service.ts
@@ -8,13 +8,13 @@ import {
 } from '@angular/core';
 
 /**
- * Service to use styles with directives
+ * @deprecated use {@link tuiWithStyles} instead
  */
 @Injectable({
-    providedIn: 'root',
+    providedIn: `root`,
 })
 export class TuiDirectiveStylesService {
-    private readonly map = new Map<Type<unknown>, unknown>();
+    readonly map = new Map();
 
     constructor(
         @Inject(ComponentFactoryResolver)

diff --git a/projects/cdk/utils/miscellaneous/index.ts b/projects/cdk/utils/miscellaneous/index.ts
@@ -21,3 +21,4 @@ export * from './nullable-same';
 export * from './object-from-entries';
 export * from './provide-options';
 export * from './uniq-by';
+export * from './with-styles';
diff --git a/projects/cdk/utils/miscellaneous/with-styles.ts b/projects/cdk/utils/miscellaneous/with-styles.ts
@@ -0,0 +1,12 @@
+import {createComponent, EnvironmentInjector, inject, Type} from '@angular/core';
+import {TuiDirectiveStylesService} from '@taiga-ui/cdk/services';
+
+// TODO: Add cleanup with DestroyRef and replace service with just a map from a token
+export function tuiWithStyles(component: Type<unknown>): void {
+    const map = inject(TuiDirectiveStylesService).map;
+    const environmentInjector = inject(EnvironmentInjector);
+
+    if (!map.has(component)) {
+        map.set(component, createComponent(component, {environmentInjector}));
+    }
+}
diff --git a/projects/core/directives/dropdown/dropdown-open.directive.ts b/projects/core/directives/dropdown/dropdown-open.directive.ts
@@ -126,14 +126,18 @@ export class TuiDropdownOpenDirective implements OnChanges {
     @HostListener('document:keydown.silent', ['$event'])
     onKeydown({key, target, defaultPrevented}: KeyboardEvent): void {
         if (
-            !defaultPrevented &&
-            tuiIsEditingKey(key) &&
-            this.editable &&
-            tuiIsHTMLElement(target) &&
-            !tuiIsElementEditable(target)
+            defaultPrevented ||
+            !tuiIsEditingKey(key) ||
+            !this.editable ||
+            !this.focused ||
+            !tuiIsHTMLElement(target) ||
+            (tuiIsElementEditable(target) && target !== this.host)
         ) {
-            this.host.focus({preventScroll: true});
+            return;
         }
+
+        this.update(true);
+        this.host.focus({preventScroll: true});
     }
 
     ngOnChanges(): void {

diff --git a/projects/core/directives/hint/hint-describe.directive.ts b/projects/core/directives/hint/hint-describe.directive.ts
@@ -12,6 +12,7 @@ import {tuiAsDriver, TuiDriver} from '@taiga-ui/core/abstract';
 import {
     debounce,
     distinctUntilChanged,
+    fromEvent,
     map,
     merge,
     of,
@@ -30,13 +31,7 @@ export class TuiHintDescribeDirective extends TuiDriver implements OnChanges {
     private readonly id$ = new ReplaySubject(1);
 
     private readonly stream$ = this.id$.pipe(
-        tuiIfMap(
-            () =>
-                tuiTypedFromEvent(this.doc, 'keydown', {
-                    capture: true,
-                }),
-            tuiIsPresent,
-        ),
+        tuiIfMap(() => fromEvent(this.doc, 'keydown', {capture: true}), tuiIsPresent),
         switchMap(() =>
             this.focused
                 ? of(false)
@@ -53,7 +48,7 @@ export class TuiHintDescribeDirective extends TuiDriver implements OnChanges {
     );
 
     @Input()
-    tuiHintDescribe: string | '' | null = '';
+    tuiHintDescribe?: string | null = '';
 
     readonly type = 'hint';
 

diff --git a/projects/core/styles/theme/appearance.less b/projects/core/styles/theme/appearance.less
@@ -8,3 +8,4 @@
 @import 'appearance/primary.less';
 @import 'appearance/secondary.less';
 @import 'appearance/status.less';
+@import 'appearance/textfield.less';
diff --git a/projects/core/styles/theme/appearance/textfield.less b/projects/core/styles/theme/appearance/textfield.less
@@ -0,0 +1,35 @@
+@import '../../taiga-ui-local.less';
+
+[tuiAppearance][data-appearance='textfield'] {
+    --t-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
+    background: var(--tui-base-01);
+    color: var(--tui-text-01);
+    box-shadow: var(--t-shadow);
+    outline: 1px solid var(--tui-base-03);
+    outline-offset: -1px;
+
+    &:valid[data-invalid='true'],
+    &:invalid:not([data-invalid='false']) {
+        outline-color: var(--tui-negative);
+    }
+
+    &:read-only {
+        box-shadow: none;
+        outline-color: var(--tui-base-04) !important;
+    }
+    .transition(~'box-shadow, background, outline-color');
+
+    .appearance-hover({
+        --t-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16);
+    });
+
+    .appearance-focus({
+        box-shadow: none;
+        outline: 0.125rem solid var(--tui-primary);
+        outline-offset: -0.125rem;
+    });
+
+    .appearance-disabled({
+        box-shadow: none;
+    });
+}
diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
@@ -410,6 +410,15 @@ export const ROUTES: Routes = [
             title: 'Surface',
         },
     },
+    {
+        path: `experimental/textfield`,
+        loadChildren: async () =>
+            (await import(`../experimental/textfield/textfield.module`))
+                .ExampleTuiTextfieldModule,
+        data: {
+            title: `Textfield`,
+        },
+    },
     {
         path: 'experimental/thumbnail-card',
         loadChildren: async () =>

diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
@@ -316,8 +316,45 @@ export const pages: TuiDocPages = [
                 section: 'Tools',
                 title: 'DropdownSelection',
                 keywords:
-                    'dropdown, контекст, selection, выделение, выпадашка, дропдаун, Context',
-                route: '/directives/dropdown-selection',
+                    `контекст, выпадашка, дропдаун, меню, Context, ContextMenu, option,` +
+                    `optGroup, опции, tuiOption, варианты, dropdown, menu`,
+                route: `/components/data-list-wrapper`,
+            },
+            {
+                section: `Components`,
+                title: `HostedDropdown`,
+                keywords: `dropdown, контекст, выпадашка, дропдаун, меню, menu`,
+                route: `/components/hosted-dropdown`,
+            },
+            {
+                section: `Tools`,
+                title: `Dropdown`,
+                keywords: `dropdown, контекст, выпадашка, дропдаун, Context`,
+                route: `/directives/dropdown`,
+            },
+            {
+                section: `Tools`,
+                title: `DropdownOpen`,
+                keywords: `dropdown, hosted, контекст, выпадашка, дропдаун, меню, menu`,
+                route: `/directives/dropdown-open`,
+            },
+            {
+                section: `Tools`,
+                title: `DropdownContext`,
+                keywords: `dropdown, контекст, выпадашка, дропдаун, Context, right-click`,
+                route: `/directives/dropdown-context`,
+            },
+            {
+                section: `Tools`,
+                title: `DropdownHover`,
+                keywords: `dropdown, hover, выпадашка, дропдаун`,
+                route: `/directives/dropdown-hover`,
+            },
+            {
+                section: `Tools`,
+                title: `DropdownSelection`,
+                keywords: `dropdown, контекст, selection, выделение, выпадашка, дропдаун, Context`,
+                route: `/directives/dropdown-selection`,
             },
         ],
     },
@@ -973,6 +1010,12 @@ export const pages: TuiDocPages = [
         keywords: 'card, container, wrapper, image, blur, overlay',
         route: '/experimental/surface',
     },
+    {
+        section: `Experimental`,
+        title: `Textfield`,
+        keywords: `form, input, select, textarea, combobox, ввод, форма, поле`,
+        route: `/experimental/textfield`,
+    },
     {
         section: 'Experimental',
         title: 'Title',