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

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

@@ -1920,16 +1920,16 @@ export declare interface GcdsSearch extends Components.GcdsSearch {
 
 
 @ProxyCmp({
-  inputs: ['defaultValue', 'disabled', 'errorMessage', 'hint', 'label', 'name', 'required', 'selectId', 'validateOn', 'validator', 'value'],
-  methods: ['validate'],
+  inputs: ['autocomplete', 'autofocus', 'defaultValue', 'disabled', 'errorMessage', 'form', 'hint', 'label', 'name', 'required', 'selectId', 'validateOn', 'validator', 'validity', 'value'],
+  methods: ['validate', 'checkValidity', 'getValidationMessage'],
   outputs: ['gcdsChange', 'gcdsInput', 'gcdsFocus', 'gcdsBlur', 'gcdsError', 'gcdsValid']
 })
 @Component({
   selector: 'gcds-select',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['defaultValue', 'disabled', 'errorMessage', 'hint', 'label', 'name', 'required', 'selectId', 'validateOn', 'validator', 'value'],
+  inputs: ['autocomplete', 'autofocus', 'defaultValue', 'disabled', 'errorMessage', 'form', 'hint', 'label', 'name', 'required', 'selectId', 'validateOn', 'validator', 'validity', 'value'],
   outputs: ['gcdsChange', 'gcdsInput', 'gcdsFocus', 'gcdsBlur', 'gcdsError', 'gcdsValid'],
   standalone: false,
 })
@@ -1960,6 +1960,18 @@ export class GcdsSelect {
    */
   set defaultValue(_: Components.GcdsSelect['defaultValue']) {};
     /**
+   * If true, the select will be focused on component render
+   */
+  set autofocus(_: Components.GcdsSelect['autofocus']) {};
+    /**
+   * The ID of the form that the select field belongs to.
+   */
+  set form(_: Components.GcdsSelect['form']) {};
+    /**
+   * String to have autocomplete enabled.
+   */
+  set autocomplete(_: Components.GcdsSelect['autocomplete']) {};
+    /**
    * Value for a select element.
    */
   set value(_: Components.GcdsSelect['value']) {};
@@ -1972,6 +1984,10 @@ export class GcdsSelect {
    */
   set hint(_: Components.GcdsSelect['hint']) {};
     /**
+   * Read-only property of the select, returns a ValidityState object that represents the validity states this element is in. @readonly 
+   */
+  set validity(_: Components.GcdsSelect['validity']) {};
+    /**
    * Array of validators
    */
   set validator(_: Components.GcdsSelect['validator']) {};

packages/vue/lib/components.ts

@@ -547,9 +547,13 @@ export const GcdsSelect: StencilVueComponent<JSX.GcdsSelect, JSX.GcdsSelect["val
   'required',
   'disabled',
   'defaultValue',
+  'autofocus',
+  'form',
+  'autocomplete',
   'value',
   'errorMessage',
   'hint',
+  'validity',
   'validator',
   'validateOn',
   'gcdsChange',

packages/web/specs/components.json

@@ -9434,6 +9434,52 @@
       ],
       "usage": {},
       "props": [
+        {
+          "name": "autocomplete",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "autocomplete",
+          "reflectToAttr": false,
+          "docs": "String to have autocomplete enabled.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "autofocus",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "autofocus",
+          "reflectToAttr": true,
+          "docs": "If true, the select will be focused on component render",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "defaultValue",
           "type": "string",
@@ -9509,6 +9555,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 select field belongs to.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "hint",
           "type": "string",
@@ -9712,6 +9781,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 select, 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",
@@ -9737,6 +9839,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-select",
+          "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-select",
+          "docsTags": []
+        },
         {
           "name": "validate",
           "returns": {

packages/web/src/components.d.ts

@@ -1102,6 +1102,18 @@ export namespace Components {
      * A select provides a large list of options for single selection.
      */
     interface GcdsSelect {
+        /**
+          * String to have autocomplete enabled.
+         */
+        "autocomplete"?: string;
+        /**
+          * If true, the select will be focused on component render
+         */
+        "autofocus": boolean;
+        /**
+          * Check the validity of gcds-select
+         */
+        "checkValidity": () => Promise<boolean>;
         /**
           * The default value is an optional value that gets displayed before the user selects an option.
          */
@@ -1115,6 +1127,14 @@ export namespace Components {
           * Error message for an invalid select element.
          */
         "errorMessage"?: string;
+        /**
+          * The ID of the form that the select field belongs to.
+         */
+        "form"?: string;
+        /**
+          * Get validationMessage of gcds-select
+         */
+        "getValidationMessage": () => Promise<string>;
         /**
           * Hint displayed below the label.
          */
@@ -1151,6 +1171,11 @@ export namespace Components {
         "validator": Array<
     string | ValidatorEntry | Validator<string>
   >;
+        /**
+          * Read-only property of the select, returns a ValidityState object that represents the validity states this element is in.
+          * @readonly
+         */
+        "validity": ValidityState;
         /**
           * Value for a select element.
          */
@@ -3556,6 +3581,14 @@ declare namespace LocalJSX {
      * A select provides a large list of options for single selection.
      */
     interface GcdsSelect {
+        /**
+          * String to have autocomplete enabled.
+         */
+        "autocomplete"?: string;
+        /**
+          * If true, the select will be focused on component render
+         */
+        "autofocus"?: boolean;
         /**
           * The default value is an optional value that gets displayed before the user selects an option.
          */
@@ -3569,6 +3602,10 @@ declare namespace LocalJSX {
           * Error message for an invalid select element.
          */
         "errorMessage"?: string;
+        /**
+          * The ID of the form that the select field belongs to.
+         */
+        "form"?: string;
         /**
           * Hint displayed below the label.
          */
@@ -3625,6 +3662,11 @@ declare namespace LocalJSX {
         "validator"?: Array<
     string | ValidatorEntry | Validator<string>
   >;
+        /**
+          * Read-only property of the select, returns a ValidityState object that represents the validity states this element is in.
+          * @readonly
+         */
+        "validity"?: ValidityState;
         /**
           * Value for a select element.
          */