@saasquatch/mint-components 1.5.3-3 → 1.5.3-4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{ShadowViewAddon-8de07cc1.js → ShadowViewAddon-a94a1ff9.js} +12 -3
- package/dist/cjs/sqm-big-stat_35.cjs.entry.js +4 -4
- package/dist/cjs/sqm-stencilbook.cjs.entry.js +7 -4
- package/dist/collection/components/sqm-checkbox-field/CheckboxField.stories.js +4 -1
- package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field-view.js +4 -1
- package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field.js +1 -1
- package/dist/collection/components/sqm-dropdown-field/sqm-dropdown-field-view.js +5 -1
- package/dist/collection/components/sqm-dropdown-field/sqm-dropdown-field.js +1 -1
- package/dist/collection/components/sqm-input-field/sqm-input-field-view.js +5 -1
- package/dist/collection/components/sqm-input-field/sqm-input-field.js +1 -1
- package/dist/esm/{ShadowViewAddon-63a40a95.js → ShadowViewAddon-87c6e4d6.js} +12 -3
- package/dist/esm/sqm-big-stat_35.entry.js +4 -4
- package/dist/esm/sqm-stencilbook.entry.js +7 -4
- package/dist/esm-es5/{ShadowViewAddon-63a40a95.js → ShadowViewAddon-87c6e4d6.js} +1 -1
- package/dist/esm-es5/sqm-big-stat_35.entry.js +1 -1
- package/dist/esm-es5/sqm-stencilbook.entry.js +1 -1
- package/dist/mint-components/mint-components.esm.js +1 -1
- package/dist/mint-components/{p-d437fa7d.entry.js → p-0284a378.entry.js} +2 -2
- package/dist/mint-components/{p-d336a610.system.js → p-02b6ea85.system.js} +1 -1
- package/dist/mint-components/p-2e4453e2.system.entry.js +1 -0
- package/dist/mint-components/p-436da6b8.system.js +1 -1
- package/dist/mint-components/{p-581e2f18.entry.js → p-58704085.entry.js} +2 -2
- package/dist/mint-components/{p-e459d237.system.entry.js → p-6e3f8914.system.entry.js} +1 -1
- package/dist/mint-components/{p-86263d7f.js → p-c195994f.js} +1 -1
- package/package.json +1 -1
- package/dist/mint-components/p-a872cf92.system.entry.js +0 -1
|
@@ -2525,7 +2525,10 @@ function CheckboxFieldView(props) {
|
|
|
2525
2525
|
}, {
|
|
2526
2526
|
labelLink: (index.h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
|
|
2527
2527
|
}),
|
|
2528
|
-
!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (index.h("p", { class: sheet$a.classes.ErrorMessageStyle },
|
|
2528
|
+
!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (index.h("p", { class: sheet$a.classes.ErrorMessageStyle }, global.intl.formatMessage({
|
|
2529
|
+
id: `errorMessage-${content.checkboxName}`,
|
|
2530
|
+
defaultMessage: content.errorMessage,
|
|
2531
|
+
}))))));
|
|
2529
2532
|
}
|
|
2530
2533
|
|
|
2531
2534
|
const style$b = {
|
|
@@ -2569,7 +2572,10 @@ function DropdownFieldView(props) {
|
|
|
2569
2572
|
class: sheet$b.classes.ErrorStyle,
|
|
2570
2573
|
}
|
|
2571
2574
|
: [])), content.selectOptions),
|
|
2572
|
-
(validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet$b.classes.ErrorMessageStyle },
|
|
2575
|
+
(validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (index.h("p", { class: sheet$b.classes.ErrorMessageStyle }, global.intl.formatMessage({
|
|
2576
|
+
id: `errorMessage-${content.dropdownName}`,
|
|
2577
|
+
defaultMessage: content.errorMessage,
|
|
2578
|
+
})))));
|
|
2573
2579
|
}
|
|
2574
2580
|
|
|
2575
2581
|
const style$c = {
|
|
@@ -2597,7 +2603,10 @@ function InputFieldView(props) {
|
|
|
2597
2603
|
styleString$c),
|
|
2598
2604
|
index.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]) ? {
|
|
2599
2605
|
class: sheet$c.classes.ErrorStyle,
|
|
2600
|
-
helpText:
|
|
2606
|
+
helpText: global.intl.formatMessage({
|
|
2607
|
+
id: `errorMessage-${content.fieldName}`,
|
|
2608
|
+
defaultMessage: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
|
|
2609
|
+
}),
|
|
2601
2610
|
}
|
|
2602
2611
|
: [])))));
|
|
2603
2612
|
}
|
|
@@ -18,7 +18,7 @@ require('./luxon-59ca7d19.js');
|
|
|
18
18
|
const utils = require('./utils-8ef4fe4a.js');
|
|
19
19
|
require('./sqm-text-span-view-ab4ad6ef.js');
|
|
20
20
|
require('./sqm-portal-container-view-2d11ed71.js');
|
|
21
|
-
const ShadowViewAddon = require('./ShadowViewAddon-
|
|
21
|
+
const ShadowViewAddon = require('./ShadowViewAddon-a94a1ff9.js');
|
|
22
22
|
require('./sqm-portal-section-view-765aae4d.js');
|
|
23
23
|
|
|
24
24
|
const BigStat = class {
|
|
@@ -224,7 +224,7 @@ const CheckboxField = class {
|
|
|
224
224
|
value: this.checkboxName,
|
|
225
225
|
},
|
|
226
226
|
]);
|
|
227
|
-
if (missingProps) {
|
|
227
|
+
if (!index_module.jn() && missingProps) {
|
|
228
228
|
return index.h(RequiredPropsError, { missingProps: missingProps });
|
|
229
229
|
}
|
|
230
230
|
const content = {
|
|
@@ -350,7 +350,7 @@ const DropdownField = class {
|
|
|
350
350
|
value: this.dropdownName,
|
|
351
351
|
},
|
|
352
352
|
]);
|
|
353
|
-
if (missingProps) {
|
|
353
|
+
if (!index_module.jn() && missingProps) {
|
|
354
354
|
return index.h(RequiredPropsError, { missingProps: missingProps });
|
|
355
355
|
}
|
|
356
356
|
const content = {
|
|
@@ -844,7 +844,7 @@ const InputField = class {
|
|
|
844
844
|
value: this.fieldName,
|
|
845
845
|
},
|
|
846
846
|
]);
|
|
847
|
-
if (missingProps) {
|
|
847
|
+
if (!index_module.jn() && missingProps) {
|
|
848
848
|
return index.h(RequiredPropsError, { missingProps: missingProps });
|
|
849
849
|
}
|
|
850
850
|
const { states } = index_module.jn() ? useInputFieldDemo(this) : useInputField();
|
|
@@ -27,7 +27,7 @@ const sqmPortalContainerView = require('./sqm-portal-container-view-2d11ed71.js'
|
|
|
27
27
|
const sqmPortalProfileView = require('./sqm-portal-profile-view-b77382f6.js');
|
|
28
28
|
const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-042073ca.js');
|
|
29
29
|
const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-cb3c9c2f.js');
|
|
30
|
-
const ShadowViewAddon = require('./ShadowViewAddon-
|
|
30
|
+
const ShadowViewAddon = require('./ShadowViewAddon-a94a1ff9.js');
|
|
31
31
|
const sqmPortalSectionView = require('./sqm-portal-section-view-765aae4d.js');
|
|
32
32
|
|
|
33
33
|
/**
|
|
@@ -9893,7 +9893,7 @@ const NameFields$1 = /*#__PURE__*/Object.freeze({
|
|
|
9893
9893
|
NameFieldsWithErrors: NameFieldsWithErrors
|
|
9894
9894
|
});
|
|
9895
9895
|
|
|
9896
|
-
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
|
|
9896
|
+
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: A user is on the portal registration page\r\n Given a user is viewing the \"/register\"\r\n And \"/register\" contains the registration form\r\n And the registration form 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 the user is filling out the registration form\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 they try 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 @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 The error message string is evaluated as an ICU string, but currently is provided no context\r\n Given 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 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 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\r\n\r\n @minutae\r\n Scenario Outline: The checkbox field component fails fast if a checkbox name isn't provided\r\n Given the checkbox <mayHave> prop \"checkbox-name\"\r\n And it <mayHavePropValue>\r\n When a user views the checkbox\r\n Then an alert with an error message is displayed in place of the checkbox\r\n And it has a details section\r\n When \"More details\" is clicked\r\n Then the following information will be displayed\r\n | component being used |\r\n | missing attribute(s) |\r\n Examples:\r\n | mayBeAnAttribute | mayHavePropValue |\r\n | doesn't have | N/A |\r\n | has | \"\" |\r\n | has | |";
|
|
9897
9897
|
|
|
9898
9898
|
const CheckboxField_stories = {
|
|
9899
9899
|
title: "Components/Checkbox Field",
|
|
@@ -9952,8 +9952,11 @@ const Error$3 = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView
|
|
|
9952
9952
|
const CustomError = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$a, { states: {
|
|
9953
9953
|
...defaultProps$a.states,
|
|
9954
9954
|
validationErrors: {
|
|
9955
|
-
agree: "
|
|
9955
|
+
agree: "Must be checked",
|
|
9956
9956
|
},
|
|
9957
|
+
}, content: {
|
|
9958
|
+
...defaultProps$a.content,
|
|
9959
|
+
errorMessage: "This checkbox must be checked to continue",
|
|
9957
9960
|
} }))));
|
|
9958
9961
|
const TermsAndConditions$1 = createHookStory(() => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps, {
|
|
9959
9962
|
//@ts-ignore
|
|
@@ -10170,7 +10173,7 @@ const UseDropdownField = /*#__PURE__*/Object.freeze({
|
|
|
10170
10173
|
MissingName: MissingName$1
|
|
10171
10174
|
});
|
|
10172
10175
|
|
|
10173
|
-
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
|
|
10176
|
+
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,\r\n a 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 The error message string is evaluated as an ICU string, but currently is provided no context\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: 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 <formData> is recorded in the form data as a string\r\n Examples:\r\n | value | formInput | formData |\r\n | text | Hello there | Hello there |\r\n | date | 05/07/2021 | 2021-05-07 |\r\n | tel | (250) 234-9877 | (250) 234-9877 |\r\n\r\n @minutae\r\n Scenario Outline: The input field component fails fast if a field name isn't provided\r\n Given the input <mayHave> prop \"field-name\"\r\n And it <mayHavePropValue>\r\n When a user views the input\r\n Then an alert with an error message is displayed in place of the input\r\n And it has a details section\r\n When \"More details\" is clicked\r\n Then the following information will be displayed\r\n | component being used |\r\n | missing attribute(s) |\r\n Examples:\r\n | mayBeAnAttribute | mayHavePropValue |\r\n | doesn't have | N/A |\r\n | has | \"\" |\r\n | has | |";
|
|
10174
10177
|
|
|
10175
10178
|
const InputField_stories = {
|
|
10176
10179
|
title: "Components/Input Field",
|
|
@@ -60,8 +60,11 @@ export const Error = createHookStory(() => (h(CheckboxFieldView, Object.assign({
|
|
|
60
60
|
export const CustomError = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps, { states: {
|
|
61
61
|
...defaultProps.states,
|
|
62
62
|
validationErrors: {
|
|
63
|
-
agree: "
|
|
63
|
+
agree: "Must be checked",
|
|
64
64
|
},
|
|
65
|
+
}, content: {
|
|
66
|
+
...defaultProps.content,
|
|
67
|
+
errorMessage: "This checkbox must be checked to continue",
|
|
65
68
|
} }))));
|
|
66
69
|
export const TermsAndConditions = createHookStory(() => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps, {
|
|
67
70
|
//@ts-ignore
|
|
@@ -64,5 +64,8 @@ export function CheckboxFieldView(props) {
|
|
|
64
64
|
}, {
|
|
65
65
|
labelLink: (h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
|
|
66
66
|
}),
|
|
67
|
-
!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet.classes.ErrorMessageStyle },
|
|
67
|
+
!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet.classes.ErrorMessageStyle }, intl.formatMessage({
|
|
68
|
+
id: `errorMessage-${content.checkboxName}`,
|
|
69
|
+
defaultMessage: content.errorMessage,
|
|
70
|
+
}))))));
|
|
68
71
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import jss from "jss";
|
|
3
3
|
import preset from "jss-preset-default";
|
|
4
|
+
import { intl } from "../../global/global";
|
|
4
5
|
const style = {
|
|
5
6
|
ErrorStyle: {
|
|
6
7
|
"--sl-input-border-color": "var(--sl-color-danger-500)",
|
|
@@ -42,5 +43,8 @@ export function DropdownFieldView(props) {
|
|
|
42
43
|
class: sheet.classes.ErrorStyle,
|
|
43
44
|
}
|
|
44
45
|
: [])), content.selectOptions),
|
|
45
|
-
(validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (h("p", { class: sheet.classes.ErrorMessageStyle },
|
|
46
|
+
(validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (h("p", { class: sheet.classes.ErrorMessageStyle }, intl.formatMessage({
|
|
47
|
+
id: `errorMessage-${content.dropdownName}`,
|
|
48
|
+
defaultMessage: content.errorMessage,
|
|
49
|
+
})))));
|
|
46
50
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import jss from "jss";
|
|
3
3
|
import preset from "jss-preset-default";
|
|
4
|
+
import { intl } from "../../global/global";
|
|
4
5
|
import { ErrorStyles } from "../../global/mixins";
|
|
5
6
|
const style = {
|
|
6
7
|
ErrorStyle: ErrorStyles,
|
|
@@ -27,7 +28,10 @@ export function InputFieldView(props) {
|
|
|
27
28
|
styleString),
|
|
28
29
|
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]) ? {
|
|
29
30
|
class: sheet.classes.ErrorStyle,
|
|
30
|
-
helpText:
|
|
31
|
+
helpText: intl.formatMessage({
|
|
32
|
+
id: `errorMessage-${content.fieldName}`,
|
|
33
|
+
defaultMessage: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
|
|
34
|
+
}),
|
|
31
35
|
}
|
|
32
36
|
: [])))));
|
|
33
37
|
}
|
|
@@ -39,7 +39,7 @@ export class InputField {
|
|
|
39
39
|
value: this.fieldName,
|
|
40
40
|
},
|
|
41
41
|
]);
|
|
42
|
-
if (missingProps) {
|
|
42
|
+
if (!isDemo() && missingProps) {
|
|
43
43
|
return h(RequiredPropsError, { missingProps: missingProps });
|
|
44
44
|
}
|
|
45
45
|
const { states } = isDemo() ? useInputFieldDemo(this) : useInputField();
|
|
@@ -2523,7 +2523,10 @@ function CheckboxFieldView(props) {
|
|
|
2523
2523
|
}, {
|
|
2524
2524
|
labelLink: (h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
|
|
2525
2525
|
}),
|
|
2526
|
-
!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet$a.classes.ErrorMessageStyle },
|
|
2526
|
+
!states.checked && (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet$a.classes.ErrorMessageStyle }, intl.formatMessage({
|
|
2527
|
+
id: `errorMessage-${content.checkboxName}`,
|
|
2528
|
+
defaultMessage: content.errorMessage,
|
|
2529
|
+
}))))));
|
|
2527
2530
|
}
|
|
2528
2531
|
|
|
2529
2532
|
const style$b = {
|
|
@@ -2567,7 +2570,10 @@ function DropdownFieldView(props) {
|
|
|
2567
2570
|
class: sheet$b.classes.ErrorStyle,
|
|
2568
2571
|
}
|
|
2569
2572
|
: [])), content.selectOptions),
|
|
2570
|
-
(validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (h("p", { class: sheet$b.classes.ErrorMessageStyle },
|
|
2573
|
+
(validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (h("p", { class: sheet$b.classes.ErrorMessageStyle }, intl.formatMessage({
|
|
2574
|
+
id: `errorMessage-${content.dropdownName}`,
|
|
2575
|
+
defaultMessage: content.errorMessage,
|
|
2576
|
+
})))));
|
|
2571
2577
|
}
|
|
2572
2578
|
|
|
2573
2579
|
const style$c = {
|
|
@@ -2595,7 +2601,10 @@ function InputFieldView(props) {
|
|
|
2595
2601
|
styleString$c),
|
|
2596
2602
|
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]) ? {
|
|
2597
2603
|
class: sheet$c.classes.ErrorStyle,
|
|
2598
|
-
helpText:
|
|
2604
|
+
helpText: intl.formatMessage({
|
|
2605
|
+
id: `errorMessage-${content.fieldName}`,
|
|
2606
|
+
defaultMessage: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
|
|
2607
|
+
}),
|
|
2599
2608
|
}
|
|
2600
2609
|
: [])))));
|
|
2601
2610
|
}
|
|
@@ -14,7 +14,7 @@ import './luxon-f44215d9.js';
|
|
|
14
14
|
import { g as getProps, a as getMissingProps, s as sanitizeUrlPath } from './utils-d7bbb0e2.js';
|
|
15
15
|
import './sqm-text-span-view-020db63f.js';
|
|
16
16
|
import './sqm-portal-container-view-34f26e2a.js';
|
|
17
|
-
import { c as useDemoBigStat, K as useBigStat, B as BigStatView, H as autoColorScaleCss, G as CardFeedView, C as CheckboxFieldView, D as DropdownFieldView, E as EditProfileView, I as InputFieldView, M as withShadowView, L as LeaderboardView, N as NameFieldsView, e as PortalChangePasswordView, P as PortalFrameView, f as PortalLoginView, g as PortalRegisterView, R as ReferralIframeView, O as demoRewardExchange, i as RewardExchangeView, Q as pathToRegexp, b as useShareButton, S as ShareButtonView, a as ShareLinkView, u as useShareLink, d as StatContainerView, T as TaskCardView } from './ShadowViewAddon-
|
|
17
|
+
import { c as useDemoBigStat, K as useBigStat, B as BigStatView, H as autoColorScaleCss, G as CardFeedView, C as CheckboxFieldView, D as DropdownFieldView, E as EditProfileView, I as InputFieldView, M as withShadowView, L as LeaderboardView, N as NameFieldsView, e as PortalChangePasswordView, P as PortalFrameView, f as PortalLoginView, g as PortalRegisterView, R as ReferralIframeView, O as demoRewardExchange, i as RewardExchangeView, Q as pathToRegexp, b as useShareButton, S as ShareButtonView, a as ShareLinkView, u as useShareLink, d as StatContainerView, T as TaskCardView } from './ShadowViewAddon-87c6e4d6.js';
|
|
18
18
|
import './sqm-portal-section-view-c8d1c727.js';
|
|
19
19
|
|
|
20
20
|
const BigStat = class {
|
|
@@ -220,7 +220,7 @@ const CheckboxField = class {
|
|
|
220
220
|
value: this.checkboxName,
|
|
221
221
|
},
|
|
222
222
|
]);
|
|
223
|
-
if (missingProps) {
|
|
223
|
+
if (!jn() && missingProps) {
|
|
224
224
|
return h$1(RequiredPropsError, { missingProps: missingProps });
|
|
225
225
|
}
|
|
226
226
|
const content = {
|
|
@@ -346,7 +346,7 @@ const DropdownField = class {
|
|
|
346
346
|
value: this.dropdownName,
|
|
347
347
|
},
|
|
348
348
|
]);
|
|
349
|
-
if (missingProps) {
|
|
349
|
+
if (!jn() && missingProps) {
|
|
350
350
|
return h$1(RequiredPropsError, { missingProps: missingProps });
|
|
351
351
|
}
|
|
352
352
|
const content = {
|
|
@@ -840,7 +840,7 @@ const InputField = class {
|
|
|
840
840
|
value: this.fieldName,
|
|
841
841
|
},
|
|
842
842
|
]);
|
|
843
|
-
if (missingProps) {
|
|
843
|
+
if (!jn() && missingProps) {
|
|
844
844
|
return h$1(RequiredPropsError, { missingProps: missingProps });
|
|
845
845
|
}
|
|
846
846
|
const { states } = jn() ? useInputFieldDemo(this) : useInputField();
|
|
@@ -23,7 +23,7 @@ import { P as PortalContainerView } from './sqm-portal-container-view-34f26e2a.j
|
|
|
23
23
|
import { P as PortalProfileView } from './sqm-portal-profile-view-28c39970.js';
|
|
24
24
|
import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-e0436989.js';
|
|
25
25
|
import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-c489166b.js';
|
|
26
|
-
import { S as ShareButtonView, L as LeaderboardView, a as ShareLinkView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, b as useShareButton, c as useDemoBigStat, d as StatContainerView, e as PortalChangePasswordView, f as PortalLoginView, g as PortalRegisterView, T as TaskCardView, h as ProgressBarView, R as ReferralIframeView, N as NameFieldsView, C as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, i as RewardExchangeView, r as rewardExchangeCustomErrorMsg, j as rewardExchangeLongText, k as rewardExchangeSelected, l as chooseAmountFixed, m as chooseAmountFixedNoDescription, n as chooseAmountVariable, o as chooseAmountVariableNoDescription, p as chooseAmountVariableDisabled, q as chooseAmountVariableUnavailable, s as confirmFixed, t as confirmVariable, v as redemptionError, w as queryError, x as success, y as successVariable, z as loading, A as empty$1, F as rewardExchange, G as CardFeedView, H as autoColorScaleCss, J as ShadowViewAddon } from './ShadowViewAddon-
|
|
26
|
+
import { S as ShareButtonView, L as LeaderboardView, a as ShareLinkView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, b as useShareButton, c as useDemoBigStat, d as StatContainerView, e as PortalChangePasswordView, f as PortalLoginView, g as PortalRegisterView, T as TaskCardView, h as ProgressBarView, R as ReferralIframeView, N as NameFieldsView, C as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, i as RewardExchangeView, r as rewardExchangeCustomErrorMsg, j as rewardExchangeLongText, k as rewardExchangeSelected, l as chooseAmountFixed, m as chooseAmountFixedNoDescription, n as chooseAmountVariable, o as chooseAmountVariableNoDescription, p as chooseAmountVariableDisabled, q as chooseAmountVariableUnavailable, s as confirmFixed, t as confirmVariable, v as redemptionError, w as queryError, x as success, y as successVariable, z as loading, A as empty$1, F as rewardExchange, G as CardFeedView, H as autoColorScaleCss, J as ShadowViewAddon } from './ShadowViewAddon-87c6e4d6.js';
|
|
27
27
|
import { P as PortalSectionView } from './sqm-portal-section-view-c8d1c727.js';
|
|
28
28
|
|
|
29
29
|
/**
|
|
@@ -9889,7 +9889,7 @@ const NameFields$1 = /*#__PURE__*/Object.freeze({
|
|
|
9889
9889
|
NameFieldsWithErrors: NameFieldsWithErrors
|
|
9890
9890
|
});
|
|
9891
9891
|
|
|
9892
|
-
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
|
|
9892
|
+
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: A user is on the portal registration page\r\n Given a user is viewing the \"/register\"\r\n And \"/register\" contains the registration form\r\n And the registration form 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 the user is filling out the registration form\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 they try 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 @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 The error message string is evaluated as an ICU string, but currently is provided no context\r\n Given 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 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 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\r\n\r\n @minutae\r\n Scenario Outline: The checkbox field component fails fast if a checkbox name isn't provided\r\n Given the checkbox <mayHave> prop \"checkbox-name\"\r\n And it <mayHavePropValue>\r\n When a user views the checkbox\r\n Then an alert with an error message is displayed in place of the checkbox\r\n And it has a details section\r\n When \"More details\" is clicked\r\n Then the following information will be displayed\r\n | component being used |\r\n | missing attribute(s) |\r\n Examples:\r\n | mayBeAnAttribute | mayHavePropValue |\r\n | doesn't have | N/A |\r\n | has | \"\" |\r\n | has | |";
|
|
9893
9893
|
|
|
9894
9894
|
const CheckboxField_stories = {
|
|
9895
9895
|
title: "Components/Checkbox Field",
|
|
@@ -9948,8 +9948,11 @@ const Error$3 = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, de
|
|
|
9948
9948
|
const CustomError = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps$a, { states: {
|
|
9949
9949
|
...defaultProps$a.states,
|
|
9950
9950
|
validationErrors: {
|
|
9951
|
-
agree: "
|
|
9951
|
+
agree: "Must be checked",
|
|
9952
9952
|
},
|
|
9953
|
+
}, content: {
|
|
9954
|
+
...defaultProps$a.content,
|
|
9955
|
+
errorMessage: "This checkbox must be checked to continue",
|
|
9953
9956
|
} }))));
|
|
9954
9957
|
const TermsAndConditions$1 = createHookStory(() => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps, {
|
|
9955
9958
|
//@ts-ignore
|
|
@@ -10166,7 +10169,7 @@ const UseDropdownField = /*#__PURE__*/Object.freeze({
|
|
|
10166
10169
|
MissingName: MissingName$1
|
|
10167
10170
|
});
|
|
10168
10171
|
|
|
10169
|
-
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
|
|
10172
|
+
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,\r\n a 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 The error message string is evaluated as an ICU string, but currently is provided no context\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: 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 <formData> is recorded in the form data as a string\r\n Examples:\r\n | value | formInput | formData |\r\n | text | Hello there | Hello there |\r\n | date | 05/07/2021 | 2021-05-07 |\r\n | tel | (250) 234-9877 | (250) 234-9877 |\r\n\r\n @minutae\r\n Scenario Outline: The input field component fails fast if a field name isn't provided\r\n Given the input <mayHave> prop \"field-name\"\r\n And it <mayHavePropValue>\r\n When a user views the input\r\n Then an alert with an error message is displayed in place of the input\r\n And it has a details section\r\n When \"More details\" is clicked\r\n Then the following information will be displayed\r\n | component being used |\r\n | missing attribute(s) |\r\n Examples:\r\n | mayBeAnAttribute | mayHavePropValue |\r\n | doesn't have | N/A |\r\n | has | \"\" |\r\n | has | |";
|
|
10170
10173
|
|
|
10171
10174
|
const InputField_stories = {
|
|
10172
10175
|
title: "Components/Input Field",
|