feat(gcds-file-uploader): Add native HTML attributes and validation

packages/angular/src/lib/stencil-generated/components.ts

@@ -715,16 +715,16 @@ export declare interface GcdsFieldset extends Components.GcdsFieldset {}
 
 
 @ProxyCmp({
-  inputs: ['accept', 'disabled', 'errorMessage', 'files', 'hint', 'label', 'multiple', 'name', 'required', 'uploaderId', 'validateOn', 'validator', 'value'],
-  methods: ['validate'],
+  inputs: ['accept', 'autofocus', 'disabled', 'errorMessage', 'files', 'form', 'hint', 'label', 'multiple', 'name', 'required', 'uploaderId', 'validateOn', 'validator', 'validity', 'value'],
+  methods: ['validate', 'checkValidity', 'getValidationMessage'],
   outputs: ['gcdsFocus', 'gcdsBlur', 'gcdsChange', 'gcdsInput', 'gcdsRemoveFile', 'gcdsError', 'gcdsValid']
 })
 @Component({
   selector: 'gcds-file-uploader',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['accept', 'disabled', 'errorMessage', 'files', 'hint', 'label', 'multiple', 'name', 'required', 'uploaderId', 'validateOn', 'validator', 'value'],
+  inputs: ['accept', 'autofocus', 'disabled', 'errorMessage', 'files', 'form', 'hint', 'label', 'multiple', 'name', 'required', 'uploaderId', 'validateOn', 'validator', 'validity', 'value'],
   outputs: ['gcdsFocus', 'gcdsBlur', 'gcdsChange', 'gcdsInput', 'gcdsRemoveFile', 'gcdsError', 'gcdsValid'],
   standalone: false,
 })
@@ -782,6 +782,18 @@ export class GcdsFileUploader {
    * Set event to call validator @default 'blur'
    */
   set validateOn(_: Components.GcdsFileUploader['validateOn']) {};
+    /**
+   * Read-only property of the file uploader, returns a ValidityState object that represents the validity states this element is in. @readonly 
+   */
+  set validity(_: Components.GcdsFileUploader['validity']) {};
+    /**
+   * If true, the file uploader will be focused on component render
+   */
+  set autofocus(_: Components.GcdsFileUploader['autofocus']) {};
+    /**
+   * The ID of the form that the file uploader field belongs to.
+   */
+  set form(_: Components.GcdsFileUploader['form']) {};
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;

packages/vue/lib/components.ts

@@ -246,6 +246,9 @@ export const GcdsFileUploader: StencilVueComponent<JSX.GcdsFileUploader, JSX.Gcd
   'hint',
   'validator',
   'validateOn',
+  'validity',
+  'autofocus',
+  'form',
   'gcdsFocus',
   'gcdsBlur',
   'gcdsChange',

packages/web/specs/components.json

@@ -3176,6 +3176,29 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "autofocus",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "autofocus",
+          "reflectToAttr": true,
+          "docs": "If true, the file uploader will be focused on component render",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "disabled",
           "type": "boolean",
@@ -3256,6 +3279,29 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "form",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "form",
+          "reflectToAttr": true,
+          "docs": "The ID of the form that the file uploader field belongs to.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "hint",
           "type": "string",
@@ -3492,6 +3538,39 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "validity",
+          "type": "ValidityState",
+          "complexType": {
+            "original": "ValidityState",
+            "resolved": "ValidityState",
+            "references": {
+              "ValidityState": {
+                "location": "global",
+                "id": "global::ValidityState"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "validity",
+          "reflectToAttr": false,
+          "docs": "Read-only property of the file uploader, returns a ValidityState object that represents the validity states this element is in.",
+          "docsTags": [
+            {
+              "name": "readonly",
+              "text": ""
+            }
+          ],
+          "values": [
+            {
+              "type": "ValidityState"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": false
+        },
         {
           "name": "value",
           "type": "string[]",
@@ -3523,6 +3602,50 @@
         }
       ],
       "methods": [
+        {
+          "name": "checkValidity",
+          "returns": {
+            "type": "Promise<boolean>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<boolean>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
+          "signature": "checkValidity() => Promise<boolean>",
+          "parameters": [],
+          "docs": "Check the validity of gcds-file-uploader",
+          "docsTags": []
+        },
+        {
+          "name": "getValidationMessage",
+          "returns": {
+            "type": "Promise<string>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<string>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<string>"
+          },
+          "signature": "getValidationMessage() => Promise<string>",
+          "parameters": [],
+          "docs": "Get validationMessage of gcds-file-uploader",
+          "docsTags": []
+        },
         {
           "name": "validate",
           "returns": {

packages/web/src/components.d.ts

@@ -383,6 +383,14 @@ export namespace Components {
           * Defines the file types the file uploader accepts.
          */
         "accept": string;
+        /**
+          * If true, the file uploader will be focused on component render
+         */
+        "autofocus": boolean;
+        /**
+          * Check the validity of gcds-file-uploader
+         */
+        "checkValidity": () => Promise<boolean>;
         /**
           * Specifies if a file uploader element is disabled or not.
           * @default false
@@ -396,6 +404,14 @@ export namespace Components {
           * FileList of uploaded files to input
          */
         "files": FileList;
+        /**
+          * The ID of the form that the file uploader field belongs to.
+         */
+        "form"?: string;
+        /**
+          * Get validationMessage of gcds-file-uploader
+         */
+        "getValidationMessage": () => Promise<string>;
         /**
           * Hint displayed below the label.
          */
@@ -436,6 +452,11 @@ export namespace Components {
         "validator": Array<
     string | ValidatorEntry | Validator<string | number | FileList>
   >;
+        /**
+          * Read-only property of the file uploader, returns a ValidityState object that represents the validity states this element is in.
+          * @readonly
+         */
+        "validity": ValidityState;
         /**
           * Value for a file uploader element.
           * @default []
@@ -2689,6 +2710,10 @@ declare namespace LocalJSX {
           * Defines the file types the file uploader accepts.
          */
         "accept"?: string;
+        /**
+          * If true, the file uploader will be focused on component render
+         */
+        "autofocus"?: boolean;
         /**
           * Specifies if a file uploader element is disabled or not.
           * @default false
@@ -2702,6 +2727,10 @@ declare namespace LocalJSX {
           * FileList of uploaded files to input
          */
         "files"?: FileList;
+        /**
+          * The ID of the form that the file uploader field belongs to.
+         */
+        "form"?: string;
         /**
           * Hint displayed below the label.
          */
@@ -2766,6 +2795,11 @@ declare namespace LocalJSX {
         "validator"?: Array<
     string | ValidatorEntry | Validator<string | number | FileList>
   >;
+        /**
+          * Read-only property of the file uploader, returns a ValidityState object that represents the validity states this element is in.
+          * @readonly
+         */
+        "validity"?: ValidityState;
         /**
           * Value for a file uploader element.
           * @default []