@skdx/web-components-blocks 0.37.0 → 0.39.0

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.
Files changed (24) hide show
  1. package/custom-elements.json +146 -146
  2. package/dist/forgot-password-page/ForgotPasswordPage.cjs +3 -2
  3. package/dist/forgot-password-page/ForgotPasswordPage.js +6 -5
  4. package/dist/page-container/PageContainer.d.cts +1 -1
  5. package/dist/page-container/PageContainer.d.ts +1 -1
  6. package/dist/reset-password-page/ResetPasswordPage.cjs +3 -2
  7. package/dist/reset-password-page/ResetPasswordPage.js +2 -1
  8. package/dist/sign-in-page/SignInPage.cjs +2 -1
  9. package/dist/sign-in-page/SignInPage.js +1 -0
  10. package/dist/sign-up-page/SignUpPage.cjs +22 -17
  11. package/dist/sign-up-page/SignUpPage.d.cts +3 -0
  12. package/dist/sign-up-page/SignUpPage.d.ts +3 -0
  13. package/dist/sign-up-page/SignUpPage.js +13 -8
  14. package/dist/usage-card/UsageCard.cjs +4 -4
  15. package/dist/usage-card/UsageCard.js +9 -9
  16. package/dist/verification-page/VerificationPage.cjs +8 -3
  17. package/dist/verification-page/VerificationPage.d.cts +2 -0
  18. package/dist/verification-page/VerificationPage.d.ts +2 -0
  19. package/dist/verification-page/VerificationPage.js +8 -3
  20. package/dist/workspace-switcher/WorkspaceSwitcher.cjs +17 -17
  21. package/dist/workspace-switcher/WorkspaceSwitcher.d.cts +1 -0
  22. package/dist/workspace-switcher/WorkspaceSwitcher.d.ts +1 -0
  23. package/dist/workspace-switcher/WorkspaceSwitcher.js +14 -14
  24. package/package.json +3 -3
package/dist/reset-password-page/ResetPasswordPage.cjs CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";var p=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var v=(i,t)=>{for(var e in t)p(i,e,{get:t[e],enumerable:!0})},$=(i,t,e,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of b(t))!f.call(i,r)&&r!==e&&p(i,r,{get:()=>t[r],enumerable:!(o=m(t,r))||o.enumerable});return i};var y=i=>$(p({},"__esModule",{value:!0}),i),d=(i,t,e,o)=>{for(var r=o>1?void 0:o?m(t,e):t,l=i.length-1,c;l>=0;l--)(c=i[l])&&(r=(o?c(t,e,r):c(r))||r);return o&&r&&p(t,e,r),r};var C={};v(C,{SkdxResetPasswordPage:()=>a});module.exports=y(C);var s=require("lit"),n=require("lit/decorators.js"),w=require("../internal/define.cjs"),x=require("../internal/events.cjs"),u=require("../internal/slots.cjs"),M=require("@skdx/web-components/alert"),q=require("@skdx/web-components/button"),S=require("@skdx/web-components/field"),T=require("@skdx/web-components/form"),V=require("@skdx/web-components/heading"),N=require("@skdx/web-components/password-input");var g="data-skdx-reset-password-page-generated",_="data-skdx-reset-password-page-content",h="confirmPassword",E=0,a=class extends s.LitElement{constructor(){super(...arguments);this.title="Choose a new password";this.pending=!1;this.passwordLabel="New password";this.passwordMismatchMessage="Passwords do not match";this.submitLabel="Update password";this.titleId=`skdx-reset-password-page-title-${++E}`;this.handleSubmit=e=>{let o=e.target?.closest("skdx-form");if(!o)return;e.preventDefault();let r=k(o,"password")?.value??"",l=k(o,h);if(l&&l.value!==r){l.setCustomValidity(this.passwordMismatchMessage),l.reportValidity();return}(0,x.emit)(this,"reset-password",{password:r})};this.clearMismatch=e=>{e.target.setCustomValidity("")}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),super.disconnectedCallback()}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-reset-password-page__${e}`)}get contentRegion(){return this.querySelector(`[${_}]`)}get hasContent(){return(0,u.hasUnslottedChild)(this,g)||(this.contentRegion?.hasChildNodes()??!1)}updated(){(0,u.placeSlotted)(this,g,{requirements:this.region("requirements"),footer:this.region("footer")},this.contentRegion)}render(){return s.html`
1
+ "use strict";var p=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var v=(a,t)=>{for(var e in t)p(a,e,{get:t[e],enumerable:!0})},$=(a,t,e,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of b(t))!f.call(a,r)&&r!==e&&p(a,r,{get:()=>t[r],enumerable:!(o=m(t,r))||o.enumerable});return a};var y=a=>$(p({},"__esModule",{value:!0}),a),d=(a,t,e,o)=>{for(var r=o>1?void 0:o?m(t,e):t,l=a.length-1,c;l>=0;l--)(c=a[l])&&(r=(o?c(t,e,r):c(r))||r);return o&&r&&p(t,e,r),r};var C={};v(C,{SkdxResetPasswordPage:()=>i});module.exports=y(C);var s=require("lit"),n=require("lit/decorators.js"),w=require("../internal/define.cjs"),x=require("../internal/events.cjs"),u=require("../internal/slots.cjs"),M=require("@skdx/web-components/alert"),q=require("@skdx/web-components/button"),S=require("@skdx/web-components/field"),T=require("@skdx/web-components/form"),V=require("@skdx/web-components/heading"),N=require("@skdx/web-components/password-input");var g="data-skdx-reset-password-page-generated",_="data-skdx-reset-password-page-content",h="confirmPassword",E=0,i=class extends s.LitElement{constructor(){super(...arguments);this.title="Choose a new password";this.pending=!1;this.passwordLabel="New password";this.passwordMismatchMessage="Passwords do not match";this.submitLabel="Update password";this.titleId=`skdx-reset-password-page-title-${++E}`;this.handleSubmit=e=>{let o=e.target?.closest("skdx-form");if(!o)return;e.preventDefault();let r=k(o,"password")?.value??"",l=k(o,h);if(l&&l.value!==r){l.setCustomValidity(this.passwordMismatchMessage),l.reportValidity();return}(0,x.emit)(this,"reset-password",{password:r})};this.clearMismatch=e=>{e.target.setCustomValidity("")}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),super.disconnectedCallback()}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-reset-password-page__${e}`)}get contentRegion(){return this.querySelector(`[${_}]`)}get hasContent(){return(0,u.hasUnslottedChild)(this,g)||(this.contentRegion?.hasChildNodes()??!1)}updated(){(0,u.placeSlotted)(this,g,{requirements:this.region("requirements"),footer:this.region("footer")},this.contentRegion)}render(){return s.html`
2
2
  <div
3
3
  class="skdx-reset-password-page__panel"
4
4
  data-skdx-reset-password-page-generated
@@ -11,6 +11,7 @@
11
11
  >
12
12
  ${this.error?s.html`<skdx-alert
13
13
  class="skdx-reset-password-page__error"
14
+ .role=${"alert"}
14
15
  .status=${"danger"}
15
16
  >${this.error}</skdx-alert
16
17
  >`:s.nothing}
