@saasquatch/mint-components 1.5.3-1 → 1.5.3-2

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -27,7 +27,7 @@ const sqmPortalContainerView = require('./sqm-portal-container-view-2d11ed71.js'
 const sqmPortalProfileView = require('./sqm-portal-profile-view-b77382f6.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-042073ca.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-cb3c9c2f.js');
-const ShadowViewAddon = require('./ShadowViewAddon-8665ac96.js');
+const ShadowViewAddon = require('./ShadowViewAddon-8de07cc1.js');
 const sqmPortalSectionView = require('./sqm-portal-section-view-765aae4d.js');
 
 /**
@@ -9893,7 +9893,7 @@ const NameFields$1 = /*#__PURE__*/Object.freeze({
   NameFieldsWithErrors: NameFieldsWithErrors
 });
 
-const scenario$i = "@owner:sam\r\n@author:sam\r\nFeature: Checkbox Field\r\n\r\n  Field to be used to be used as a checkbox during registration. A motivating use case is to use this component as a terms\r\n  and conditions field, to sastisfy legal requirements that a customer might have for their end users.\r\n\r\n  Background:\r\n    Given a user is viewing the \"/register\"\r\n    And the registration page has the following fields\r\n      | fields     |\r\n      | first name |\r\n      | last name  |\r\n      | email      |\r\n      | password   |\r\n      | checkbox   |\r\n\r\n  @motivating\r\n  Scenario: Checkbox is required by default\r\n    Given a checkbox inside of a \"sqm-portal-register\"\r\n    And the name fields have valid input\r\n    And the email field has valid input\r\n    And the password field has valid input\r\n    And the checkbox is not checked\r\n    When the user tries to register\r\n    Then the checkbox is highlighted in red\r\n    And the error message says \"Must be checked\"\r\n\r\n\r\n  @landmine\r\n  Scenario: Checkboxes with the same \"checkbox-name\" are not submitted in the form data\r\n    Given the register form has the following html\r\n      \"\"\"\r\n      <sqm-portal-register>\r\n      <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n      <sqm-checkbox-field\r\n      slot=\"formData\"\r\n      checkbox-label=\"I am not a robot\"\r\n      error-message=\"Cannot be a robot\"\r\n      checkbox-name=\"isHuman\"\r\n      ></sqm-checkbox-field>\r\n      <div slot=\"terms\">\r\n      <sqm-checkbox-field checkbox-name=\"isHuman\"></sqm-checkbox-field>\r\n      </div>\r\n      </sqm-portal-register>\r\n      \"\"\"\r\n    And the checkboxes are checked\r\n    When the user tries to register\r\n    Then the form is submitted\r\n    But no field with key \"isHuman\" is included in the form data\r\n\r\n  @motivating\r\n  Scenario: Multiple checkboxes need different \"checkbox-name\" values\r\n    Given the register form has the following html\r\n      \"\"\"\r\n      <sqm-portal-register>\r\n      <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n      <sqm-checkbox-field\r\n      slot=\"formData\"\r\n      checkbox-label=\"I am not a robot\"\r\n      error-message=\"Cannot be a robot\"\r\n      checkbox-name=\"isHuman\"\r\n      ></sqm-checkbox-field>\r\n      <div slot=\"terms\">\r\n      <sqm-checkbox-field checkbox-name=\"myCheckbox\"></sqm-checkbox-field>\r\n      </div>\r\n      </sqm-portal-register>\r\n      \"\"\"\r\n    And the checkboxes are not checked\r\n    When the user tries to register\r\n    Then both checkboxes are bordered in red\r\n    And the checkboxes have different error messages\r\n    When the user checks the boxes\r\n    And tries to register\r\n    Then the form is submitted\r\n    And the following fields are included in the form data\r\n      | feilds     |\r\n      | isHuman    |\r\n      | myCheckbox |\r\n\r\n  @motivating\r\n  Scenario: Checkboxes can be optional\r\n    Given the register form has the following html\r\n      \"\"\"\r\n      <sqm-portal-register>\r\n      <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n      <sqm-checkbox-field\r\n      slot=\"formData\"\r\n      checkbox-label=\"I am not a robot\"\r\n      checkbox-required=\"false\"\r\n      checkbox-name=\"isHuman\"\r\n      />\r\n      </sqm-portal-register>\r\n      \"\"\"\r\n    And the checkbox is not checked\r\n    When the user tries to register\r\n    Then there is no error for the checkbox\r\n\r\n  @minutae\r\n  Scenario Outline: Validation error message is configurable\r\n    Given a checkbox inside of a \"sqm-portal-register\"\r\n    And the checkbox is required\r\n    And the checkbox has prop \"error-message\" with <propValue>\r\n    When the user tries to register\r\n    But they havent checked the checkbox\r\n    Then they see <errorMessage> below\r\n    Examples:\r\n      | propValue         | errorMessage      |\r\n      |                   | Must be checked   |\r\n      | My Custom Message | My Custom Message |\r\n\r\n  @motivating\r\n  Scenario Outline: Checkbox text and link are configurable\r\n    Given a checkbox inside of a \"sqm-portal-register\"\r\n    And the checkbox has the following prop values\r\n      | prop                     | value           |\r\n      | checkbox-label           | <labelText>     |\r\n      | checkbox-label-link      | <labelLink>     |\r\n      | checkbox-label-link-text | <labelLinkText> |\r\n    When the user views the checkbox\r\n    Then they see <text>\r\n    And when they click <labelLinkText> they are redirected to <labelLink>\r\n    #First example below is the defaults set by the controller\r\n    Examples:\r\n      | labelText                                            | labelLinkText        | labelLink                 | text                                                 |\r\n      | By signing up you agree to the {labelLink}           | Terms and Conditions | https://example.com       | By signing up you agree to the Terms and Conditions  |\r\n      | Read our {labelLink} before registration             | Terms of Service     | https://example.com/terms | Read our Terms of Service before registration        |\r\n      | By registering you agree to our terms and conditions | N/A                  | N/A                       | By registering you agree to our terms and conditions |\r\n\r\n  @motivating\r\n  Scenario: The form field name attribute is configurable\r\n    Given a checkbox inside of a \"sqm-portal-register\"\r\n    And the checkbox has prop \"checkbox-name\" with value \"myCheckBox\"\r\n    When the user checks the box\r\n    And they register\r\n    Then the value of the checkbox is submitted under \"myCheckBox\" field";
+const scenario$i = "@owner:sam\r\n@author:sam\r\nFeature: Checkbox Field\r\n\r\n  Field to be used to be used as a checkbox during registration. A motivating use case is to use this component as a terms\r\n  and conditions field, to sastisfy legal requirements that a customer might have for their end users.\r\n\r\n  Background:\r\n    Given a user is viewing the \"/register\"\r\n    And the registration page has the following fields\r\n      | fields     |\r\n      | first name |\r\n      | last name  |\r\n      | email      |\r\n      | password   |\r\n      | checkbox   |\r\n\r\n  @motivating\r\n  Scenario: Checkbox is required by default\r\n    Given a checkbox inside of a \"sqm-portal-register\"\r\n    And the name fields have valid input\r\n    And the email field has valid input\r\n    And the password field has valid input\r\n    And the checkbox is not checked\r\n    When the user tries to register\r\n    Then the checkbox is highlighted in red\r\n    And the error message says \"Must be checked\"\r\n\r\n\r\n  @landmine\r\n  Scenario: Checkboxes with the same \"checkbox-name\" are not submitted in the form data\r\n    Given the register form has the following html\r\n      \"\"\"\r\n      <sqm-portal-register>\r\n      <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n      <sqm-checkbox-field\r\n      slot=\"formData\"\r\n      checkbox-label=\"I am not a robot\"\r\n      error-message=\"Cannot be a robot\"\r\n      checkbox-name=\"isHuman\"\r\n      ></sqm-checkbox-field>\r\n      <div slot=\"terms\">\r\n      <sqm-checkbox-field checkbox-name=\"isHuman\"></sqm-checkbox-field>\r\n      </div>\r\n      </sqm-portal-register>\r\n      \"\"\"\r\n    And the checkboxes are checked\r\n    When the user tries to register\r\n    Then the form is submitted\r\n    But no field with key \"isHuman\" is included in the form data\r\n\r\n  @motivating\r\n  Scenario: Multiple checkboxes need different \"checkbox-name\" values\r\n    Given the register form has the following html\r\n      \"\"\"\r\n      <sqm-portal-register>\r\n      <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n      <sqm-checkbox-field\r\n      slot=\"formData\"\r\n      checkbox-label=\"I am not a robot\"\r\n      error-message=\"Cannot be a robot\"\r\n      checkbox-name=\"isHuman\"\r\n      ></sqm-checkbox-field>\r\n      <div slot=\"terms\">\r\n      <sqm-checkbox-field checkbox-name=\"myCheckbox\"></sqm-checkbox-field>\r\n      </div>\r\n      </sqm-portal-register>\r\n      \"\"\"\r\n    And the checkboxes are not checked\r\n    When the user tries to register\r\n    Then both checkboxes are bordered in red\r\n    And the checkboxes have different error messages\r\n    When the user checks the boxes\r\n    And tries to register\r\n    Then the form is submitted\r\n    And the following fields are included in the form data\r\n      | feilds     |\r\n      | isHuman    |\r\n      | myCheckbox |\r\n\r\n  @motivating\r\n  Scenario: Checkboxes can be optional\r\n    Given the register form has the following html\r\n      \"\"\"\r\n      <sqm-portal-register>\r\n      <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n      <sqm-checkbox-field\r\n      slot=\"formData\"\r\n      checkbox-label=\"I am not a robot\"\r\n      checkbox-optional=\"true\"\r\n      checkbox-name=\"isHuman\"\r\n      />\r\n      </sqm-portal-register>\r\n      \"\"\"\r\n    And the checkbox is not checked\r\n    When the user tries to register\r\n    Then there is no error for the checkbox\r\n\r\n  @minutae\r\n  Scenario Outline: Validation error message is configurable\r\n    Given a checkbox inside of a \"sqm-portal-register\"\r\n    And the checkbox is required\r\n    And the checkbox has prop \"error-message\" with <propValue>\r\n    When the user tries to register\r\n    But they havent checked the checkbox\r\n    Then they see <errorMessage> below\r\n    Examples:\r\n      | propValue         | errorMessage      |\r\n      |                   | Must be checked   |\r\n      | My Custom Message | My Custom Message |\r\n\r\n  @motivating\r\n  Scenario Outline: Checkbox text and link are configurable\r\n    Given a checkbox inside of a \"sqm-portal-register\"\r\n    And the checkbox has the following prop values\r\n      | prop                     | value           |\r\n      | checkbox-label           | <labelText>     |\r\n      | checkbox-label-link      | <labelLink>     |\r\n      | checkbox-label-link-text | <labelLinkText> |\r\n    When the user views the checkbox\r\n    Then they see <text>\r\n    And when they click <labelLinkText> they are redirected to <labelLink>\r\n    #First example below is the defaults set by the controller\r\n    Examples:\r\n      | labelText                                            | labelLinkText        | labelLink                 | text                                                 |\r\n      | By signing up you agree to the {labelLink}           | Terms and Conditions | https://example.com       | By signing up you agree to the Terms and Conditions  |\r\n      | Read our {labelLink} before registration             | Terms of Service     | https://example.com/terms | Read our Terms of Service before registration        |\r\n      | By registering you agree to our terms and conditions | N/A                  | N/A                       | By registering you agree to our terms and conditions |\r\n\r\n  @motivating\r\n  Scenario: The form field name attribute is configurable\r\n    Given a checkbox inside of a \"sqm-portal-register\"\r\n    And the checkbox has prop \"checkbox-name\" with value \"myCheckBox\"\r\n    When the user checks the box\r\n    And they register\r\n    Then the value of the checkbox is submitted under \"myCheckBox\" field";
 
 const CheckboxField_stories = {
   title: "Components/Checkbox Field",
@@ -10045,7 +10045,7 @@ const OptionalCheckboxes = createHookStory(() => {
   setupGraphQL$9();
   return (index.h("sqm-portal-register", null,
     index.h("sqm-name-fields", { slot: "formData" }),
-    index.h("sqm-checkbox-field", { slot: "formData", "checkbox-label": "I am not a robot", "checkbox-required": "false", "checkbox-name": "isHuman" }),
+    index.h("sqm-checkbox-field", { slot: "formData", "checkbox-label": "I am not a robot", "checkbox-optional": "true", "checkbox-name": "isHuman" }),
     index.h("div", { slot: "terms" },
       index.h("sqm-checkbox-field", null))));
 });
@@ -10154,7 +10154,7 @@ const UseDropdownField = /*#__PURE__*/Object.freeze({
   Countries: Countries
 });
 
-const scenario$j = "@author:derek\r\n@owner:derek\r\nFeature: Form Input Field\r\n\r\n    This component is used as a custom registration field during registration. The field can be text, a number,\r\n    date or phone number. A motivating use case is to ask for a users company name, this value would then be mapped\r\n    through the Managed Identity Service and upserted on the user after registration.\r\n\r\n    Background: A user exists and is viewing the hosted portal registration\r\n        Given a user is viewing \"/register\"\r\n        And \"/register\" contains the registration form\r\n        And the registration form has a custom input field \r\n\r\n    @motivating\r\n    Scenario Outline: Input fields are required by default but can be optional\r\n        Given the input has prop \"field-required\" with <value>\r\n        And the input is empty\r\n        When the user tries to register\r\n        Then the input <mayBe> highlighted in red\r\n        And an error message <mayAppear> in red below\r\n        And form submission <mayBe> blocked\r\n        Examples:\r\n            | value | mayBe | mayAppear      |\r\n            | true  | is    | appears        |\r\n            |       | is    | appears        |\r\n            | false | isn't | doesn't appear |\r\n\r\n    @motivating\r\n    Scenario: Input field labels are configurable\r\n        Given the input has prop \"field-label\" with value \"My Custom Input\"\r\n        When the user views the registration form\r\n        Then they see the input field\r\n        And it has label \"My Custom Input\" above the input\r\n\r\n    @minutae\r\n    Scenario Outline: Validation error message is configurable\r\n        Given the input is required\r\n        And it has prop \"error-message\" with <value>\r\n        When the user tries to register\r\n        But they haven't filled in the input\r\n        Then they see <errorMessage> below\r\n        Examples:\r\n            | value             | errorMessage      |\r\n            |                   | Cannot be empty   |\r\n            | My Custom Message | My Custom Message |\r\n\r\n    @motivating\r\n    Scenario: Form data attribute name is configurable\r\n        Given the input has prop \"field-name\" with value \"myCustomField\"\r\n        When the user types \"testing testing\" into the input\r\n        And they register\r\n        Then \"testing testing\" is submitted under \"myCustomField\" in the form data\r\n\r\n    @motivating\r\n    Scenario Outline: The input field is a text input by default\r\n        Given the input <mayHave> prop \"field-type\" with <value>\r\n        When the user views the input field\r\n        Then it is a text input\r\n        Examples:\r\n            | mayHave      | value |\r\n            | has          | text  |\r\n            | doesn't have |       |\r\n\r\n    @motivating\r\n    Scenario: Number type inputs are supported\r\n        Given the input has prop \"field-type\" with value \"number\"\r\n        When the user views the input field\r\n        And the hover over it\r\n        Then they see up and down arrows on the right hand side\r\n        When they click the up arrow\r\n        Then the number in the input field increments\r\n        When they click the down arrow\r\n        Then the number in the input field decrements\r\n        When they click the input\r\n        And try to enter text characters\r\n        Then nothing happens\r\n        When they click the input field\r\n        Then they are able to input numbers\r\n\r\n    @motivating\r\n    Scenario: Date type inputs are supported\r\n        Given the input has prop \"field-type\" \"date\"\r\n        When the user views the input field\r\n        Then they see \"mm/dd/yyyy\" as a placeholder\r\n        And they see a calendar icon on the right\r\n        When they start typing a date\r\n        Then it maintains the \"mm/dd/yyyy\" format\r\n        When they click the calendar icon\r\n        Then a dropdown appears\r\n        And they see a calendar\r\n        When they select a date\r\n        Then it is applied to the input\r\n\r\n    @motivating\r\n    Scenario: Phone number type inputs are supported\r\n        Given the input has prop \"field-type\" with value \"tel\"\r\n        When the user starts typing a phone number in the input\r\n        Then it is formatted into the following form \"(XXX) XXX-XXXX\"\r\n        When they pre-fix their phone number with a \"1\"\r\n        Then it is formatted into the following form \"1 (XXX) XXX-XXXX\"\r\n\r\n    @landmine\r\n    Scenario: Telephone formatting is removed after 10 numbers\r\n        Given a user using a phone number input field\r\n        And they entered their 10 character phone number\r\n        And it was not prefixed with a 1\r\n        When they add another character\r\n        Then the formatting is removed\r\n\r\n    @landmine\r\n    Scenario Outline: Input values are always recorded as strings in the form data\r\n        Given the input has prop \"field-type\" with <value>\r\n        When the user inputs <formInput>\r\n        And they register\r\n        Then <formInput> is recorded in the form data as a string\r\n        Examples:\r\n            | value  | formInput      |\r\n            | text   | Hello there    |\r\n            | number | 123            |\r\n            | date   | 05/07/2021     |\r\n            | tel    | (250) 234-9877 |";
+const scenario$j = "@author:derek\r\n@owner:derek\r\nFeature: Form Input Field\r\n\r\n    This component is used as a custom registration field during registration. The field can be text, a number,\r\n    date or phone number. A motivating use case is to ask for a users company name, this value would then be mapped\r\n    through the Managed Identity Service and upserted on the user after registration.\r\n\r\n    Background: A user exists and is viewing the hosted portal registration\r\n        Given a user is viewing \"/register\"\r\n        And \"/register\" contains the registration form\r\n        And the registration form has a custom input field\r\n\r\n    @motivating\r\n    Scenario Outline: Input fields are required by default but can be optional\r\n        Given the input has prop \"field-optional\" with <value>\r\n        And the input is empty\r\n        When the user tries to register\r\n        Then the input <mayBe> highlighted in red\r\n        And an error message <mayAppear> in red below\r\n        And form submission <mayBe> blocked\r\n        Examples:\r\n            | value | mayBe | mayAppear      |\r\n            | false | is    | appears        |\r\n            |       | is    | appears        |\r\n            | true  | isn't | doesn't appear |\r\n\r\n    @motivating\r\n    Scenario: Input field labels are configurable\r\n        Given the input has prop \"field-label\" with value \"My Custom Input\"\r\n        When the user views the registration form\r\n        Then they see the input field\r\n        And it has label \"My Custom Input\" above the input\r\n\r\n    @minutae\r\n    Scenario Outline: The validation error message is configurable\r\n        Given the input is required\r\n        And it has prop \"error-message\" with <value>\r\n        When the user tries to register\r\n        But they haven't filled in the input\r\n        Then they see <errorMessage> below\r\n        Examples:\r\n            | value             | errorMessage      |\r\n            |                   | Cannot be empty   |\r\n            | My Custom Message | My Custom Message |\r\n\r\n    @motivating\r\n    Scenario: Form data attribute name is configurable\r\n        Given the input has prop \"field-name\" with value \"myCustomField\"\r\n        When the user types \"testing testing\" into the input\r\n        And they register\r\n        Then \"testing testing\" is submitted under \"myCustomField\" in the form data\r\n\r\n    @motivating\r\n    Scenario Outline: The input field is a text input by default\r\n        Given the input <mayHave> prop \"field-type\" with <value>\r\n        When the user views the input field\r\n        Then it is a text input\r\n        Examples:\r\n            | mayHave      | value |\r\n            | has          | text  |\r\n            | doesn't have |       |\r\n\r\n    @motivating\r\n    Scenario: Number type inputs are supported\r\n        Given the input has prop \"field-type\" with value \"number\"\r\n        When the user views the input field\r\n        And the hover over it\r\n        Then they see up and down arrows on the right hand side\r\n        When they click the up arrow\r\n        Then the number in the input field increments\r\n        When they click the down arrow\r\n        Then the number in the input field decrements\r\n        When they click the input\r\n        And try to enter text characters\r\n        Then nothing happens\r\n        When they click the input field\r\n        Then they are able to input numbers\r\n\r\n    @motivating\r\n    Scenario: Date type inputs are supported\r\n        Given the input has prop \"field-type\" \"date\"\r\n        When the user views the input field\r\n        Then they see \"mm/dd/yyyy\" as a placeholder\r\n        And they see a calendar icon on the right\r\n        When they start typing a date\r\n        Then it maintains the \"mm/dd/yyyy\" format\r\n        When they click the calendar icon\r\n        Then a dropdown appears\r\n        And they see a calendar\r\n        When they select a date\r\n        Then it is applied to the input\r\n\r\n    @motivating\r\n    Scenario: Phone number type inputs are supported\r\n        Given the input has prop \"field-type\" with value \"tel\"\r\n        When the user starts typing a phone number in the input\r\n        Then it is formatted into the following form \"(XXX) XXX-XXXX\"\r\n        When they pre-fix their phone number with a \"1\"\r\n        Then it is formatted into the following form \"1 (XXX) XXX-XXXX\"\r\n\r\n    @landmine\r\n    Scenario: Telephone formatting is removed after 10 numbers\r\n        Given a user using a phone number input field\r\n        And they entered their 10 character phone number\r\n        And it was not prefixed with a 1\r\n        When they add another character\r\n        Then the formatting is removed\r\n\r\n    @landmine\r\n    Scenario Outline: Input values are always recorded as strings in the form data\r\n        Given the input has prop \"field-type\" with <value>\r\n        And it has a \"field-name\"\r\n        When the user inputs <formInput>\r\n        And they register\r\n        Then <formInput> is recorded in the form data as a string\r\n        Examples:\r\n            | value  | formInput      |\r\n            | text   | Hello there    |\r\n            | number | 123            |\r\n            | date   | 05/07/2021     |\r\n            | tel    | (250) 234-9877 |\r\n\r\n    @landmine\r\n    Scenario: Input fields without field names appear under \"/undefined\" in the form data\r\n        Given the input does not have prop \"field-name\"\r\n        When the users enters a value in the input\r\n        And they register\r\n        Then the value of the input is recorded under \"/undefined\" in the form data";
 
 const InputField_stories = {
   title: "Components/Input Field",
@@ -10170,7 +10170,7 @@ const defaultProps$c = {
     fieldName: "field",
     fieldLabel: "My Custom Input",
     fieldType: "text",
-    fieldRequired: true,
+    fieldOptional: true,
     errorMessage: "Cannot be empty",
   },
 };
@@ -10215,13 +10215,6 @@ const DateType = () => {
       fieldType: "date",
     } })));
 };
