feat(kit): support capture in input files (#3065)

taiga-family · Nov 25, 2022 · 64d212c · 64d212c
1 parent 9d721e1
commit 64d212c
Show file tree

Hide file tree

Showing 13 changed files with 271 additions and 45 deletions.
diff --git a/projects/demo-integrations/cypress/tests/desktop/kit/input-files/input-files.cy.ts b/projects/demo-integrations/cypress/tests/desktop/kit/input-files/input-files.cy.ts
@@ -8,9 +8,7 @@ describe(`InputFiles`, () => {
                 hideLanguageSwitcher: false,
             });
 
-            cy.get(`#demoContent input[type="file"]`).selectFile(
-                `cypress/fixtures/stubs/web-api.svg`,
-            );
+            cy.get(`[tuiInputFiles]`).selectFile(`cypress/fixtures/stubs/web-api.svg`);
 
             cy.get(`#demoContent tui-file`)
                 .should(`contain.text`, `Wrong file type`)
@@ -31,9 +29,7 @@ describe(`InputFiles`, () => {
                 hideLanguageSwitcher: false,
             });
 
-            cy.get(`#demoContent input[type="file"]`).selectFile(
-                `cypress/fixtures/stubs/web-api.svg`,
-            );
+            cy.get(`[tuiInputFiles]`).selectFile(`cypress/fixtures/stubs/web-api.svg`);
 
             cy.get(`#demoContent tui-file`)
                 .should(`contain.text`, `File is too large 2 KB`)

diff --git a/projects/demo/src/modules/components/input-files/examples/6/index.html b/projects/demo/src/modules/components/input-files/examples/6/index.html
@@ -0,0 +1,18 @@
+<tui-input-files
+    *ngIf="!control.value"
+    [formControl]="control"
+>
+    <input
+        tuiInputFiles
+        accept="image/*"
+        capture="user"
+    />
+</tui-input-files>
+
+<tui-files class="tui-space_top-1">
+    <tui-file
+        *ngIf="control.valueChanges | async as file"
+        [file]="file"
+        (removed)="removeFile()"
+    ></tui-file>
+</tui-files>
diff --git a/projects/demo/src/modules/components/input-files/examples/6/index.ts b/projects/demo/src/modules/components/input-files/examples/6/index.ts
@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: `tui-input-files-example-6`,
+    templateUrl: `./index.html`,
+    changeDetection,
+    encapsulation,
+})
+export class TuiInputFilesExample6 {
+    readonly control = new FormControl();
+
+    removeFile(): void {
+        this.control.setValue(null);
+    }
+}
diff --git a/projects/demo/src/modules/components/input-files/input-files.component.ts b/projects/demo/src/modules/components/input-files/input-files.component.ts
@@ -3,7 +3,7 @@ import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiSizeL} from '@taiga-ui/core';
-import {TuiFileLike} from '@taiga-ui/kit';
+import {TuiFileLike, TuiInputFilesOptions} from '@taiga-ui/kit';
 
 import {AbstractExampleTuiControl} from '../abstract/control';
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
@@ -49,13 +49,25 @@ export class ExampleTuiInputFilesComponent extends AbstractExampleTuiControl {
         LESS: import(`./examples/5/index.less?raw`),
     };
 
+    readonly example6: TuiDocExample = {
+        TypeScript: import(`./examples/6/index.ts?raw`),
+        HTML: import(`./examples/6/index.html?raw`),
+    };
+
     readonly control = new FormControl();
     link = `Choose a file`;
     label = `or drop\u00A0it\u00A0here`;
     multiple = true;
     showSize = true;
     accept = ``;
     acceptVariants = [`image/*`, `application/pdf`, `image/*,application/pdf`];
+    capture: TuiInputFilesOptions['capture'] = null;
+    captureVariants: Array<TuiInputFilesOptions['capture']> = [
+        null,
+        `user`,
+        `environment`,
+    ];
+
     readonly maxFileSizeVariants = [100, 512000, 30 * 1000 * 1000, 2.2 * 1000 * 1000];
     override readonly sizeVariants: readonly TuiSizeL[] = [`m`, `l`];
 