@@ -66,4 +67,4 @@
66
67
  </skdx-form>`}
67
68
  ${this.hasSlotted("footer")?s.html`<div class="skdx-reset-password-page__footer"></div>`:s.nothing}
68
69
  </div>
69
- `}};d([(0,n.property)({type:String})],a.prototype,"title",2),d([(0,n.property)({type:String})],a.prototype,"error",2),d([(0,n.property)({type:String})],a.prototype,"success",2),d([(0,n.property)({type:Boolean})],a.prototype,"pending",2),d([(0,n.property)({type:String,attribute:"password-label"})],a.prototype,"passwordLabel",2),d([(0,n.property)({type:String,attribute:"confirm-password-label"})],a.prototype,"confirmPasswordLabel",2),d([(0,n.property)({type:String,attribute:"password-mismatch-message"})],a.prototype,"passwordMismatchMessage",2),d([(0,n.property)({type:String,attribute:"submit-label"})],a.prototype,"submitLabel",2),a=d([(0,w.customElement)("skdx-reset-password-page","reset-password-page","root")],a);function k(i,t){return i.querySelector(`[name="${t}"]`)}0&&(module.exports={SkdxResetPasswordPage});
70
+ `}};d([(0,n.property)({type:String})],i.prototype,"title",2),d([(0,n.property)({type:String})],i.prototype,"error",2),d([(0,n.property)({type:String})],i.prototype,"success",2),d([(0,n.property)({type:Boolean})],i.prototype,"pending",2),d([(0,n.property)({type:String,attribute:"password-label"})],i.prototype,"passwordLabel",2),d([(0,n.property)({type:String,attribute:"confirm-password-label"})],i.prototype,"confirmPasswordLabel",2),d([(0,n.property)({type:String,attribute:"password-mismatch-message"})],i.prototype,"passwordMismatchMessage",2),d([(0,n.property)({type:String,attribute:"submit-label"})],i.prototype,"submitLabel",2),i=d([(0,w.customElement)("skdx-reset-password-page","reset-password-page","root")],i);function k(a,t){return a.querySelector(`[name="${t}"]`)}0&&(module.exports={SkdxResetPasswordPage});
package/dist/reset-password-page/ResetPasswordPage.js CHANGED
@@ -1,4 +1,4 @@
1
- var h=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var r=(l,n,e,i)=>{for(var s=i>1?void 0:i?k(n,e):n,a=l.length-1,u;a>=0;a--)(u=l[a])&&(s=(i?u(n,e,s):u(s))||s);return i&&s&&h(n,e,s),s};import{html as o,LitElement as w,nothing as p}from"lit";import{property as d}from"lit/decorators.js";import{customElement as x}from"../internal/define.js";import{emit as b}from"../internal/events.js";import{hasUnslottedChild as f,placeSlotted as v}from"../internal/slots.js";import"@skdx/web-components/alert";import"@skdx/web-components/button";import"@skdx/web-components/field";import"@skdx/web-components/form";import"@skdx/web-components/heading";import"@skdx/web-components/password-input";var c="data-skdx-reset-password-page-generated",$="data-skdx-reset-password-page-content",m="confirmPassword",y=0,t=class extends w{constructor(){super(...arguments);this.title="Choose a new password";this.pending=!1;this.passwordLabel="New password";this.passwordMismatchMessage="Passwords do not match";this.submitLabel="Update password";this.titleId=`skdx-reset-password-page-title-${++y}`;this.handleSubmit=e=>{let i=e.target?.closest("skdx-form");if(!i)return;e.preventDefault();let s=g(i,"password")?.value??"",a=g(i,m);if(a&&a.value!==s){a.setCustomValidity(this.passwordMismatchMessage),a.reportValidity();return}b(this,"reset-password",{password:s})};this.clearMismatch=e=>{e.target.setCustomValidity("")}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),super.disconnectedCallback()}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-reset-password-page__${e}`)}get contentRegion(){return this.querySelector(`[${$}]`)}get hasContent(){return f(this,c)||(this.contentRegion?.hasChildNodes()??!1)}updated(){v(this,c,{requirements:this.region("requirements"),footer:this.region("footer")},this.contentRegion)}render(){return o`
1
+ var h=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var r=(l,n,e,a)=>{for(var s=a>1?void 0:a?k(n,e):n,i=l.length-1,u;i>=0;i--)(u=l[i])&&(s=(a?u(n,e,s):u(s))||s);return a&&s&&h(n,e,s),s};import{html as o,LitElement as w,nothing as p}from"lit";import{property as d}from"lit/decorators.js";import{customElement as x}from"../internal/define.js";import{emit as b}from"../internal/events.js";import{hasUnslottedChild as f,placeSlotted as v}from"../internal/slots.js";import"@skdx/web-components/alert";import"@skdx/web-components/button";import"@skdx/web-components/field";import"@skdx/web-components/form";import"@skdx/web-components/heading";import"@skdx/web-components/password-input";var c="data-skdx-reset-password-page-generated",$="data-skdx-reset-password-page-content",m="confirmPassword",y=0,t=class extends w{constructor(){super(...arguments);this.title="Choose a new password";this.pending=!1;this.passwordLabel="New password";this.passwordMismatchMessage="Passwords do not match";this.submitLabel="Update password";this.titleId=`skdx-reset-password-page-title-${++y}`;this.handleSubmit=e=>{let a=e.target?.closest("skdx-form");if(!a)return;e.preventDefault();let s=g(a,"password")?.value??"",i=g(a,m);if(i&&i.value!==s){i.setCustomValidity(this.passwordMismatchMessage),i.reportValidity();return}b(this,"reset-password",{password:s})};this.clearMismatch=e=>{e.target.setCustomValidity("")}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),super.disconnectedCallback()}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-reset-password-page__${e}`)}get contentRegion(){return this.querySelector(`[${$}]`)}get hasContent(){return f(this,c)||(this.contentRegion?.hasChildNodes()??!1)}updated(){v(this,c,{requirements:this.region("requirements"),footer:this.region("footer")},this.contentRegion)}render(){return o`
2
2
  <div
3
3
  class="skdx-reset-password-page__panel"
4
4
  data-skdx-reset-password-page-generated
@@ -11,6 +11,7 @@ var h=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var r=(l,n,e,i
11
11
  >
12
12
  ${this.error?o`<skdx-alert
13
13
  class="skdx-reset-password-page__error"
14
+ .role=${"alert"}
14
15
  .status=${"danger"}
15
16
  >${this.error}</skdx-alert
16
17
  >`:p}
package/dist/sign-in-page/SignInPage.cjs CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";var m=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var f=(s,r)=>{for(var e in r)m(s,e,{get:r[e],enumerable:!0})},_=(s,r,e,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of x(r))!h.call(s,t)&&t!==e&&m(s,t,{get:()=>r[t],enumerable:!(i=c(r,t))||i.enumerable});return s};var L=s=>_(m({},"__esModule",{value:!0}),s),l=(s,r,e,i)=>{for(var t=i>1?void 0:i?c(r,e):r,p=s.length-1,a;p>=0;p--)(a=s[p])&&(t=(i?a(r,e,t):a(t))||t);return i&&t&&m(r,e,t),t};var y={};f(y,{SkdxSignInPage:()=>d,defaultProviderLabel:()=>k});module.exports=L(y);var n=require("lit"),o=require("lit/decorators.js"),v=require("../internal/define.cjs"),g=require("../internal/events.cjs"),E=require("@skdx/web-components/alert"),S=require("@skdx/web-components/button"),I=require("@skdx/web-components/divider"),R=require("@skdx/web-components/field"),T=require("@skdx/web-components/form"),D=require("@skdx/web-components/heading"),q=require("@skdx/web-components/password-input"),M=require("@skdx/web-components/text-field");function k(s){return`Sign in with ${s.name}`}var u=new Set(["credentials","magic-link"]),$=0,d=class extends n.LitElement{constructor(){super(...arguments);this.title="Sign in";this.emailLabel="Email";this.passwordLabel="Password";this.submitLabel="Sign in";this.magicLinkLabel="Send magic link";this.titleId=`skdx-sign-in-page-title-${++$}`;this.handleSubmit=e=>{let i=e.target?.closest("skdx-form[data-provider]");if(!i)return;e.preventDefault();let t=i.getAttribute("data-provider")??"",p=b(i,"email");(0,g.emit)(this,"sign-in",t==="credentials"?{providerId:t,email:p,password:b(i,"password")}:{providerId:t,email:p})}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit)}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),super.disconnectedCallback()}signInWithProvider(e){(0,g.emit)(this,"sign-in",{providerId:e})}signInForm(e){let i=e.id==="credentials";return n.html`<skdx-form
1
+ "use strict";var m=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var f=(s,r)=>{for(var e in r)m(s,e,{get:r[e],enumerable:!0})},_=(s,r,e,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of x(r))!h.call(s,t)&&t!==e&&m(s,t,{get:()=>r[t],enumerable:!(i=c(r,t))||i.enumerable});return s};var $=s=>_(m({},"__esModule",{value:!0}),s),l=(s,r,e,i)=>{for(var t=i>1?void 0:i?c(r,e):r,p=s.length-1,a;p>=0;p--)(a=s[p])&&(t=(i?a(r,e,t):a(t))||t);return i&&t&&m(r,e,t),t};var y={};f(y,{SkdxSignInPage:()=>d,defaultProviderLabel:()=>k});module.exports=$(y);var n=require("lit"),o=require("lit/decorators.js"),v=require("../internal/define.cjs"),g=require("../internal/events.cjs"),E=require("@skdx/web-components/alert"),S=require("@skdx/web-components/button"),I=require("@skdx/web-components/divider"),R=require("@skdx/web-components/field"),T=require("@skdx/web-components/form"),D=require("@skdx/web-components/heading"),q=require("@skdx/web-components/password-input"),M=require("@skdx/web-components/text-field");function k(s){return`Sign in with ${s.name}`}var u=new Set(["credentials","magic-link"]),L=0,d=class extends n.LitElement{constructor(){super(...arguments);this.title="Sign in";this.emailLabel="Email";this.passwordLabel="Password";this.submitLabel="Sign in";this.magicLinkLabel="Send magic link";this.titleId=`skdx-sign-in-page-title-${++L}`;this.handleSubmit=e=>{let i=e.target?.closest("skdx-form[data-provider]");if(!i)return;e.preventDefault();let t=i.getAttribute("data-provider")??"",p=b(i,"email");(0,g.emit)(this,"sign-in",t==="credentials"?{providerId:t,email:p,password:b(i,"password")}:{providerId:t,email:p})}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit)}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),super.disconnectedCallback()}signInWithProvider(e){(0,g.emit)(this,"sign-in",{providerId:e})}signInForm(e){let i=e.id==="credentials";return n.html`<skdx-form
2
2
  class="skdx-sign-in-page__form"
3
3
  data-provider=${e.id}
4
4
  >
@@ -45,6 +45,7 @@
45
45
  >
46
46
  ${this.error?n.html`<skdx-alert
47
47
  class="skdx-sign-in-page__error"
48
+ .role=${"alert"}
48
49
  data-status="danger"
49
50
  >${this.error}</skdx-alert
50
51
  >`:n.nothing}
package/dist/sign-in-page/SignInPage.js CHANGED
@@ -45,6 +45,7 @@ var b=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var n=(l,o,t,e
45
45
  >
46
46
  ${this.error?p`<skdx-alert
47
47
  class="skdx-sign-in-page__error"
48
+ .role=${"alert"}
48
49
  data-status="danger"
49
50
  >${this.error}</skdx-alert
50
51
  >`:m}
package/dist/sign-up-page/SignUpPage.cjs CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";var u=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var y=(r,t)=>{for(var e in t)u(r,e,{get:t[e],enumerable:!0})},L=(r,t,e,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of _(t))!w.call(r,s)&&s!==e&&u(r,s,{get:()=>t[s],enumerable:!(a=x(t,s))||a.enumerable});return r};var $=r=>L(u({},"__esModule",{value:!0}),r),n=(r,t,e,a)=>{for(var s=a>1?void 0:a?x(t,e):t,o=r.length-1,p;o>=0;o--)(p=r[o])&&(s=(a?p(t,e,s):p(s))||s);return a&&s&&u(t,e,s),s};var C={};y(C,{SkdxSignUpPage:()=>d});module.exports=$(C);var i=require("lit"),l=require("lit/decorators.js"),h=require("../internal/define.cjs"),g=require("../internal/events.cjs"),m=require("../internal/slots.cjs"),f=require("../sign-in-page/index.cjs"),S=require("@skdx/web-components/alert"),H=require("@skdx/web-components/button"),V=require("@skdx/web-components/checkbox"),I=require("@skdx/web-components/divider"),R=require("@skdx/web-components/field"),A=require("@skdx/web-components/form"),D=require("@skdx/web-components/heading"),N=require("@skdx/web-components/password-input"),F=require("@skdx/web-components/text-field");var k="data-skdx-sign-up-page-generated",E="data-skdx-sign-up-page-content",b="confirmPassword",M=0,d=class extends i.LitElement{constructor(){super(...arguments);this.title="Create account";this.pending=!1;this.emailLabel="Email";this.passwordLabel="Password";this.passwordMismatchMessage="Passwords do not match";this.submitLabel="Create account";this.titleId=`skdx-sign-up-page-title-${++M}`;this.handleSubmit=e=>{let a=e.target?.closest("skdx-form");if(!a)return;e.preventDefault();let s=c(a,"password"),o=v(a,b);if(o&&o.value!==s){o.setCustomValidity(this.passwordMismatchMessage),o.reportValidity();return}let p={providerId:"credentials",email:c(a,"email"),password:s};this.nameLabel!==void 0&&(p.name=c(a,"name")),this.hasSlotted("terms")&&(p.termsAccepted=q(a)),(0,g.emit)(this,"sign-up",p)};this.clearMismatch=e=>{e.target.setCustomValidity("")}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),super.disconnectedCallback()}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-sign-up-page__${e}`)}get termsLabel(){return this.querySelector(".skdx-sign-up-page__terms skdx-field-label > span")}get contentRegion(){return this.querySelector(`[${E}]`)}get hasContent(){return(0,m.hasUnslottedChild)(this,k)||(this.contentRegion?.hasChildNodes()??!1)}updated(){(0,m.placeSlotted)(this,k,{terms:this.termsLabel,footer:this.region("footer")},this.contentRegion),this.querySelector(".skdx-sign-up-page__terms skdx-checkbox")?.requestUpdate()}signUpWithProvider(e){(0,g.emit)(this,"sign-up",{providerId:e})}render(){let e=this.providers??[],a=this.getProviderLabel??f.defaultProviderLabel;return i.html`
1
+ "use strict";var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var L=(a,t)=>{for(var e in t)u(a,e,{get:t[e],enumerable:!0})},_=(a,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of E(t))!y.call(a,i)&&i!==e&&u(a,i,{get:()=>t[i],enumerable:!(s=h(t,i))||s.enumerable});return a};var w=a=>_(u({},"__esModule",{value:!0}),a),n=(a,t,e,s)=>{for(var i=s>1?void 0:s?h(t,e):t,o=a.length-1,p;o>=0;o--)(p=a[o])&&(i=(s?p(t,e,i):p(i))||i);return s&&i&&u(t,e,i),i};var C={};L(C,{SkdxSignUpPage:()=>d});module.exports=w(C);var r=require("lit"),l=require("lit/decorators.js"),b=require("../internal/define.cjs"),g=require("../internal/events.cjs"),m=require("../internal/slots.cjs"),f=require("../sign-in-page/index.cjs"),I=require("@skdx/web-components/alert"),S=require("@skdx/web-components/button"),H=require("@skdx/web-components/checkbox"),V=require("@skdx/web-components/divider"),R=require("@skdx/web-components/field"),A=require("@skdx/web-components/form"),D=require("@skdx/web-components/heading"),N=require("@skdx/web-components/password-input"),F=require("@skdx/web-components/text-field");var x="data-skdx-sign-up-page-generated",$="data-skdx-sign-up-page-content",k="confirmPassword",M=0,d=class extends r.LitElement{constructor(){super(...arguments);this.title="Create account";this.pending=!1;this.emailLabel="Email";this.passwordLabel="Password";this.passwordMismatchMessage="Passwords do not match";this.submitLabel="Create account";this.titleId=`skdx-sign-up-page-title-${++M}`;this.handleSubmit=e=>{let s=e.target?.closest("skdx-form");if(!s)return;e.preventDefault();let i=c(s,"password"),o=v(s,k);if(o&&o.value!==i){o.setCustomValidity(this.passwordMismatchMessage),o.reportValidity();return}let p={providerId:"credentials",email:c(s,"email"),password:i};this.nameLabel!==void 0&&(p.name=c(s,"name")),this.hasSlotted("terms")&&(p.termsAccepted=q(s)),(0,g.emit)(this,"sign-up",p)};this.termsError="";this.reportInvalid=e=>{let s=e.target;s instanceof HTMLInputElement&&s.name==="terms"&&(this.termsError=s.validationMessage)};this.clearTermsError=()=>{this.termsError=""};this.clearMismatch=e=>{e.target.setCustomValidity("")}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit),this.addEventListener("invalid",this.reportInvalid,!0),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),this.removeEventListener("invalid",this.reportInvalid,!0),super.disconnectedCallback()}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-sign-up-page__${e}`)}get termsLabel(){return this.querySelector(".skdx-sign-up-page__terms skdx-field-label > span")}get contentRegion(){return this.querySelector(`[${$}]`)}get hasContent(){return(0,m.hasUnslottedChild)(this,x)||(this.contentRegion?.hasChildNodes()??!1)}updated(){(0,m.placeSlotted)(this,x,{terms:this.termsLabel,footer:this.region("footer")},this.contentRegion),this.querySelector(".skdx-sign-up-page__terms skdx-checkbox")?.requestUpdate()}signUpWithProvider(e){(0,g.emit)(this,"sign-up",{providerId:e})}render(){let e=this.providers??[],s=this.getProviderLabel??f.defaultProviderLabel;return r.html`
2
2
  <div
3
3
  class="skdx-sign-up-page__panel"
4
4
  data-skdx-sign-up-page-generated
@@ -9,24 +9,25 @@
9
9
  id=${this.titleId}
10
10
  >${this.title}</skdx-heading
11
11
  >
12
- ${this.error?i.html`<skdx-alert
12
+ ${this.error?r.html`<skdx-alert
13
13
  class="skdx-sign-up-page__error"
14
+ .role=${"alert"}
14
15
  .status=${"danger"}
15
16
  >${this.error}</skdx-alert
16
- >`:i.nothing}
17
- ${e.length?i.html`<div class="skdx-sign-up-page__providers">
18
- ${e.map(s=>i.html`<skdx-button
17
+ >`:r.nothing}
18
+ ${e.length?r.html`<div class="skdx-sign-up-page__providers">
19
+ ${e.map(i=>r.html`<skdx-button
19
20
  class="skdx-sign-up-page__provider"
20
21
  type="button"
21
- data-provider=${s.id}
22
- @click=${()=>this.signUpWithProvider(s.id)}
23
- >${a(s)}</skdx-button
22
+ data-provider=${i.id}
23
+ @click=${()=>this.signUpWithProvider(i.id)}
24
+ >${s(i)}</skdx-button
24
25
  >`)}
25
26
  </div>
26
- <skdx-divider class="skdx-sign-up-page__divider"></skdx-divider>`:i.nothing}
27
+ <skdx-divider class="skdx-sign-up-page__divider"></skdx-divider>`:r.nothing}
27
28
  <skdx-form class="skdx-sign-up-page__form">
28
29
  <form>
29
- ${this.nameLabel===void 0?i.nothing:i.html`<skdx-field
30
+ ${this.nameLabel===void 0?r.nothing:r.html`<skdx-field
30
31
  class="skdx-sign-up-page__field"
31
32
  label=${this.nameLabel}
32
33
  required
@@ -67,13 +68,13 @@
67
68
  <skdx-password-input-toggle></skdx-password-input-toggle>
68
69
  </skdx-password-input>
69
70
  </skdx-field>
70
- ${this.confirmPasswordLabel===void 0?i.nothing:i.html`<skdx-field
71
+ ${this.confirmPasswordLabel===void 0?r.nothing:r.html`<skdx-field
71
72
  class="skdx-sign-up-page__field"
72
73
  label=${this.confirmPasswordLabel}
73
74
  required
74
75
  >
75
76
  <skdx-password-input
76
- name=${b}
77
+ name=${k}
77
78
  required
78
79
  @value-change=${this.clearMismatch}
79
80
  >
@@ -83,14 +84,18 @@
83
84
  <skdx-password-input-toggle></skdx-password-input-toggle>
84
85
  </skdx-password-input>
85
86
  </skdx-field>`}
86
- ${this.hasContent?i.html`<div data-skdx-sign-up-page-content></div>`:i.nothing}
87
- ${this.hasSlotted("terms")?i.html`<skdx-field class="skdx-sign-up-page__terms">
87
+ ${this.hasContent?r.html`<div data-skdx-sign-up-page-content></div>`:r.nothing}
88
+ ${this.hasSlotted("terms")?r.html`<skdx-field
89
+ class="skdx-sign-up-page__terms"
90
+ .errors=${this.termsError}
91
+ >
88
92
  <skdx-checkbox
89
93
  name="terms"
90
94
  required
95
+ @checked-change=${this.clearTermsError}
91
96
  ></skdx-checkbox>
92
97
  <skdx-field-label><span></span></skdx-field-label>
93
- </skdx-field>`:i.nothing}
98
+ </skdx-field>`:r.nothing}
94
99
  <skdx-button
95
100
  class="skdx-sign-up-page__submit"
96
101
  type="submit"
@@ -100,6 +105,6 @@
100
105
  >
101
106
  </form>
102
107
  </skdx-form>
103
- ${this.hasSlotted("footer")?i.html`<div class="skdx-sign-up-page__footer"></div>`:i.nothing}
108
+ ${this.hasSlotted("footer")?r.html`<div class="skdx-sign-up-page__footer"></div>`:r.nothing}
104
109
  </div>
105
- `}};n([(0,l.property)({type:String})],d.prototype,"title",2),n([(0,l.property)({attribute:!1})],d.prototype,"providers",2),n([(0,l.property)({type:String})],d.prototype,"error",2),n([(0,l.property)({type:Boolean})],d.prototype,"pending",2),n([(0,l.property)({type:String,attribute:"name-label"})],d.prototype,"nameLabel",2),n([(0,l.property)({type:String,attribute:"email-label"})],d.prototype,"emailLabel",2),n([(0,l.property)({type:String,attribute:"password-label"})],d.prototype,"passwordLabel",2),n([(0,l.property)({type:String,attribute:"confirm-password-label"})],d.prototype,"confirmPasswordLabel",2),n([(0,l.property)({type:String,attribute:"password-mismatch-message"})],d.prototype,"passwordMismatchMessage",2),n([(0,l.property)({type:String,attribute:"submit-label"})],d.prototype,"submitLabel",2),n([(0,l.property)({attribute:!1})],d.prototype,"getProviderLabel",2),d=n([(0,h.customElement)("skdx-sign-up-page","sign-up-page","root")],d);function v(r,t){return r.querySelector(`[name="${t}"]`)}function c(r,t){return v(r,t)?.value??""}function q(r){return r.querySelector('[name="terms"]')?.checked===!0}0&&(module.exports={SkdxSignUpPage});
110
+ `}};n([(0,l.property)({type:String})],d.prototype,"title",2),n([(0,l.property)({attribute:!1})],d.prototype,"providers",2),n([(0,l.property)({type:String})],d.prototype,"error",2),n([(0,l.property)({type:Boolean})],d.prototype,"pending",2),n([(0,l.property)({type:String,attribute:"name-label"})],d.prototype,"nameLabel",2),n([(0,l.property)({type:String,attribute:"email-label"})],d.prototype,"emailLabel",2),n([(0,l.property)({type:String,attribute:"password-label"})],d.prototype,"passwordLabel",2),n([(0,l.property)({type:String,attribute:"confirm-password-label"})],d.prototype,"confirmPasswordLabel",2),n([(0,l.property)({type:String,attribute:"password-mismatch-message"})],d.prototype,"passwordMismatchMessage",2),n([(0,l.property)({type:String,attribute:"submit-label"})],d.prototype,"submitLabel",2),n([(0,l.property)({attribute:!1})],d.prototype,"getProviderLabel",2),n([(0,l.state)()],d.prototype,"termsError",2),d=n([(0,b.customElement)("skdx-sign-up-page","sign-up-page","root")],d);function v(a,t){return a.querySelector(`[name="${t}"]`)}function c(a,t){return v(a,t)?.value??""}function q(a){return a.querySelector('[name="terms"]')?.checked===!0}0&&(module.exports={SkdxSignUpPage});
package/dist/sign-up-page/SignUpPage.d.cts CHANGED
@@ -122,6 +122,9 @@ export declare class SkdxSignUpPage extends LitElement {
122
122
  private get hasContent();
123
123
  protected updated(): void;
124
124
  private readonly handleSubmit;
125
+ private termsError;
126
+ private readonly reportInvalid;
127
+ private readonly clearTermsError;
125
128
  private readonly clearMismatch;
126
129
  private signUpWithProvider;
127
130
  render(): TemplateResult;
package/dist/sign-up-page/SignUpPage.d.ts CHANGED
@@ -122,6 +122,9 @@ export declare class SkdxSignUpPage extends LitElement {
122
122
  private get hasContent();
123
123
  protected updated(): void;
124
124
  private readonly handleSubmit;
125
+ private termsError;
126
+ private readonly reportInvalid;
127
+ private readonly clearTermsError;
125
128
  private readonly clearMismatch;
126
129
  private signUpWithProvider;
127
130
  render(): TemplateResult;
package/dist/sign-up-page/SignUpPage.js CHANGED
@@ -1,4 +1,4 @@
1
- var b=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var r=(n,d,e,i)=>{for(var s=i>1?void 0:i?h(d,e):d,o=n.length-1,p;o>=0;o--)(p=n[o])&&(s=(i?p(d,e,s):p(s))||s);return i&&s&&b(d,e,s),s};import{html as l,LitElement as f,nothing as u}from"lit";import{property as a}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{emit as c}from"../internal/events.js";import{hasUnslottedChild as _,placeSlotted as w}from"../internal/slots.js";import{defaultProviderLabel as y}from"../sign-in-page/index.js";import"@skdx/web-components/alert";import"@skdx/web-components/button";import"@skdx/web-components/checkbox";import"@skdx/web-components/divider";import"@skdx/web-components/field";import"@skdx/web-components/form";import"@skdx/web-components/heading";import"@skdx/web-components/password-input";import"@skdx/web-components/text-field";var g="data-skdx-sign-up-page-generated",L="data-skdx-sign-up-page-content",x="confirmPassword",$=0,t=class extends f{constructor(){super(...arguments);this.title="Create account";this.pending=!1;this.emailLabel="Email";this.passwordLabel="Password";this.passwordMismatchMessage="Passwords do not match";this.submitLabel="Create account";this.titleId=`skdx-sign-up-page-title-${++$}`;this.handleSubmit=e=>{let i=e.target?.closest("skdx-form");if(!i)return;e.preventDefault();let s=m(i,"password"),o=k(i,x);if(o&&o.value!==s){o.setCustomValidity(this.passwordMismatchMessage),o.reportValidity();return}let p={providerId:"credentials",email:m(i,"email"),password:s};this.nameLabel!==void 0&&(p.name=m(i,"name")),this.hasSlotted("terms")&&(p.termsAccepted=E(i)),c(this,"sign-up",p)};this.clearMismatch=e=>{e.target.setCustomValidity("")}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),super.disconnectedCallback()}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-sign-up-page__${e}`)}get termsLabel(){return this.querySelector(".skdx-sign-up-page__terms skdx-field-label > span")}get contentRegion(){return this.querySelector(`[${L}]`)}get hasContent(){return _(this,g)||(this.contentRegion?.hasChildNodes()??!1)}updated(){w(this,g,{terms:this.termsLabel,footer:this.region("footer")},this.contentRegion),this.querySelector(".skdx-sign-up-page__terms skdx-checkbox")?.requestUpdate()}signUpWithProvider(e){c(this,"sign-up",{providerId:e})}render(){let e=this.providers??[],i=this.getProviderLabel??y;return l`
1
+ var k=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var r=(n,d,e,t)=>{for(var i=t>1?void 0:t?b(d,e):d,o=n.length-1,p;o>=0;o--)(p=n[o])&&(i=(t?p(d,e,i):p(i))||i);return t&&i&&k(d,e,i),i};import{html as l,LitElement as f,nothing as u}from"lit";import{property as a,state as v}from"lit/decorators.js";import{customElement as E}from"../internal/define.js";import{emit as c}from"../internal/events.js";import{hasUnslottedChild as y,placeSlotted as L}from"../internal/slots.js";import{defaultProviderLabel as _}from"../sign-in-page/index.js";import"@skdx/web-components/alert";import"@skdx/web-components/button";import"@skdx/web-components/checkbox";import"@skdx/web-components/divider";import"@skdx/web-components/field";import"@skdx/web-components/form";import"@skdx/web-components/heading";import"@skdx/web-components/password-input";import"@skdx/web-components/text-field";var g="data-skdx-sign-up-page-generated",w="data-skdx-sign-up-page-content",h="confirmPassword",$=0,s=class extends f{constructor(){super(...arguments);this.title="Create account";this.pending=!1;this.emailLabel="Email";this.passwordLabel="Password";this.passwordMismatchMessage="Passwords do not match";this.submitLabel="Create account";this.titleId=`skdx-sign-up-page-title-${++$}`;this.handleSubmit=e=>{let t=e.target?.closest("skdx-form");if(!t)return;e.preventDefault();let i=m(t,"password"),o=x(t,h);if(o&&o.value!==i){o.setCustomValidity(this.passwordMismatchMessage),o.reportValidity();return}let p={providerId:"credentials",email:m(t,"email"),password:i};this.nameLabel!==void 0&&(p.name=m(t,"name")),this.hasSlotted("terms")&&(p.termsAccepted=M(t)),c(this,"sign-up",p)};this.termsError="";this.reportInvalid=e=>{let t=e.target;t instanceof HTMLInputElement&&t.name==="terms"&&(this.termsError=t.validationMessage)};this.clearTermsError=()=>{this.termsError=""};this.clearMismatch=e=>{e.target.setCustomValidity("")}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit),this.addEventListener("invalid",this.reportInvalid,!0),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),this.removeEventListener("invalid",this.reportInvalid,!0),super.disconnectedCallback()}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-sign-up-page__${e}`)}get termsLabel(){return this.querySelector(".skdx-sign-up-page__terms skdx-field-label > span")}get contentRegion(){return this.querySelector(`[${w}]`)}get hasContent(){return y(this,g)||(this.contentRegion?.hasChildNodes()??!1)}updated(){L(this,g,{terms:this.termsLabel,footer:this.region("footer")},this.contentRegion),this.querySelector(".skdx-sign-up-page__terms skdx-checkbox")?.requestUpdate()}signUpWithProvider(e){c(this,"sign-up",{providerId:e})}render(){let e=this.providers??[],t=this.getProviderLabel??_;return l`
2
2
  <div
3
3
  class="skdx-sign-up-page__panel"
4
4
  data-skdx-sign-up-page-generated
@@ -11,16 +11,17 @@ var b=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var r=(n,d,e,i
11
11
  >
12
12
  ${this.error?l`<skdx-alert
13
13
  class="skdx-sign-up-page__error"
14
+ .role=${"alert"}
14
15
  .status=${"danger"}
15
16
  >${this.error}</skdx-alert
16
17
  >`:u}
17
18
  ${e.length?l`<div class="skdx-sign-up-page__providers">
18
- ${e.map(s=>l`<skdx-button
19
+ ${e.map(i=>l`<skdx-button
19
20
  class="skdx-sign-up-page__provider"
20
21
  type="button"
21
- data-provider=${s.id}
22
- @click=${()=>this.signUpWithProvider(s.id)}
23
- >${i(s)}</skdx-button
22
+ data-provider=${i.id}
23
+ @click=${()=>this.signUpWithProvider(i.id)}
24
+ >${t(i)}</skdx-button
24
25
  >`)}
25
26
  </div>
26
27
  <skdx-divider class="skdx-sign-up-page__divider"></skdx-divider>`:u}
@@ -73,7 +74,7 @@ var b=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var r=(n,d,e,i
73
74
  required
74
75
  >
75
76
  <skdx-password-input
76
- name=${x}
77
+ name=${h}
77
78
  required
78
79
  @value-change=${this.clearMismatch}
79
80
  >
@@ -84,10 +85,14 @@ var b=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var r=(n,d,e,i
84
85
  </skdx-password-input>
85
86
  </skdx-field>`}
86
87
  ${this.hasContent?l`<div data-skdx-sign-up-page-content></div>`:u}
87
- ${this.hasSlotted("terms")?l`<skdx-field class="skdx-sign-up-page__terms">
88
+ ${this.hasSlotted("terms")?l`<skdx-field
89
+ class="skdx-sign-up-page__terms"
90
+ .errors=${this.termsError}
91
+ >
88
92
  <skdx-checkbox
89
93
  name="terms"
90
94
  required
95
+ @checked-change=${this.clearTermsError}
91
96
  ></skdx-checkbox>
92
97
  <skdx-field-label><span></span></skdx-field-label>
93
98
  </skdx-field>`:u}
@@ -102,4 +107,4 @@ var b=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var r=(n,d,e,i
102
107
  </skdx-form>
103
108
  ${this.hasSlotted("footer")?l`<div class="skdx-sign-up-page__footer"></div>`:u}
104
109
  </div>
105
- `}};r([a({type:String})],t.prototype,"title",2),r([a({attribute:!1})],t.prototype,"providers",2),r([a({type:String})],t.prototype,"error",2),r([a({type:Boolean})],t.prototype,"pending",2),r([a({type:String,attribute:"name-label"})],t.prototype,"nameLabel",2),r([a({type:String,attribute:"email-label"})],t.prototype,"emailLabel",2),r([a({type:String,attribute:"password-label"})],t.prototype,"passwordLabel",2),r([a({type:String,attribute:"confirm-password-label"})],t.prototype,"confirmPasswordLabel",2),r([a({type:String,attribute:"password-mismatch-message"})],t.prototype,"passwordMismatchMessage",2),r([a({type:String,attribute:"submit-label"})],t.prototype,"submitLabel",2),r([a({attribute:!1})],t.prototype,"getProviderLabel",2),t=r([v("skdx-sign-up-page","sign-up-page","root")],t);function k(n,d){return n.querySelector(`[name="${d}"]`)}function m(n,d){return k(n,d)?.value??""}function E(n){return n.querySelector('[name="terms"]')?.checked===!0}export{t as SkdxSignUpPage};
110
+ `}};r([a({type:String})],s.prototype,"title",2),r([a({attribute:!1})],s.prototype,"providers",2),r([a({type:String})],s.prototype,"error",2),r([a({type:Boolean})],s.prototype,"pending",2),r([a({type:String,attribute:"name-label"})],s.prototype,"nameLabel",2),r([a({type:String,attribute:"email-label"})],s.prototype,"emailLabel",2),r([a({type:String,attribute:"password-label"})],s.prototype,"passwordLabel",2),r([a({type:String,attribute:"confirm-password-label"})],s.prototype,"confirmPasswordLabel",2),r([a({type:String,attribute:"password-mismatch-message"})],s.prototype,"passwordMismatchMessage",2),r([a({type:String,attribute:"submit-label"})],s.prototype,"submitLabel",2),r([a({attribute:!1})],s.prototype,"getProviderLabel",2),r([v()],s.prototype,"termsError",2),s=r([E("skdx-sign-up-page","sign-up-page","root")],s);function x(n,d){return n.querySelector(`[name="${d}"]`)}function m(n,d){return x(n,d)?.value??""}function M(n){return n.querySelector('[name="terms"]')?.checked===!0}export{s as SkdxSignUpPage};
package/dist/usage-card/UsageCard.cjs CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";var m=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var $=(r,t)=>{for(var e in t)m(r,e,{get:t[e],enumerable:!0})},_=(r,t,e,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of v(t))!x.call(r,i)&&i!==e&&m(r,i,{get:()=>t[i],enumerable:!(n=c(t,i))||n.enumerable});return r};var k=r=>_(m({},"__esModule",{value:!0}),r),d=(r,t,e,n)=>{for(var i=n>1?void 0:n?c(t,e):t,u=r.length-1,o;u>=0;u--)(o=r[u])&&(i=(n?o(t,e,i):o(i))||i);return n&&i&&m(t,e,i),i};var T={};$(T,{SkdxUsageCard:()=>a});module.exports=k(T);var s=require("lit"),l=require("lit/decorators.js"),h=require("../internal/define.cjs"),f=require("../internal/slots.cjs"),g=require("./usage.cjs"),R=require("@skdx/web-components/progress"),A=require("@skdx/web-components/text");var y="data-skdx-usage-card-generated",L=0;function p(r,t,e){e===void 0?r.removeAttribute(t):r.setAttribute(t,e)}var a=class extends s.LitElement{constructor(){super(...arguments);this.unlimitedLabel="Unlimited";this.labelId=`skdx-usage-card-label-${++L}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","group"),this.setAttribute("aria-labelledby",this.labelId),queueMicrotask(()=>this.requestUpdate())}region(e){return this.querySelector(`.skdx-usage-card__${e}`)}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}get format(){return this.formatValue??String}get reading(){if(this.limit===null)return{limitText:this.unlimitedLabel,overLimit:!1,range:null};if(this.limit===void 0)return{limitText:void 0,overLimit:!1,range:null};let e=(0,g.usageMeter)(this.used??0,this.limit);return{limitText:`/ ${this.format(e.limit)}`,overLimit:e.overLimit,range:e.range}}updated(){p(this,"data-state",this.reading.overLimit?"over-limit":void 0),p(this,"data-status",this.status),(0,f.placeSlotted)(this,y,{actions:this.region("actions"),footer:this.region("footer")},null)}render(){let{limitText:e,range:n}=this.reading,i=this.format,u=this.unit?` ${this.unit}`:"";return s.html`
1
+ "use strict";var m=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var $=(r,t)=>{for(var e in t)m(r,e,{get:t[e],enumerable:!0})},_=(r,t,e,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of v(t))!x.call(r,i)&&i!==e&&m(r,i,{get:()=>t[i],enumerable:!(n=c(t,i))||n.enumerable});return r};var k=r=>_(m({},"__esModule",{value:!0}),r),d=(r,t,e,n)=>{for(var i=n>1?void 0:n?c(t,e):t,u=r.length-1,o;u>=0;u--)(o=r[u])&&(i=(n?o(t,e,i):o(i))||i);return n&&i&&m(t,e,i),i};var T={};$(T,{SkdxUsageCard:()=>a});module.exports=k(T);var s=require("lit"),l=require("lit/decorators.js"),f=require("../internal/define.cjs"),h=require("../internal/slots.cjs"),g=require("./usage.cjs"),A=require("@skdx/web-components/progress"),H=require("@skdx/web-components/text");var y="data-skdx-usage-card-generated",L=0;function p(r,t,e){e===void 0?r.removeAttribute(t):r.setAttribute(t,e)}var a=class extends s.LitElement{constructor(){super(...arguments);this.unlimitedLabel="Unlimited";this.labelId=`skdx-usage-card-label-${++L}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","group"),this.setAttribute("aria-labelledby",this.labelId),queueMicrotask(()=>this.requestUpdate())}region(e){return this.querySelector(`.skdx-usage-card__${e}`)}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}get format(){return this.formatValue??String}get reading(){if(this.limit===null)return{limitText:this.unlimitedLabel,overLimit:!1,range:null};if(this.limit===void 0)return{limitText:void 0,overLimit:!1,range:null};let e=(0,g.usageMeter)(this.used??0,this.limit);return{limitText:`/ ${this.format(e.limit)}`,overLimit:e.overLimit,range:e.range}}updated(){p(this,"data-state",this.reading.overLimit?"over-limit":void 0),p(this,"data-status",this.status),(0,h.placeSlotted)(this,y,{actions:this.region("actions"),footer:this.region("footer")},null)}render(){let{limitText:e,range:n}=this.reading,i=this.format,u=(0,g.normalizeUsage)(this.used??0),o=this.unit?` ${this.unit}`:"";return s.html`
2
2
  <div
3
3
  class="skdx-usage-card__header"
4
4
  data-skdx-usage-card-generated
@@ -14,7 +14,7 @@
14
14
  class="skdx-usage-card__value"
15
15
  data-skdx-usage-card-generated
16
16
  >
17
- <span class="skdx-usage-card__used">${i((0,g.normalizeUsage)(this.used??0))}</span>
17
+ <span class="skdx-usage-card__used">${i(u)}</span>
18
18
  ${e===void 0?s.nothing:s.html`<span class="skdx-usage-card__limit">${e}</span>`}
19
19
  ${this.unit?s.html`<span class="skdx-usage-card__unit">${this.unit}</span>`:s.nothing}
20
20
  </div>
@@ -25,7 +25,7 @@
25
25
  .max=${n.max}
26
26
  .value=${n.value}
27
27
  aria-labelledby=${this.labelId}
28
- .getValueLabel=${(o,E,b)=>`${i(o)} / ${i(b)}${u}`}
28
+ .getValueLabel=${(E,M,b)=>`${i(u)} / ${i(b)}${o}`}
29
29
  data-skdx-usage-card-generated
30
30
  ></skdx-progress>`:s.nothing}
31
31
  ${this.description?s.html`<skdx-text
@@ -39,4 +39,4 @@
39
39
  class="skdx-usage-card__footer"
40
40
  data-skdx-usage-card-generated
41
41
  ></div>`:s.nothing}
42
- `}};d([(0,l.property)({type:String})],a.prototype,"label",2),d([(0,l.property)({type:Number})],a.prototype,"used",2),d([(0,l.property)({type:Number})],a.prototype,"limit",2),d([(0,l.property)({type:String})],a.prototype,"unit",2),d([(0,l.property)({attribute:!1})],a.prototype,"formatValue",2),d([(0,l.property)({type:String,attribute:"unlimited-label"})],a.prototype,"unlimitedLabel",2),d([(0,l.property)({type:String})],a.prototype,"description",2),d([(0,l.property)({type:String})],a.prototype,"status",2),a=d([(0,h.customElement)("skdx-usage-card","usage-card","root")],a);0&&(module.exports={SkdxUsageCard});
42
+ `}};d([(0,l.property)({type:String})],a.prototype,"label",2),d([(0,l.property)({type:Number})],a.prototype,"used",2),d([(0,l.property)({type:Number})],a.prototype,"limit",2),d([(0,l.property)({type:String})],a.prototype,"unit",2),d([(0,l.property)({attribute:!1})],a.prototype,"formatValue",2),d([(0,l.property)({type:String,attribute:"unlimited-label"})],a.prototype,"unlimitedLabel",2),d([(0,l.property)({type:String})],a.prototype,"description",2),d([(0,l.property)({type:String})],a.prototype,"status",2),a=d([(0,f.customElement)("skdx-usage-card","usage-card","root")],a);0&&(module.exports={SkdxUsageCard});
package/dist/usage-card/UsageCard.js CHANGED
@@ -1,4 +1,4 @@
1
- var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var s=(l,r,e,a)=>{for(var i=a>1?void 0:a?h(r,e):r,o=l.length-1,m;o>=0;o--)(m=l[o])&&(i=(a?m(r,e,i):m(i))||i);return a&&i&&p(r,e,i),i};import{html as d,LitElement as f,nothing as u}from"lit";import{property as n}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{placeSlotted as v}from"../internal/slots.js";import{normalizeUsage as x,usageMeter as $}from"./usage.js";import"@skdx/web-components/progress";import"@skdx/web-components/text";var _="data-skdx-usage-card-generated",k=0;function g(l,r,e){e===void 0?l.removeAttribute(r):l.setAttribute(r,e)}var t=class extends f{constructor(){super(...arguments);this.unlimitedLabel="Unlimited";this.labelId=`skdx-usage-card-label-${++k}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","group"),this.setAttribute("aria-labelledby",this.labelId),queueMicrotask(()=>this.requestUpdate())}region(e){return this.querySelector(`.skdx-usage-card__${e}`)}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}get format(){return this.formatValue??String}get reading(){if(this.limit===null)return{limitText:this.unlimitedLabel,overLimit:!1,range:null};if(this.limit===void 0)return{limitText:void 0,overLimit:!1,range:null};let e=$(this.used??0,this.limit);return{limitText:`/ ${this.format(e.limit)}`,overLimit:e.overLimit,range:e.range}}updated(){g(this,"data-state",this.reading.overLimit?"over-limit":void 0),g(this,"data-status",this.status),v(this,_,{actions:this.region("actions"),footer:this.region("footer")},null)}render(){let{limitText:e,range:a}=this.reading,i=this.format,o=this.unit?` ${this.unit}`:"";return d`
1
+ var p=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var s=(l,r,e,a)=>{for(var i=a>1?void 0:a?f(r,e):r,u=l.length-1,m;u>=0;u--)(m=l[u])&&(i=(a?m(r,e,i):m(i))||i);return a&&i&&p(r,e,i),i};import{html as d,LitElement as h,nothing as o}from"lit";import{property as n}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{placeSlotted as v}from"../internal/slots.js";import{normalizeUsage as x,usageMeter as $}from"./usage.js";import"@skdx/web-components/progress";import"@skdx/web-components/text";var _="data-skdx-usage-card-generated",k=0;function g(l,r,e){e===void 0?l.removeAttribute(r):l.setAttribute(r,e)}var t=class extends h{constructor(){super(...arguments);this.unlimitedLabel="Unlimited";this.labelId=`skdx-usage-card-label-${++k}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","group"),this.setAttribute("aria-labelledby",this.labelId),queueMicrotask(()=>this.requestUpdate())}region(e){return this.querySelector(`.skdx-usage-card__${e}`)}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}get format(){return this.formatValue??String}get reading(){if(this.limit===null)return{limitText:this.unlimitedLabel,overLimit:!1,range:null};if(this.limit===void 0)return{limitText:void 0,overLimit:!1,range:null};let e=$(this.used??0,this.limit);return{limitText:`/ ${this.format(e.limit)}`,overLimit:e.overLimit,range:e.range}}updated(){g(this,"data-state",this.reading.overLimit?"over-limit":void 0),g(this,"data-status",this.status),v(this,_,{actions:this.region("actions"),footer:this.region("footer")},null)}render(){let{limitText:e,range:a}=this.reading,i=this.format,u=x(this.used??0),m=this.unit?` ${this.unit}`:"";return d`
2
2
  <div
3
3
  class="skdx-usage-card__header"
4
4
  data-skdx-usage-card-generated
@@ -8,15 +8,15 @@ var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var s=(l,r,e,a
8
8
  id=${this.labelId}
9
9
  >${this.label??""}</span
10
10
  >
11
- ${this.hasSlotted("actions")?d`<div class="skdx-usage-card__actions"></div>`:u}
11
+ ${this.hasSlotted("actions")?d`<div class="skdx-usage-card__actions"></div>`:o}
12
12
  </div>
13
13
  <div
14
14
  class="skdx-usage-card__value"
15
15
  data-skdx-usage-card-generated
16
16
  >
17
- <span class="skdx-usage-card__used">${i(x(this.used??0))}</span>
18
- ${e===void 0?u:d`<span class="skdx-usage-card__limit">${e}</span>`}
19
- ${this.unit?d`<span class="skdx-usage-card__unit">${this.unit}</span>`:u}
17
+ <span class="skdx-usage-card__used">${i(u)}</span>
18
+ ${e===void 0?o:d`<span class="skdx-usage-card__limit">${e}</span>`}
19
+ ${this.unit?d`<span class="skdx-usage-card__unit">${this.unit}</span>`:o}
20
20
  </div>
21
21
  ${a?d`<skdx-progress
22
22
  class="skdx-usage-card__progress"
@@ -25,18 +25,18 @@ var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var s=(l,r,e,a
25
25
  .max=${a.max}
26
26
  .value=${a.value}
27
27
  aria-labelledby=${this.labelId}
28
- .getValueLabel=${(m,y,c)=>`${i(m)} / ${i(c)}${o}`}
28
+ .getValueLabel=${(y,L,c)=>`${i(u)} / ${i(c)}${m}`}
29
29
  data-skdx-usage-card-generated
30
- ></skdx-progress>`:u}
30
+ ></skdx-progress>`:o}
31
31
  ${this.description?d`<skdx-text
32
32
  class="skdx-usage-card__description"
33
33
  as="p"
34
34
  .tone=${"muted"}
35
35
  data-skdx-usage-card-generated
36
36
  >${this.description}</skdx-text
37
- >`:u}
37
+ >`:o}
38
38
  ${this.hasSlotted("footer")?d`<div
39
39
  class="skdx-usage-card__footer"
40
40
  data-skdx-usage-card-generated
41
- ></div>`:u}
41
+ ></div>`:o}
42
42
  `}};s([n({type:String})],t.prototype,"label",2),s([n({type:Number})],t.prototype,"used",2),s([n({type:Number})],t.prototype,"limit",2),s([n({type:String})],t.prototype,"unit",2),s([n({attribute:!1})],t.prototype,"formatValue",2),s([n({type:String,attribute:"unlimited-label"})],t.prototype,"unlimitedLabel",2),s([n({type:String})],t.prototype,"description",2),s([n({type:String})],t.prototype,"status",2),t=s([b("skdx-usage-card","usage-card","root")],t);export{t as SkdxUsageCard};