-const NumberType = () => {
-  return (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$c, { content: {
-      ...defaultProps$c.content,
-      fieldLabel: "Number",
-      fieldType: "number",
-    } })));
-};
 const TelType = () => {
   return (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$c, { content: {
       ...defaultProps$c.content,
@@ -10249,7 +10242,6 @@ const InputField = /*#__PURE__*/Object.freeze({
   Error: Error$5,
   CustomError: CustomError$2,
   DateType: DateType,
-  NumberType: NumberType,
   TelType: TelType,
   RegistrationField: RegistrationField,
   RegistrationFieldCustomLabel: RegistrationFieldCustomLabel
@@ -10307,7 +10299,7 @@ const OptionalInputs = createHookStory(() => {
   setupGraphQL$b();
   return (index.h("sqm-portal-register", null,
     index.h("sqm-name-fields", { slot: "formData" }),
-    index.h("sqm-input-field", { slot: "formData", "field-label": "Optional Field", "field-required": "false", "field-name": "optionalField" })));
+    index.h("sqm-input-field", { slot: "formData", "field-label": "Optional Field", "field-optional": "true", "field-name": "optionalField" })));
 });
 const DateType$1 = createHookStory(() => {
   setupGraphQL$b();
@@ -10315,12 +10307,6 @@ const DateType$1 = createHookStory(() => {
     index.h("sqm-name-fields", { slot: "formData" }),
     index.h("sqm-input-field", { slot: "formData", "field-label": "Date", "field-name": "date", "field-type": "date" })));
 });
-const NumberType$1 = createHookStory(() => {
-  setupGraphQL$b();
-  return (index.h("sqm-portal-register", null,
-    index.h("sqm-name-fields", { slot: "formData" }),
-    index.h("sqm-input-field", { slot: "formData", "field-label": "Number", "field-name": "number", "field-type": "number" })));
-});
 const TelType$1 = createHookStory(() => {
   setupGraphQL$b();
   return (index.h("sqm-portal-register", null,
@@ -10336,7 +10322,6 @@ const UseInputField = /*#__PURE__*/Object.freeze({
   MultipleInputs: MultipleInputs,
   OptionalInputs: OptionalInputs,
   DateType: DateType$1,
-  NumberType: NumberType$1,
   TelType: TelType$1
 });
 

package/dist/collection/components/sqm-checkbox-field/UseCheckboxField.stories.js

@@ -56,7 +56,7 @@ export const OptionalCheckboxes = createHookStory(() => {
   setupGraphQL();
   return (h("sqm-portal-register", null,
     h("sqm-name-fields", { slot: "formData" }),
-    h("sqm-checkbox-field", { slot: "formData", "checkbox-label": "I am not a robot", "checkbox-required": "false", "checkbox-name": "isHuman" }),
+    h("sqm-checkbox-field", { slot: "formData", "checkbox-label": "I am not a robot", "checkbox-optional": "true", "checkbox-name": "isHuman" }),
     h("div", { slot: "terms" },
       h("sqm-checkbox-field", null))));
 });

package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field-view.js

@@ -53,7 +53,7 @@ export function CheckboxFieldView(props) {
     h("sl-checkbox", Object.assign({ exportparts: "label: input-label", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
         e.target.value = e.target.checked;
         callbacks.setChecked(e.target.value);
-      } }, (content.checkboxRequired ? { required: true } : []), (!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName])
+      } }, (!content.checkboxOptional ? { required: true } : []), (!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName])
       ? {
         class: sheet.classes.ErrorStyle,
       }

package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field.js

@@ -2,7 +2,8 @@ import { isDemo } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop, State } from "@stencil/core";
 import deepmerge from "deepmerge";
-import { getProps } from "../../utils/utils";
+import { RequiredPropsError } from "../../utils/RequiredPropsError";
+import { getMissingProps, getProps } from "../../utils/utils";
 import { CheckboxFieldView, } from "./sqm-checkbox-field-view";
 import { useCheckboxField } from "./useCheckboxField";
 /**
@@ -29,13 +30,22 @@ export class CheckboxField {
      */
     this.errorMessage = "Must be checked";
     /**
-     * @uiName Required
+     * @uiName Optional
      */
-    this.checkboxRequired = true;
+    this.checkboxOptional = false;
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
+    const missingProps = getMissingProps([
+      {
+        attribute: "checkbox-name",
+        value: this.checkboxName,
+      },
+    ]);
+    if (missingProps) {
+      return h(RequiredPropsError, { missingProps: missingProps });
+    }
     const content = {
       ...getProps(this),
     };
@@ -150,7 +160,7 @@ export class CheckboxField {
       "reflect": false,
       "defaultValue": "\"Must be checked\""
     },
-    "checkboxRequired": {
+    "checkboxOptional": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -162,21 +172,21 @@ export class CheckboxField {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Required",
+            "text": "Optional",
             "name": "uiName"
           }],
         "text": ""
       },
-      "attribute": "checkbox-required",
+      "attribute": "checkbox-optional",
       "reflect": false,
-      "defaultValue": "true"
+      "defaultValue": "false"
     },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<CheckboxFieldViewProps>",
-        "resolved": "{ states?: { validationErrors?: ValidationErrors; checked: boolean; }; content?: { checkboxName: string; checkboxLabel: string; checkboxLabelLink?: string; checkboxLabelLinkText?: string; checkboxRequired?: boolean; errorMessage: string; }; }",
+        "resolved": "{ states?: { validationErrors?: ValidationErrors; checked: boolean; }; content?: { checkboxName: string; checkboxLabel: string; checkboxLabelLink?: string; checkboxLabelLinkText?: string; checkboxOptional?: boolean; errorMessage: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-dropdown-field/sqm-dropdown-field-view.js

@@ -38,7 +38,7 @@ export function DropdownFieldView(props) {
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    h("sl-select", Object.assign({ exportparts: "label: input-label", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (content.dropdownRequired ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
+    h("sl-select", Object.assign({ exportparts: "label: input-label", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
       class: sheet.classes.ErrorStyle,
     }
       : [])), content.selectOptions),

package/dist/collection/components/sqm-dropdown-field/sqm-dropdown-field.js

@@ -2,7 +2,8 @@ import { isDemo } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop, State } from "@stencil/core";
 import deepmerge from "deepmerge";
-import { getProps } from "../../utils/utils";
+import { RequiredPropsError } from "../../utils/RequiredPropsError";
+import { getMissingProps, getProps } from "../../utils/utils";
 import { DropdownFieldView, } from "./sqm-dropdown-field-view";
 import { useDropdownField } from "./useDropdownField";
 /**
@@ -20,13 +21,22 @@ export class DropdownField {
      */
     this.errorMessage = "Select an option";
     /**
-     * @uiName Required
+     * @uiName Optional
      */
-    this.dropdownRequired = true;
+    this.dropdownOptional = false;
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
+    const missingProps = getMissingProps([
+      {
+        attribute: "dropdown-name",
+        value: this.dropdownName,
+      },
+    ]);
+    if (missingProps) {
+      return h(RequiredPropsError, { missingProps: missingProps });
+    }
     const content = {
       ...getProps(this),
       selectOptions: h("slot", null),
@@ -100,7 +110,7 @@ export class DropdownField {
       "reflect": false,
       "defaultValue": "\"Select an option\""
     },
-    "dropdownRequired": {
+    "dropdownOptional": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -112,21 +122,21 @@ export class DropdownField {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Required",
+            "text": "Optional",
             "name": "uiName"
           }],
         "text": ""
       },
-      "attribute": "dropdown-required",
+      "attribute": "dropdown-optional",
       "reflect": false,
-      "defaultValue": "true"
+      "defaultValue": "false"
     },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<DropdownFieldViewProps>",
-        "resolved": "{ states?: { validationErrors?: ValidationErrors; }; content?: { dropdownName: string; dropdownLabel: string; dropdownRequired?: boolean; errorMessage: string; selectOptions?: VNode | VNode[]; }; }",
+        "resolved": "{ states?: { validationErrors?: ValidationErrors; }; content?: { dropdownName: string; dropdownLabel: string; dropdownOptional?: boolean; errorMessage: string; selectOptions?: VNode | VNode[]; }; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-input-field/InputField.stories.js

@@ -16,7 +16,7 @@ const defaultProps = {
     fieldName: "field",
     fieldLabel: "My Custom Input",
     fieldType: "text",
-    fieldRequired: true,
+    fieldOptional: true,
     errorMessage: "Cannot be empty",
   },
 };
@@ -61,13 +61,6 @@ export const DateType = () => {
       fieldType: "date",
     } })));
 };