diff --git a/projects/demo/src/modules/components/input-files/input-files.module.ts b/projects/demo/src/modules/components/input-files/input-files.module.ts
@@ -7,6 +7,7 @@ import {
     TuiButtonModule,
     TuiErrorModule,
     TuiLinkModule,
+    TuiNotificationModule,
     TuiSvgModule,
 } from '@taiga-ui/core';
 import {
@@ -20,6 +21,7 @@ import {TuiInputFilesExample2} from './examples/2';
 import {TuiInputFilesExample3} from './examples/3';
 import {TuiInputFilesExample4} from './examples/4';
 import {TuiInputFilesExample5} from './examples/5';
+import {TuiInputFilesExample6} from './examples/6';
 import {ExampleTuiInputFilesComponent} from './input-files.component';
 
 @NgModule({
@@ -35,6 +37,7 @@ import {ExampleTuiInputFilesComponent} from './input-files.component';
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiInputFilesComponent)),
         TuiErrorModule,
         TuiFieldErrorPipeModule,
+        TuiNotificationModule,
     ],
     declarations: [
         ExampleTuiInputFilesComponent,
@@ -43,6 +46,7 @@ import {ExampleTuiInputFilesComponent} from './input-files.component';
         TuiInputFilesExample3,
         TuiInputFilesExample4,
         TuiInputFilesExample5,
+        TuiInputFilesExample6,
     ],
     exports: [ExampleTuiInputFilesComponent],
 })

diff --git a/projects/demo/src/modules/components/input-files/input-files.template.html b/projects/demo/src/modules/components/input-files/input-files.template.html
@@ -50,23 +50,43 @@
         >
             <tui-input-files-example-5></tui-input-files-example-5>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="front-camera"
+            i18n-heading
+            heading="Camera capture"
+            [content]="example6"
+        >
+            <tui-notification
+                status="warning"
+                class="tui-space_bottom-4"
+            >
+                The capture attribute works only on mobile browsers
+            </tui-notification>
+            <tui-input-files-example-6></tui-input-files-example-6>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>
         <tui-doc-demo>
             <tui-input-files
                 [formControl]="control"
-                [accept]="accept"
                 [link]="link"
                 [label]="label"
                 [maxFileSize]="maxFileSize"
-                [multiple]="multiple"
                 [focusable]="focusable"
                 [pseudoFocus]="pseudoFocused"
                 [pseudoHover]="pseudoHovered"
                 [pseudoActive]="pseudoPressed"
                 (reject)="updateRejected($event)"
-            ></tui-input-files>
+            >
+                <input
+                    tuiInputFiles
+                    [attr.multiple]="multiple"
+                    [attr.accept]="accept"
+                    [attr.capture]="capture"
+                />
+            </tui-input-files>
             <tui-files class="tui-space_top-2">
                 <ng-container *ngIf="multiple; else single">
                     <ng-container *ngFor="let file of control.valueChanges | async">
@@ -114,7 +134,18 @@
                 <code>formControl.disable()</code>
                 )
             </ng-template>
-
+            <ng-template
+                i18n
+                documentationPropertyName="capture"
+                documentationPropertyMode="input"
+                documentationPropertyType="'user' | 'environment' | null"
+                [documentationPropertyValues]="captureVariants"
+                [(documentationPropertyValue)]="capture"
+            >
+                Allowed capture (for native attribute
+                <code>capture</code>
+                )
+            </ng-template>
             <ng-template
                 i18n
                 documentationPropertyName="accept"

diff --git a/projects/kit/components/input-files/index.ts b/projects/kit/components/input-files/index.ts
@@ -1,2 +1,4 @@
 export * from './input-files.component';
+export * from './input-files.directive';
 export * from './input-files.module';
+export * from './input-files.options';