package/dist/verification-page/VerificationPage.cjs CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var f=(d,s)=>{for(var e in s)l(d,e,{get:s[e],enumerable:!0})},L=(d,s,e,r)=>{if(s&&typeof s=="object"||typeof s=="function")for(let t of b(s))!E.call(d,t)&&t!==e&&l(d,t,{get:()=>s[t],enumerable:!(r=h(s,t))||r.enumerable});return d};var k=d=>L(l({},"__esModule",{value:!0}),d),a=(d,s,e,r)=>{for(var t=r>1?void 0:r?h(s,e):s,u=d.length-1,c;u>=0;u--)(c=d[u])&&(t=(r?c(s,e,t):c(t))||t);return r&&t&&l(s,e,t),t};var _={};f(_,{SkdxVerificationPage:()=>i});module.exports=k(_);var n=require("lit"),o=require("lit/decorators.js"),m=require("../internal/define.cjs"),p=require("../internal/events.cjs"),v=require("../internal/slots.cjs"),T=require("@skdx/web-components/alert"),H=require("@skdx/web-components/button"),C=require("@skdx/web-components/field"),O=require("@skdx/web-components/form"),V=require("@skdx/web-components/heading"),D=require("@skdx/web-components/pin-input"),S=require("@skdx/web-components/text");var g="data-skdx-verification-page-generated",x="data-skdx-verification-page-content",y=["resend"],$=0,i=class extends n.LitElement{constructor(){super(...arguments);this.title="Enter your verification code";this.pending=!1;this.codeLabel="Verification code";this.length=6;this.defaultValue="";this.submitLabel="Verify";this.resendLabel="Resend code";this.resendDisabled=!1;this.titleId=`skdx-verification-page-title-${++$}`;this.gated=new Map;this.handleValueChange=e=>{e.stopPropagation(),this.setValue(e.detail,"keyboard")};this.handleSubmit=e=>{e.target?.closest("skdx-form")&&(e.preventDefault(),(0,p.emit)(this,"verify",{code:this.currentValue}))};this.resend=()=>{(0,p.emit)(this,"resend")}}createRenderRoot(){return this}addEventListener(e,r,t){super.addEventListener(e,r,t),this.countListener(e,1)}removeEventListener(e,r,t){super.removeEventListener(e,r,t),this.countListener(e,-1)}countListener(e,r){y.includes(e)&&(this.gated.set(e,Math.max(0,(this.gated.get(e)??0)+r)),this.requestUpdate())}handles(e){return(this.gated.get(e)??0)>0}get currentValue(){return this.value??this.uncontrolledValue??this.defaultValue}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),super.disconnectedCallback()}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-verification-page__${e}`)}get contentRegion(){return this.querySelector(`[${x}]`)}get hasContent(){return(0,v.hasUnslottedChild)(this,g)||(this.contentRegion?.hasChildNodes()??!1)}updated(){let e=this.querySelector(".skdx-verification-page__code");e&&(e.value=this.currentValue),(0,v.placeSlotted)(this,g,{footer:this.region("footer")},this.contentRegion)}setValue(e,r){let t=this.currentValue;this.uncontrolledValue=e,this.requestUpdate(),(0,p.emit)(this,"value-change",{value:e,previousValue:t,reason:r})}render(){return n.html`
1
+ "use strict";var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var f=(d,s)=>{for(var e in s)l(d,e,{get:s[e],enumerable:!0})},L=(d,s,e,t)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of b(s))!E.call(d,i)&&i!==e&&l(d,i,{get:()=>s[i],enumerable:!(t=h(s,i))||t.enumerable});return d};var k=d=>L(l({},"__esModule",{value:!0}),d),a=(d,s,e,t)=>{for(var i=t>1?void 0:t?h(s,e):s,u=d.length-1,c;u>=0;u--)(c=d[u])&&(i=(t?c(s,e,i):c(i))||i);return t&&i&&l(s,e,i),i};var _={};f(_,{SkdxVerificationPage:()=>r});module.exports=k(_);var n=require("lit"),o=require("lit/decorators.js"),m=require("../internal/define.cjs"),v=require("../internal/events.cjs"),p=require("../internal/slots.cjs"),T=require("@skdx/web-components/alert"),H=require("@skdx/web-components/button"),C=require("@skdx/web-components/field"),O=require("@skdx/web-components/form"),V=require("@skdx/web-components/heading"),D=require("@skdx/web-components/pin-input"),S=require("@skdx/web-components/text");var g="data-skdx-verification-page-generated",x="data-skdx-verification-page-content",y=["resend"],$=0,r=class extends n.LitElement{constructor(){super(...arguments);this.title="Enter your verification code";this.pending=!1;this.codeLabel="Verification code";this.length=6;this.defaultValue="";this.submitLabel="Verify";this.resendLabel="Resend code";this.resendDisabled=!1;this.titleId=`skdx-verification-page-title-${++$}`;this.gated=new Map;this.codeError="";this.reportInvalid=e=>{let t=e.target;t instanceof HTMLInputElement&&t.name==="code"&&(this.codeError=t.validationMessage)};this.handleValueChange=e=>{e.stopPropagation(),this.codeError="",this.setValue(e.detail,"keyboard")};this.handleSubmit=e=>{e.target?.closest("skdx-form")&&(e.preventDefault(),(0,v.emit)(this,"verify",{code:this.currentValue}))};this.resend=()=>{(0,v.emit)(this,"resend")}}createRenderRoot(){return this}addEventListener(e,t,i){super.addEventListener(e,t,i),this.countListener(e,1)}removeEventListener(e,t,i){super.removeEventListener(e,t,i),this.countListener(e,-1)}countListener(e,t){y.includes(e)&&(this.gated.set(e,Math.max(0,(this.gated.get(e)??0)+t)),this.requestUpdate())}handles(e){return(this.gated.get(e)??0)>0}get currentValue(){return this.value??this.uncontrolledValue??this.defaultValue}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit),this.addEventListener("invalid",this.reportInvalid,!0),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),this.removeEventListener("invalid",this.reportInvalid,!0),super.disconnectedCallback()}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-verification-page__${e}`)}get contentRegion(){return this.querySelector(`[${x}]`)}get hasContent(){return(0,p.hasUnslottedChild)(this,g)||(this.contentRegion?.hasChildNodes()??!1)}updated(){let e=this.querySelector(".skdx-verification-page__code");e&&(e.value=this.currentValue),(0,p.placeSlotted)(this,g,{footer:this.region("footer")},this.contentRegion)}setValue(e,t){let i=this.currentValue;this.uncontrolledValue=e,this.requestUpdate(),(0,v.emit)(this,"value-change",{value:e,previousValue:i,reason:t})}render(){return n.html`
2
2
  <div
