diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/file-input/file-input-api/file-input-api.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/file-input/file-input-api/file-input-api.component.html index b078f7f3e..0a06adc3a 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/file-input/file-input-api/file-input-api.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/file-input/file-input-api/file-input-api.component.html @@ -1,4 +1,9 @@ - + @@ -15,7 +20,9 @@ text="FileData" [margin]="{ bottom: 'small' }" > -

Object structure of the interface. It should be imported from the library.

+

+ Object structure of the interface. It should be imported from the library. +

Name @@ -23,22 +30,18 @@ data: File - - Data of the file. - + Selected file. error: string - Error that will be displayed in the file input. + Error of the file. If it is defined, it will be shown and the file item + will be mark as invalid. image: string | ArrayBuffer - - Image data of the file. - + Preview of the file.. - - \ No newline at end of file + diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/file-input/file-input-properties/file-input-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/file-input/file-input-properties/file-input-properties.component.html index 555d2f0ab..03864f601 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/file-input/file-input-properties/file-input-properties.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/file-input/file-input-properties/file-input-properties.component.html @@ -20,89 +20,100 @@ 'file' - - Available modes of the component. - + Available modes of the component. value: Array<FileData> - Value of the input file. It has an array of FileData. + + An array of files representing the selected files. Each file is a + FileData. + label: string + Text to be placed above the component. + + + buttonLabel: string - Text to be placed above the component. + + Text to be placed inside the button. helperText: string Helper text to be placed above the component. - - buttonLabel: string - - - - - Text to be placed inside the button. - - accept: string - The file types that the component accepts. + The file types that the component accepts. Its value must be one of all + the possible values of the HTML file input's accept attribute. Please + check the documentation + . minSize: number - The minimum file size (in bytes) allowed. If the size of the file does not comply the minSize, the file will have an error. + The minimum file size (in bytes) allowed. If the size of the file does not + comply the minSize, the file will have an error. maxSize: number - The maximum file size (in bytes) allowed. If the size of the file does not comply the maxSize, the file will have an error. + The maximum file size (in bytes) allowed. If the size of the file does not + comply the maxSize, the file will have an error. multiple: boolean true - If true, the component allows multiple file items and will show all of them. If false, the selected file will be replaced by the new selected one. + If true, the component allows multiple file items and will show all of + them. If false, only one file will be shown, and if there is already one + file selected and a new one is chosen, it will be replaced by the new + selected one. showPreview: boolean false - If true, the preview of each file item will be shown. If it's not possible to show a preview, an icon refering to the file type will be shown. + If true, the preview of each file item will be shown. If it's not possible + to show a preview, an icon refering to the file type will be shown. disabled: boolean false - - If true, the component will be disabled. - + If true, the component will be disabled. callbackFile: EventEmitter - This function will be called when the user selects or drops a file. The file or list of files will be sent as a parameter. + This event will be emit when the user selects or drops a file. The list of + files will be sent as a parameter. In this function, the files can be + updated or returned as they come. These files must be passed to the value + in order to be shown. - margin: any (string | object) + margin: string | object Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | @@ -114,9 +125,6 @@ tabIndexValue: number 0 - - Value of the tabindex for all interactuable elements, except those inside - the custom area. - + Value of the tabindex. - \ No newline at end of file + diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/file-input/file-input.module.ts b/projects/dxc-ngx-cdk-site/src/app/pages/file-input/file-input.module.ts index b084b3edb..db49a3cac 100644 --- a/projects/dxc-ngx-cdk-site/src/app/pages/file-input/file-input.module.ts +++ b/projects/dxc-ngx-cdk-site/src/app/pages/file-input/file-input.module.ts @@ -8,9 +8,10 @@ import { DxcTagModule, DxcChipModule, DxcHeadingModule, + DxcLinkModule, } from "@dxc-technology/halstack-angular"; -import { TabbedSectionModule } from "../../components/tabbed-section/tabbed-section.module"; -import { FileInputPropertiesComponent } from "../../components/examples/file-input/file-input-properties/file-input-properties.component"; +import { TabbedSectionModule } from "src/app/components/tabbed-section/tabbed-section.module"; +import { FileInputPropertiesComponent } from "src/app/components/examples/file-input/file-input-properties/file-input-properties.component"; import { FileInputExampleComponent } from "../../components/examples/file-input/file-input-example/file-input-example.component"; import { FileInputComponent } from "./file-input.component"; import { FileInputImportComponent } from "../../components/examples/file-input/file-input-import/file-input-import.component"; @@ -19,7 +20,7 @@ import { ComponentsSidenavModule } from "../components-sidenav/components-sidena import { FileInputApiComponent } from "../../components/examples/file-input/file-input-api/file-input-api.component"; import { ColorPreviewModule } from "../../components/color-preview/color-preview.module"; import { CodesandboxViewerModule } from "../../components/codesandbox-viewer/codesandbox-viewer.module"; -import { StatusTagModule } from "../../components/status-tag/status-tag.module"; +import { StatusTagModule } from "src/app/components/status-tag/status-tag.module"; @NgModule({ declarations: [ @@ -43,6 +44,7 @@ import { StatusTagModule } from "../../components/status-tag/status-tag.module"; DxcChipModule, CodesandboxViewerModule, DxcHeadingModule, + DxcLinkModule, StatusTagModule, ], exports: [ diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.html b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.html index 2eb2c266d..fd78b1f33 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.html +++ b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.html @@ -33,7 +33,9 @@ [tabIndexValue]="tabIndexValue" (onClick)="fileInput.click()" > - or drop files + or drop files
- diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.ts index 446d8862f..a9691d22b 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.ts @@ -21,22 +21,7 @@ import { v4 as uuidv4 } from "uuid"; import { FileData } from "./interfaces/file.interface"; import { FilesService } from "./services/files.services"; import { NgChanges } from "../typings/ng-onchange"; - -interface FileInputProperties { - name: string; - mode: string; - label: string; - helperText: string; - accept: string; - multiple: boolean; - showPreview: boolean; - disabled: boolean; - maxSize: number; - minSize: number; - margin: string; - tabIndexValue: number; - value: Array; -} +import { FileInputProperties, Space, Spacing } from "./dxc-file-input.types"; @Component({ selector: "dxc-file-input", @@ -46,13 +31,38 @@ interface FileInputProperties { export class DxcFileInputComponent implements OnChanges, OnInit { @ViewChild("fileInput", { static: false }) fileInputNative: ElementRef; @HostBinding("class") className; - @Input() public name: string; - @Input() public mode: string = "file"; - @Input() public label: string; + /** + * Name attribute. + */ + @Input() public name: string = ""; + /** + * Available modes of the component. + */ + @Input() public mode: "file" | "filedrop" | "dropzone" = "file"; + /** + * Text to be placed above the component. + */ + @Input() public label: string = ""; + /** + * Text to be placed inside the button. + */ @Input() public buttonLabel: string; - @Input() public helperText: string; - @Input() public value: Array; - @Input() public accept: any; + /** + * Helper text to be placed above the component. + */ + @Input() public helperText: string = ""; + /** + * An array of files representing the selected files. + */ + @Input() public value: FileData[]; + /** + * The file types that the component accepts. Its value must be one of all the possible values of the HTML file input's accept attribute. + */ + @Input() public accept: string; + /** + * If true, the component allows multiple file items and will show all of them. If false, only one file will be shown, + * and if there is already one file selected and a new one is chosen, it will be replaced by the new selected one. + */ @Input() get multiple(): boolean { return this._multiple; @@ -61,6 +71,9 @@ export class DxcFileInputComponent implements OnChanges, OnInit { this._multiple = coerceBooleanProperty(value); } private _multiple = true; + /** + * If true, if the file is an image, a preview of it will be shown. If not, an icon refering to the file type will be shown. + */ @Input() get showPreview(): boolean { return this._showPreview; @@ -68,7 +81,10 @@ export class DxcFileInputComponent implements OnChanges, OnInit { set showPreview(value: boolean) { this._showPreview = coerceBooleanProperty(value); } - private _showPreview; + private _showPreview = false; + /** + * If true, the component will be disabled. + */ @Input() get disabled(): boolean { return this._disabled; @@ -76,7 +92,10 @@ export class DxcFileInputComponent implements OnChanges, OnInit { set disabled(value: boolean) { this._disabled = coerceBooleanProperty(value); } - private _disabled; + private _disabled = false; + /** + * The minimum file size (in bytes) allowed. If the size of the file does not comply the minSize, the file will have an error. + */ @Input() get minSize(): number { return this._minSize; @@ -85,6 +104,9 @@ export class DxcFileInputComponent implements OnChanges, OnInit { this._minSize = coerceNumberProperty(value); } private _minSize; + /** + * The maximum file size (in bytes) allowed. If the size of the file does not comply the maxSize, the file will have an error. + */ @Input() get maxSize(): number { return this._maxSize; @@ -93,7 +115,14 @@ export class DxcFileInputComponent implements OnChanges, OnInit { this._maxSize = coerceNumberProperty(value); } private _maxSize; - @Input() public margin: any; + /** + * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). + * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. + */ + @Input() public margin: Space | Spacing; + /** + * Value of the tabindex attribute. + */ @Input() get tabIndexValue(): number { return this._tabIndexValue; @@ -103,13 +132,16 @@ export class DxcFileInputComponent implements OnChanges, OnInit { } private _tabIndexValue = 0; hasShowError: boolean = false; - - @Output() callbackFile = new EventEmitter(); + /** + * This event will emit when the user selects or drops a file. The file or list of files will be sent as a parameter. + */ + @Output() callbackFile = new EventEmitter(); defaultInputs = new BehaviorSubject({ name: null, mode: "file", label: null, + buttonLabel: null, helperText: null, accept: null, multiple: true, @@ -149,14 +181,8 @@ export class DxcFileInputComponent implements OnChanges, OnInit { this.hasShowError = this.isErrorShow(); this.hasMultipleFiles = this.isMultipleFilesPrintables(); this.hasSingleFile = this.isSingleFilesPrintables(); + this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`; if (!this.buttonLabel) { - console.log( - this.mode === "file" - ? this.multiple - ? "Select files" - : "Select file" - : "Select" - ); this.buttonLabel = this.mode === "file" ? this.multiple @@ -164,7 +190,6 @@ export class DxcFileInputComponent implements OnChanges, OnInit { : "Select file" : "Select"; } - this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`; } ngOnChanges(changes: NgChanges): void { diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.types.ts b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.types.ts new file mode 100644 index 000000000..3b4b38020 --- /dev/null +++ b/projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.types.ts @@ -0,0 +1,34 @@ +import { FileData } from "./interfaces/file.interface"; + +export interface FileInputProperties { + margin?: Space | Spacing; + tabIndexValue?: number; + name?: string; + mode?: string; + label?: string; + buttonLabel?: string; + helperText?: string; + value?: FileData[]; + accept?: string; + multiple?: boolean; + showPreview?: boolean; + disabled?: boolean; + minSize?: number; + maxSize?: number; +} + +export type Space = + | "xxsmall" + | "xsmall" + | "small" + | "medium" + | "large" + | "xlarge" + | "xxlarge"; + +export type Spacing = { + top?: Space; + bottom?: Space; + left?: Space; + right?: Space; +};