@saasquatch/mint-components 1.14.7-5 → 1.14.7-6

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

@@ -16,6 +16,7 @@ import { A as AssetCardView } from './sqm-asset-card-view-fe5db3c0.js';
 import { C as CloseButtonView } from './sqm-close-button-view-f9819751.js';
 import './index-ffa26b43.js';
 import { E as EmailRegistrationView } from './email-registration-view-a7818cf2.js';
+import { L as LeadCheckboxFieldView } from './sqm-lead-checkbox-field-view-f2d478ad.js';
 import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-753c8d4a.js';
 import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-8ef8180f.js';
 import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-9d802b78.js';
@@ -16060,6 +16061,67 @@ const LeadFormDropdownField = /*#__PURE__*/Object.freeze({
   WithInitialValue: WithInitialValue$1
 });
 
+const LeadCheckboxField_stories = {
+  title: "Components/Lead Checkbox Field",
+};
+const defaultProps$w = {
+  states: {
+    leadFormState: {
+      validationErrors: {},
+    },
+    checked: false,
+  },
+  content: {
+    checkboxName: "terms",
+    checkboxLabel: "By signing up you agree to the {labelLink}",
+    checkboxLabelLink: "https://example.com",
+    checkboxLabelLinkText: "Terms and Conditions",
+    errorMessage: "{checkboxLabel} Must be checked",
+  },
+  callbacks: {
+    setChecked: () => { },
+  },
+};
+const Default$u = createHookStory(() => (h(LeadCheckboxFieldView, Object.assign({}, defaultProps$w))));
+const DefaultChecked$1 = createHookStory(() => (h(LeadCheckboxFieldView, Object.assign({}, defaultProps$w, { states: {
+    ...defaultProps$w.states,
+    checked: true,
+  } }))));
+const CustomLabel$3 = createHookStory(() => (h(LeadCheckboxFieldView, Object.assign({}, defaultProps$w, { content: {
+    ...defaultProps$w.content,
+    checkboxLabel: "I Agree",
+  } }))));
+const Error$d = createHookStory(() => (h(LeadCheckboxFieldView, Object.assign({}, defaultProps$w, { states: {
+    ...defaultProps$w.states,
+    leadFormState: {
+      validationErrors: {
+        terms: "{checkboxLabel} Must be checked",
+      },
+    },
+  } }))));
+const CustomError$3 = createHookStory(() => (h(LeadCheckboxFieldView, Object.assign({}, defaultProps$w, { states: {
+    ...defaultProps$w.states,
+    checked: true,
+    leadFormState: {
+      validationErrors: {
+        terms: "{checkboxLabel} Must be checked",
+      },
+    },
+  }, content: {
+    ...defaultProps$w.content,
+    errorMessage: "This checkbox must be checked to continue",
+  } }))));
+
+const LeadCheckboxField = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': LeadCheckboxField_stories,
+  Default: Default$u,
+  DefaultChecked: DefaultChecked$1,
+  CustomLabel: CustomLabel$3,
+  Error: Error$d,
+  CustomError: CustomError$3
+});
+
 /**
  *
  * Themes
@@ -16072,7 +16134,7 @@ const LeadFormDropdownField = /*#__PURE__*/Object.freeze({
  *
  */
 //
-const Default$u = `
+const Default$v = `
  // No CSS
 `;
 const Orangey = `
@@ -16106,7 +16168,7 @@ const Klip = `
 
 const Themes = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  Default: Default$u,
+  Default: Default$v,
   Orangey: Orangey,
   Netflix: Netflix,
   SaaSquatchCorporate: SaaSquatchCorporate,
@@ -18800,6 +18862,7 @@ const stories = [
   LeadForm,
   LeadInputField,
   LeadFormDropdownField,
+  LeadCheckboxField,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {

package/dist/esm-es5/sqm-lead-checkbox-field-view-f2d478ad.js

@@ -0,0 +1 @@
+import{h}from"./index-91e7729f.js";import{i as intl}from"./global-be1f9992.js";import{j as jss,a as create}from"./JSS-67b5cff8.js";var style={ErrorStyle:{"&::part(control)":{borderColor:"var(--sl-color-danger-500)",outline:"var(--sl-color-danger-500)"},"&:host":{"--focus-ring":"0 0 0 var(--sl-focus-ring-width) red !important"}},ErrorMessageStyle:{margin:0,marginTop:"5px",color:"var(--sl-color-danger-500)",fontSize:"var(--sl-input-help-text-font-size-medium)",fontFamily:"var(--sl-font-sans)",fontWeight:"var(--sl-font-weight-normal)"},FieldContainer:{"margin-bottom":"var(--sl-spacing-large)"}};var vanillaStyle="\n:host {\n  margin: 0 auto;\n  width: 100%;\n  display: block;\n}\nsl-checkbox::part(label){\n  font-size: var(--sl-input-label-font-size-small);\n  font-weight: var(--sl-font-weight-normal);\n  line-height: 20px;\n}\nsl-checkbox::part(base){\n  align-items: start;\n}\n";jss.setup(create());var sheet=jss.createStyleSheet(style);var styleString=sheet.toString();function LeadCheckboxFieldView(e){var a,l,t,r,o;var s=e.states,n=e.content,i=e.callbacks;var c=(a=s===null||s===void 0?void 0:s.leadFormState)===null||a===void 0?void 0:a.validationErrors;var d=function(e){var a=e.checkboxLabel;return intl.formatMessage({id:"requiredFieldErrorMessage-"+a,defaultMessage:n.errorMessage},{checkboxLabel:a})};return h("div",{class:sheet.classes.FieldContainer,part:"sqm-base"},h("style",{type:"text/css"},vanillaStyle,styleString),h("sl-checkbox",Object.assign({exportparts:"label: input-label, base: input-base",name:"/"+n.checkboxName,checked:s.checked,"onSl-change":function(e){e.target.value=e.target.checked;i.setChecked(e.target.value)}},!n.checkboxOptional?{required:false}:[],{disabled:((l=s.leadFormState)===null||l===void 0?void 0:l.loading)||((t=s.leadFormState)===null||t===void 0?void 0:t.disabled),validationError:function(e){var a=e.value;if(!a&&!n.checkboxOptional){return d({checkboxLabel:n.checkboxLabel})}}},((o=(r=s.leadFormState)===null||r===void 0?void 0:r.validationErrors)===null||o===void 0?void 0:o[n.checkboxName])?{class:sheet.classes.ErrorStyle}:[]),intl.formatMessage({id:n.checkboxName+"-message",defaultMessage:n.checkboxLabel},{labelLink:h("a",{href:n.checkboxLabelLink,target:"_blank"},n.checkboxLabelLinkText||n.checkboxLabelLink)})),(c===null||c===void 0?void 0:c[n.checkboxName])&&h("p",{class:sheet.classes.ErrorMessageStyle},d({checkboxLabel:n.checkboxLabel})))}export{LeadCheckboxFieldView as L};

package/dist/esm-es5/sqm-lead-checkbox-field.entry.js

@@ -1 +1 @@
-var __assign=this&&this.__assign||function(){__assign=Object.assign||function(e){for(var a,t=1,s=arguments.length;t<s;t++){a=arguments[t];for(var o in a)if(Object.prototype.hasOwnProperty.call(a,o))e[o]=a[o]}return e};return __assign.apply(this,arguments)};import{h,r as registerInstance}from"./index-91e7729f.js";import{i as d,k as useState,f as useEffect,n as h$1}from"./stencil-hooks.module-4bc38af4.js";import{i as intl}from"./global-be1f9992.js";import{i as isDemo}from"./index.module-89a79f66.js";import{c as cjs}from"./cjs-bdfb4486.js";import{a as getMissingProps,g as getProps}from"./utils-334c1e34.js";import{j as jss,a as create}from"./JSS-67b5cff8.js";import{L as LEAD_FORM_STATE_CONTEXT,R as RequiredPropsError}from"./useLeadFormState-9016d812.js";var style={ErrorStyle:{"&::part(control)":{background:"var(--sl-color-danger-10)",borderColor:"var(--sl-color-danger-500)",outline:"var(--sl-color-danger-500)"},"&:host":{"--focus-ring":"0 0 0 var(--sl-focus-ring-width) red !important"}},ErrorMessageStyle:{margin:0,marginTop:"5px",color:"var(--sl-color-danger-500)",fontSize:"var(--sl-input-help-text-font-size-medium)",fontFamily:"var(--sl-font-sans)",fontWeight:"var(--sl-font-weight-normal)"},FieldContainer:{"margin-bottom":"var(--sl-spacing-large)"}};var vanillaStyle="\n:host {\n  margin: 0 auto;\n  width: 100%;\n  display: block;\n}\nsl-checkbox::part(label){\n  font-size: var(--sl-input-label-font-size-small);\n  font-weight: var(--sl-font-weight-normal);\n  line-height: 20px;\n}\nsl-checkbox::part(base){\n  align-items: start;\n}\n";jss.setup(create());var sheet=jss.createStyleSheet(style);var styleString=sheet.toString();function LeadCheckboxFieldView(e){var a,t,s,o,i;var r=e.states,l=e.content,n=e.callbacks;var c=(a=r===null||r===void 0?void 0:r.leadFormState)===null||a===void 0?void 0:a.validationErrors;var d=function(e){var a=e.checkboxLabel;return intl.formatMessage({id:"requiredFieldErrorMessage-"+a,defaultMessage:l.errorMessage},{checkboxLabel:a})};return h("div",{class:sheet.classes.FieldContainer,part:"sqm-base"},h("style",{type:"text/css"},vanillaStyle,styleString),h("sl-checkbox",Object.assign({exportparts:"label: input-label, base: input-base",name:"/"+l.checkboxName,checked:r.checked,"onSl-change":function(e){e.target.value=e.target.checked;n.setChecked(e.target.value)}},!l.checkboxOptional?{required:false}:[],{disabled:((t=r.leadFormState)===null||t===void 0?void 0:t.loading)||((s=r.leadFormState)===null||s===void 0?void 0:s.disabled),validationError:function(e){var a=e.value;if(!a&&!l.checkboxOptional){return d({checkboxLabel:l.checkboxLabel})}}},((i=(o=r.leadFormState)===null||o===void 0?void 0:o.validationErrors)===null||i===void 0?void 0:i[l.checkboxName])?{class:sheet.classes.ErrorStyle}:[]),intl.formatMessage({id:l.checkboxName+"-message",defaultMessage:l.checkboxLabel},{labelLink:h("a",{href:l.checkboxLabelLink,target:"_blank"},l.checkboxLabelLinkText||l.checkboxLabelLink)})),(c===null||c===void 0?void 0:c[l.checkboxName])&&h("p",{class:sheet.classes.ErrorMessageStyle},d({checkboxLabel:l.checkboxLabel})))}function useLeadCheckboxField(e){var a;var t=d(LEAD_FORM_STATE_CONTEXT);var s=useState(false),o=s[0],i=s[1];useEffect((function(){var a,s;if((a=t===null||t===void 0?void 0:t.initialData)===null||a===void 0?void 0:a[e.checkboxName]){i(!!((s=t===null||t===void 0?void 0:t.initialData)===null||s===void 0?void 0:s[e.checkboxName]))}}),[(a=t===null||t===void 0?void 0:t.initialData)===null||a===void 0?void 0:a[e.checkboxName]]);return{states:{leadFormState:t,checked:o},callbacks:{setChecked:i}}}var LeadCheckboxField=function(){function e(e){registerInstance(this,e);this.ignored=true;this.checkboxLabel="By signing up you agree to the {labelLink}";this.checkboxLabelLink="https://example.com";this.checkboxLabelLinkText="Terms and Conditions";this.errorMessage="{checkboxLabel} must be checked";this.checkboxOptional=false;h$1(this)}e.prototype.disconnectedCallback=function(){};e.prototype.render=function(){var e=getMissingProps([{attribute:"checkbox-name",value:this.checkboxName}]);if(!isDemo()&&e){return h(RequiredPropsError,{missingProps:e,heading:"An error occured while loading this form",subheading:"A technical problem prevented this checkbox field from loading. Please contact us with the link to this page.",description:"Values for the following attributes are missing:"})}var a=__assign({},getProps(this));var t=isDemo()?useLeadCheckboxFieldDemo(this):useLeadCheckboxField(this),s=t.states,o=t.callbacks;return h(LeadCheckboxFieldView,{states:s,content:a,callbacks:o})};return e}();function useLeadCheckboxFieldDemo(e){return cjs({states:{registrationFormState:{},checked:false},callbacks:{setChecked:function(){}}},e.demoData||{},{arrayMerge:function(e,a){return a}})}export{LeadCheckboxField as sqm_lead_checkbox_field};
+var __assign=this&&this.__assign||function(){__assign=Object.assign||function(e){for(var i,s=1,t=arguments.length;s<t;s++){i=arguments[s];for(var a in i)if(Object.prototype.hasOwnProperty.call(i,a))e[a]=i[a]}return e};return __assign.apply(this,arguments)};import{r as registerInstance,h as h$1}from"./index-91e7729f.js";import{i as d,k as useState,f as useEffect,n as h}from"./stencil-hooks.module-4bc38af4.js";import"./global-be1f9992.js";import{i as isDemo}from"./index.module-89a79f66.js";import{c as cjs}from"./cjs-bdfb4486.js";import{a as getMissingProps,g as getProps}from"./utils-334c1e34.js";import"./JSS-67b5cff8.js";import{L as LEAD_FORM_STATE_CONTEXT,R as RequiredPropsError}from"./useLeadFormState-9016d812.js";import{L as LeadCheckboxFieldView}from"./sqm-lead-checkbox-field-view-f2d478ad.js";function useLeadCheckboxField(e){var i;var s=d(LEAD_FORM_STATE_CONTEXT);var t=useState(false),a=t[0],o=t[1];useEffect((function(){var i,t;if((i=s===null||s===void 0?void 0:s.initialData)===null||i===void 0?void 0:i[e.checkboxName]){o(!!((t=s===null||s===void 0?void 0:s.initialData)===null||t===void 0?void 0:t[e.checkboxName]))}}),[(i=s===null||s===void 0?void 0:s.initialData)===null||i===void 0?void 0:i[e.checkboxName]]);return{states:{leadFormState:s,checked:a},callbacks:{setChecked:o}}}var LeadCheckboxField=function(){function e(e){registerInstance(this,e);this.ignored=true;this.checkboxLabel="By signing up you agree to the {labelLink}";this.checkboxLabelLink="https://example.com";this.checkboxLabelLinkText="Terms and Conditions";this.errorMessage="{checkboxLabel} must be checked";this.checkboxOptional=false;h(this)}e.prototype.disconnectedCallback=function(){};e.prototype.render=function(){var e=getMissingProps([{attribute:"checkbox-name",value:this.checkboxName}]);if(!isDemo()&&e){return h$1(RequiredPropsError,{missingProps:e,heading:"An error occured while loading this form",subheading:"A technical problem prevented this checkbox field from loading. Please contact us with the link to this page.",description:"Values for the following attributes are missing:"})}var i=__assign({},getProps(this));var s=isDemo()?useLeadCheckboxFieldDemo(this):useLeadCheckboxField(this),t=s.states,a=s.callbacks;return h$1(LeadCheckboxFieldView,{states:t,content:i,callbacks:a})};return e}();function useLeadCheckboxFieldDemo(e){return cjs({states:{registrationFormState:{},checked:false},callbacks:{setChecked:function(){}}},e.demoData||{},{arrayMerge:function(e,i){return i}})}export{LeadCheckboxField as sqm_lead_checkbox_field};