3
3
  class="skdx-verification-page__panel"
4
4
  data-skdx-verification-page-generated
@@ -11,6 +11,7 @@
11
11
  >
12
12
  ${this.error?n.html`<skdx-alert
13
13
  class="skdx-verification-page__error"
14
+ .role=${"alert"}
14
15
  .status=${"danger"}
15
16
  >${this.error}</skdx-alert
16
17
  >`:n.nothing}
@@ -22,7 +23,10 @@
22
23
  >`:n.nothing}
23
24
  <skdx-form class="skdx-verification-page__form">
24
25
  <form>
25
- <skdx-fieldset class="skdx-verification-page__field">
26
+ <skdx-fieldset
27
+ class="skdx-verification-page__field"
28
+ .errors=${this.codeError}
29
+ >
26
30
  <skdx-field-label>${this.codeLabel}</skdx-field-label>
27
31
  <skdx-pin-input
28
32
  class="skdx-verification-page__code"
@@ -33,6 +37,7 @@
33
37
  .value=${this.currentValue}
34
38
  @value-change=${this.handleValueChange}
35
39
  ></skdx-pin-input>
40
+ <skdx-field-error></skdx-field-error>
36
41
  </skdx-fieldset>
37
42
  ${this.hasContent?n.html`<div data-skdx-verification-page-content></div>`:n.nothing}
38
43
  <skdx-button
@@ -58,4 +63,4 @@
58
63
  </div>`:n.nothing}