-export const NumberType = () => {
-  return (h(InputFieldView, Object.assign({}, defaultProps, { content: {
-      ...defaultProps.content,
-      fieldLabel: "Number",
-      fieldType: "number",
-    } })));
-};
 export const TelType = () => {
   return (h(InputFieldView, Object.assign({}, defaultProps, { content: {
       ...defaultProps.content,

package/dist/collection/components/sqm-input-field/UseInputField.stories.js

@@ -55,7 +55,7 @@ export const OptionalInputs = createHookStory(() => {
   setupGraphQL();
   return (h("sqm-portal-register", null,
     h("sqm-name-fields", { slot: "formData" }),
-    h("sqm-input-field", { slot: "formData", "field-label": "Optional Field", "field-required": "false", "field-name": "optionalField" })));
+    h("sqm-input-field", { slot: "formData", "field-label": "Optional Field", "field-optional": "true", "field-name": "optionalField" })));
 });
 export const DateType = createHookStory(() => {
   setupGraphQL();
@@ -63,12 +63,6 @@ export const DateType = createHookStory(() => {
     h("sqm-name-fields", { slot: "formData" }),
     h("sqm-input-field", { slot: "formData", "field-label": "Date", "field-name": "date", "field-type": "date" })));
 });
-export const NumberType = createHookStory(() => {
-  setupGraphQL();
-  return (h("sqm-portal-register", null,
-    h("sqm-name-fields", { slot: "formData" }),
-    h("sqm-input-field", { slot: "formData", "field-label": "Number", "field-name": "number", "field-type": "number" })));
-});
 export const TelType = createHookStory(() => {
   setupGraphQL();
   return (h("sqm-portal-register", null,

package/dist/collection/components/sqm-input-field/sqm-input-field-view.js

@@ -14,14 +14,6 @@ const vanillaStyle = `
   width: 100%;
   display: block;
 }
-sl-checkbox::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-normal);
-  line-height: 20px;
-}
-sl-checkbox::part(base){
-  align-items: start;
-}
 `;
 jss.setup(preset());
 const sheet = jss.createStyleSheet(style);
@@ -33,7 +25,7 @@ export function InputFieldView(props) {
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),
-    h("sl-input", Object.assign({ exportparts: "label: input-label", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (content.fieldRequired ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
+    h("sl-input", Object.assign({ exportparts: "label: input-label", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
       class: sheet.classes.ErrorStyle,
       helpText: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
     }

package/dist/collection/components/sqm-input-field/sqm-input-field.js

@@ -2,7 +2,8 @@ import { isDemo } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop, State } from "@stencil/core";
 import deepmerge from "deepmerge";
-import { getProps } from "../../utils/utils";
+import { RequiredPropsError } from "../../utils/RequiredPropsError";
+import { getMissingProps, getProps } from "../../utils/utils";
 import { InputFieldView } from "./sqm-input-field-view";
 import { useInputField } from "./useInputField";
 /**
@@ -14,7 +15,7 @@ export class InputField {
     /**
      * @uiName Input Type
      * @uiType string
-     * @uiEnum ["text", "date",  "number", "tel"]
+     * @uiEnum ["text", "date", "tel"]
      */
     this.fieldType = "text";
     /**
@@ -22,9 +23,9 @@ export class InputField {
      */
     this.errorMessage = "Cannot be empty";
     /**
-     * @uiName Required
+     * @uiName Optional
      */
-    this.fieldRequired = true;
+    this.fieldOptional = false;
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -32,6 +33,15 @@ export class InputField {
     const content = {
       ...getProps(this),
     };
+    const missingProps = getMissingProps([
+      {
+        attribute: "field-name",
+        value: this.fieldName,
+      },
+    ]);
+    if (missingProps) {
+      return h(RequiredPropsError, { missingProps: missingProps });
+    }
     const { states } = isDemo() ? useInputFieldDemo(this) : useInputField();
     return h(InputFieldView, { states: states, content: content });
   }
@@ -81,8 +91,8 @@ export class InputField {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "\"text\" | \"date\" | \"number\" | \"tel\"",
-        "resolved": "\"date\" | \"number\" | \"tel\" | \"text\"",
+        "original": "\"text\" | \"date\" | \"tel\"",
+        "resolved": "\"date\" | \"tel\" | \"text\"",
         "references": {}
       },
       "required": false,
@@ -95,7 +105,7 @@ export class InputField {
             "text": "string",
             "name": "uiType"
           }, {
-            "text": "[\"text\", \"date\",  \"number\", \"tel\"]",
+            "text": "[\"text\", \"date\", \"tel\"]",
             "name": "uiEnum"
           }],
         "text": ""
@@ -125,7 +135,7 @@ export class InputField {
       "reflect": false,
       "defaultValue": "\"Cannot be empty\""
     },
-    "fieldRequired": {
+    "fieldOptional": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -137,21 +147,21 @@ export class InputField {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Required",
+            "text": "Optional",
             "name": "uiName"
           }],
         "text": ""
       },
-      "attribute": "field-required",
+      "attribute": "field-optional",
       "reflect": false,
-      "defaultValue": "true"
+      "defaultValue": "false"
     },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<InputFieldViewProps>",
-        "resolved": "{ states?: { validationErrors?: ValidationErrors; }; content?: { fieldName: string; fieldLabel: string; fieldType: \"number\" | \"text\" | \"date\" | \"tel\"; fieldRequired?: boolean; errorMessage: string; }; }",
+        "resolved": "{ states?: { validationErrors?: ValidationErrors; }; content?: { fieldName: string; fieldLabel: string; fieldType: \"text\" | \"date\" | \"tel\"; fieldOptional?: boolean; errorMessage: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-portal-register/usePortalRegister.js

@@ -17,7 +17,6 @@ export function usePortalRegister(props) {
         return;
       const key = control.name;
       const value = control.value;
-      console.log({ key, value });
       jsonpointer.set(formData, key, value);
       // required validation
       if (control.required && !value) {

package/dist/esm/{ShadowViewAddon-ec53d07b.js → ShadowViewAddon-63a40a95.js}

@@ -2512,7 +2512,7 @@ function CheckboxFieldView(props) {
     h("sl-checkbox", Object.assign({ exportparts: "label: input-label", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
         e.target.value = e.target.checked;
         callbacks.setChecked(e.target.value);
-      } }, (content.checkboxRequired ? { required: true } : []), (!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName])
+      } }, (!content.checkboxOptional ? { required: true } : []), (!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName])
       ? {
         class: sheet$a.classes.ErrorStyle,
       }
@@ -2563,7 +2563,7 @@ function DropdownFieldView(props) {
     h("style", { type: "text/css" },
       vanillaStyle$5,
       styleString$b),
-    h("sl-select", Object.assign({ exportparts: "label: input-label", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (content.dropdownRequired ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
+    h("sl-select", Object.assign({ exportparts: "label: input-label", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (!content.dropdownOptional ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
       class: sheet$b.classes.ErrorStyle,
     }
       : [])), content.selectOptions),
@@ -2582,14 +2582,6 @@ const vanillaStyle$6 = `
   width: 100%;
   display: block;
 }
-sl-checkbox::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-normal);
-  line-height: 20px;
-}
-sl-checkbox::part(base){
-  align-items: start;
-}
 `;
 jss.setup(create());
 const sheet$c = jss.createStyleSheet(style$c);
@@ -2601,7 +2593,7 @@ function InputFieldView(props) {
     h("style", { type: "text/css" },
       vanillaStyle$6,
       styleString$c),
-    h("sl-input", Object.assign({ exportparts: "label: input-label", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (content.fieldRequired ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
+    h("sl-input", Object.assign({ exportparts: "label: input-label", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (!content.fieldOptional ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
       class: sheet$c.classes.ErrorStyle,
       helpText: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
     }