59
64
  ${this.hasSlotted("footer")?n.html`<div class="skdx-verification-page__footer"></div>`:n.nothing}
60
65
  </div>
61
- `}};a([(0,o.property)({type:String})],i.prototype,"title",2),a([(0,o.property)({type:String})],i.prototype,"description",2),a([(0,o.property)({type:String})],i.prototype,"error",2),a([(0,o.property)({type:Boolean})],i.prototype,"pending",2),a([(0,o.property)({type:String,attribute:"code-label"})],i.prototype,"codeLabel",2),a([(0,o.property)({type:Number})],i.prototype,"length",2),a([(0,o.property)({type:String})],i.prototype,"value",2),a([(0,o.property)({type:String,attribute:"default-value"})],i.prototype,"defaultValue",2),a([(0,o.property)({type:String,attribute:"submit-label"})],i.prototype,"submitLabel",2),a([(0,o.property)({type:String,attribute:"resend-label"})],i.prototype,"resendLabel",2),a([(0,o.property)({type:Boolean,attribute:"resend-disabled"})],i.prototype,"resendDisabled",2),a([(0,o.property)({type:String,attribute:"resend-hint"})],i.prototype,"resendHint",2),i=a([(0,m.customElement)("skdx-verification-page","verification-page","root")],i);0&&(module.exports={SkdxVerificationPage});
66
+ `}};a([(0,o.property)({type:String})],r.prototype,"title",2),a([(0,o.property)({type:String})],r.prototype,"description",2),a([(0,o.property)({type:String})],r.prototype,"error",2),a([(0,o.property)({type:Boolean})],r.prototype,"pending",2),a([(0,o.property)({type:String,attribute:"code-label"})],r.prototype,"codeLabel",2),a([(0,o.property)({type:Number})],r.prototype,"length",2),a([(0,o.property)({type:String})],r.prototype,"value",2),a([(0,o.property)({type:String,attribute:"default-value"})],r.prototype,"defaultValue",2),a([(0,o.property)({type:String,attribute:"submit-label"})],r.prototype,"submitLabel",2),a([(0,o.property)({type:String,attribute:"resend-label"})],r.prototype,"resendLabel",2),a([(0,o.property)({type:Boolean,attribute:"resend-disabled"})],r.prototype,"resendDisabled",2),a([(0,o.property)({type:String,attribute:"resend-hint"})],r.prototype,"resendHint",2),a([(0,o.state)()],r.prototype,"codeError",2),r=a([(0,m.customElement)("skdx-verification-page","verification-page","root")],r);0&&(module.exports={SkdxVerificationPage});
package/dist/verification-page/VerificationPage.d.cts CHANGED
@@ -137,6 +137,8 @@ export declare class SkdxVerificationPage extends LitElement {
137
137
  private get hasContent();
138
138
  protected updated(): void;
139
139
  private setValue;
140
+ private codeError;
141
+ private readonly reportInvalid;
140
142
  private readonly handleValueChange;
141
143
  private readonly handleSubmit;
142
144
  private readonly resend;
package/dist/verification-page/VerificationPage.d.ts CHANGED
@@ -137,6 +137,8 @@ export declare class SkdxVerificationPage extends LitElement {
137
137
  private get hasContent();
138
138
  protected updated(): void;
139
139
  private setValue;
140
+ private codeError;
141
+ private readonly reportInvalid;
140
142
  private readonly handleValueChange;
141
143
  private readonly handleSubmit;
142
144
  private readonly resend;
package/dist/verification-page/VerificationPage.js CHANGED
@@ -1,4 +1,4 @@
1
- var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=(l,d,e,n)=>{for(var r=n>1?void 0:n?g(d,e):d,p=l.length-1,v;p>=0;p--)(v=l[p])&&(r=(n?v(d,e,r):v(r))||r);return n&&r&&h(d,e,r),r};import{html as a,LitElement as m,nothing as o}from"lit";import{property as s}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{emit as u}from"../internal/events.js";import{hasUnslottedChild as E,placeSlotted as f}from"../internal/slots.js";import"@skdx/web-components/alert";import"@skdx/web-components/button";import"@skdx/web-components/field";import"@skdx/web-components/form";import"@skdx/web-components/heading";import"@skdx/web-components/pin-input";import"@skdx/web-components/text";var c="data-skdx-verification-page-generated",L="data-skdx-verification-page-content",k=["resend"],x=0,t=class extends m{constructor(){super(...arguments);this.title="Enter your verification code";this.pending=!1;this.codeLabel="Verification code";this.length=6;this.defaultValue="";this.submitLabel="Verify";this.resendLabel="Resend code";this.resendDisabled=!1;this.titleId=`skdx-verification-page-title-${++x}`;this.gated=new Map;this.handleValueChange=e=>{e.stopPropagation(),this.setValue(e.detail,"keyboard")};this.handleSubmit=e=>{e.target?.closest("skdx-form")&&(e.preventDefault(),u(this,"verify",{code:this.currentValue}))};this.resend=()=>{u(this,"resend")}}createRenderRoot(){return this}addEventListener(e,n,r){super.addEventListener(e,n,r),this.countListener(e,1)}removeEventListener(e,n,r){super.removeEventListener(e,n,r),this.countListener(e,-1)}countListener(e,n){k.includes(e)&&(this.gated.set(e,Math.max(0,(this.gated.get(e)??0)+n)),this.requestUpdate())}handles(e){return(this.gated.get(e)??0)>0}get currentValue(){return this.value??this.uncontrolledValue??this.defaultValue}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),super.disconnectedCallback()}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-verification-page__${e}`)}get contentRegion(){return this.querySelector(`[${L}]`)}get hasContent(){return E(this,c)||(this.contentRegion?.hasChildNodes()??!1)}updated(){let e=this.querySelector(".skdx-verification-page__code");e&&(e.value=this.currentValue),f(this,c,{footer:this.region("footer")},this.contentRegion)}setValue(e,n){let r=this.currentValue;this.uncontrolledValue=e,this.requestUpdate(),u(this,"value-change",{value:e,previousValue:r,reason:n})}render(){return a`
1
+ var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var r=(l,d,e,t)=>{for(var n=t>1?void 0:t?g(d,e):d,v=l.length-1,p;v>=0;v--)(p=l[v])&&(n=(t?p(d,e,n):p(n))||n);return t&&n&&h(d,e,n),n};import{html as a,LitElement as m,nothing as o}from"lit";import{property as s,state as b}from"lit/decorators.js";import{customElement as E}from"../internal/define.js";import{emit as u}from"../internal/events.js";import{hasUnslottedChild as f,placeSlotted as L}from"../internal/slots.js";import"@skdx/web-components/alert";import"@skdx/web-components/button";import"@skdx/web-components/field";import"@skdx/web-components/form";import"@skdx/web-components/heading";import"@skdx/web-components/pin-input";import"@skdx/web-components/text";var c="data-skdx-verification-page-generated",k="data-skdx-verification-page-content",x=["resend"],y=0,i=class extends m{constructor(){super(...arguments);this.title="Enter your verification code";this.pending=!1;this.codeLabel="Verification code";this.length=6;this.defaultValue="";this.submitLabel="Verify";this.resendLabel="Resend code";this.resendDisabled=!1;this.titleId=`skdx-verification-page-title-${++y}`;this.gated=new Map;this.codeError="";this.reportInvalid=e=>{let t=e.target;t instanceof HTMLInputElement&&t.name==="code"&&(this.codeError=t.validationMessage)};this.handleValueChange=e=>{e.stopPropagation(),this.codeError="",this.setValue(e.detail,"keyboard")};this.handleSubmit=e=>{e.target?.closest("skdx-form")&&(e.preventDefault(),u(this,"verify",{code:this.currentValue}))};this.resend=()=>{u(this,"resend")}}createRenderRoot(){return this}addEventListener(e,t,n){super.addEventListener(e,t,n),this.countListener(e,1)}removeEventListener(e,t,n){super.removeEventListener(e,t,n),this.countListener(e,-1)}countListener(e,t){x.includes(e)&&(this.gated.set(e,Math.max(0,(this.gated.get(e)??0)+t)),this.requestUpdate())}handles(e){return(this.gated.get(e)??0)>0}get currentValue(){return this.value??this.uncontrolledValue??this.defaultValue}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit),this.addEventListener("invalid",this.reportInvalid,!0),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),this.removeEventListener("invalid",this.reportInvalid,!0),super.disconnectedCallback()}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-verification-page__${e}`)}get contentRegion(){return this.querySelector(`[${k}]`)}get hasContent(){return f(this,c)||(this.contentRegion?.hasChildNodes()??!1)}updated(){let e=this.querySelector(".skdx-verification-page__code");e&&(e.value=this.currentValue),L(this,c,{footer:this.region("footer")},this.contentRegion)}setValue(e,t){let n=this.currentValue;this.uncontrolledValue=e,this.requestUpdate(),u(this,"value-change",{value:e,previousValue:n,reason:t})}render(){return a`
2
2
  <div
3
3
  class="skdx-verification-page__panel"
4
4
  data-skdx-verification-page-generated
@@ -11,6 +11,7 @@ var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=(l,d,e,n
11
11
  >
12
12
  ${this.error?a`<skdx-alert
13
13
  class="skdx-verification-page__error"
14
+ .role=${"alert"}
14
15
  .status=${"danger"}
15
16
  >${this.error}</skdx-alert
16
17
  >`:o}
@@ -22,7 +23,10 @@ var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=(l,d,e,n
22
23
  >`:o}
23
24
  <skdx-form class="skdx-verification-page__form">
24
25
  <form>
25
- <skdx-fieldset class="skdx-verification-page__field">
26
+ <skdx-fieldset
27
+ class="skdx-verification-page__field"
28
+ .errors=${this.codeError}
29
+ >
26
30
  <skdx-field-label>${this.codeLabel}</skdx-field-label>
27
31
  <skdx-pin-input
28
32
  class="skdx-verification-page__code"
@@ -33,6 +37,7 @@ var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=(l,d,e,n
33
37
  .value=${this.currentValue}
34
38
  @value-change=${this.handleValueChange}
35
39
  ></skdx-pin-input>
40
+ <skdx-field-error></skdx-field-error>
36
41
  </skdx-fieldset>
37
42
  ${this.hasContent?a`<div data-skdx-verification-page-content></div>`:o}
38
43
  <skdx-button
@@ -58,4 +63,4 @@ var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=(l,d,e,n
58
63
  </div>`:o}
59
64
  ${this.hasSlotted("footer")?a`<div class="skdx-verification-page__footer"></div>`:o}
60
65
  </div>
61
- `}};i([s({type:String})],t.prototype,"title",2),i([s({type:String})],t.prototype,"description",2),i([s({type:String})],t.prototype,"error",2),i([s({type:Boolean})],t.prototype,"pending",2),i([s({type:String,attribute:"code-label"})],t.prototype,"codeLabel",2),i([s({type:Number})],t.prototype,"length",2),i([s({type:String})],t.prototype,"value",2),i([s({type:String,attribute:"default-value"})],t.prototype,"defaultValue",2),i([s({type:String,attribute:"submit-label"})],t.prototype,"submitLabel",2),i([s({type:String,attribute:"resend-label"})],t.prototype,"resendLabel",2),i([s({type:Boolean,attribute:"resend-disabled"})],t.prototype,"resendDisabled",2),i([s({type:String,attribute:"resend-hint"})],t.prototype,"resendHint",2),t=i([b("skdx-verification-page","verification-page","root")],t);export{t as SkdxVerificationPage};
66
+ `}};r([s({type:String})],i.prototype,"title",2),r([s({type:String})],i.prototype,"description",2),r([s({type:String})],i.prototype,"error",2),r([s({type:Boolean})],i.prototype,"pending",2),r([s({type:String,attribute:"code-label"})],i.prototype,"codeLabel",2),r([s({type:Number})],i.prototype,"length",2),r([s({type:String})],i.prototype,"value",2),r([s({type:String,attribute:"default-value"})],i.prototype,"defaultValue",2),r([s({type:String,attribute:"submit-label"})],i.prototype,"submitLabel",2),r([s({type:String,attribute:"resend-label"})],i.prototype,"resendLabel",2),r([s({type:Boolean,attribute:"resend-disabled"})],i.prototype,"resendDisabled",2),r([s({type:String,attribute:"resend-hint"})],i.prototype,"resendHint",2),r([b()],i.prototype,"codeError",2),i=r([E("skdx-verification-page","verification-page","root")],i);export{i as SkdxVerificationPage};