@skdx/web-components-blocks 0.38.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.
- package/custom-elements.json +1044 -1044
- package/dist/forgot-password-page/ForgotPasswordPage.cjs +3 -2
- package/dist/forgot-password-page/ForgotPasswordPage.js +6 -5
- package/dist/page-container/PageContainer.d.cts +1 -1
- package/dist/page-container/PageContainer.d.ts +1 -1
- package/dist/reset-password-page/ResetPasswordPage.cjs +3 -2
- package/dist/reset-password-page/ResetPasswordPage.js +2 -1
- package/dist/sign-in-page/SignInPage.cjs +2 -1
- package/dist/sign-in-page/SignInPage.js +1 -0
- package/dist/sign-up-page/SignUpPage.cjs +22 -17
- package/dist/sign-up-page/SignUpPage.d.cts +3 -0
- package/dist/sign-up-page/SignUpPage.d.ts +3 -0
- package/dist/sign-up-page/SignUpPage.js +13 -8
- package/dist/usage-card/UsageCard.cjs +4 -4
- package/dist/usage-card/UsageCard.js +9 -9
- package/dist/verification-page/VerificationPage.cjs +8 -3
- package/dist/verification-page/VerificationPage.d.cts +2 -0
- package/dist/verification-page/VerificationPage.d.ts +2 -0
- package/dist/verification-page/VerificationPage.js +8 -3
- package/dist/workspace-switcher/WorkspaceSwitcher.cjs +17 -17
- package/dist/workspace-switcher/WorkspaceSwitcher.d.cts +1 -0
- package/dist/workspace-switcher/WorkspaceSwitcher.d.ts +1 -0
- package/dist/workspace-switcher/WorkspaceSwitcher.js +14 -14
- package/package.json +3 -3
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var b=(o,t)=>{for(var e in t)n(o,e,{get:t[e],enumerable:!0})},v=(o,t,e,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of x(t))!k.call(o,s)&&s!==e&&n(o,s,{get:()=>t[s],enumerable:!(a=u(t,s))||a.enumerable});return o};var $=o=>v(n({},"__esModule",{value:!0}),o),
|
|
1
|
+
"use strict";var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var b=(o,t)=>{for(var e in t)n(o,e,{get:t[e],enumerable:!0})},v=(o,t,e,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of x(t))!k.call(o,s)&&s!==e&&n(o,s,{get:()=>t[s],enumerable:!(a=u(t,s))||a.enumerable});return o};var $=o=>v(n({},"__esModule",{value:!0}),o),l=(o,t,e,a)=>{for(var s=a>1?void 0:a?u(t,e):t,m=o.length-1,c;m>=0;m--)(c=o[m])&&(s=(a?c(t,e,s):c(s))||s);return a&&s&&n(t,e,s),s};var E={};b(E,{SkdxForgotPasswordPage:()=>i});module.exports=$(E);var r=require("lit"),d=require("lit/decorators.js"),h=require("../internal/define.cjs"),f=require("../internal/events.cjs"),p=require("../internal/slots.cjs"),T=require("@skdx/web-components/alert"),w=require("@skdx/web-components/button"),S=require("@skdx/web-components/field"),q=require("@skdx/web-components/form"),C=require("@skdx/web-components/heading"),M=require("@skdx/web-components/text"),R=require("@skdx/web-components/text-field");var g="data-skdx-forgot-password-page-generated",y="data-skdx-forgot-password-page-content",_=0,i=class extends r.LitElement{constructor(){super(...arguments);this.title="Reset your password";this.pending=!1;this.emailLabel="Email";this.submitLabel="Send reset link";this.titleId=`skdx-forgot-password-page-title-${++_}`;this.handleSubmit=e=>{let a=e.target?.closest("skdx-form");if(!a)return;e.preventDefault();let s=a.querySelector('[name="email"]');(0,f.emit)(this,"request-reset",{email:s?.value??""})}}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-forgot-password-page__${e}`)}get contentRegion(){return this.querySelector(`[${y}]`)}get hasContent(){return(0,p.hasUnslottedChild)(this,g)||(this.contentRegion?.hasChildNodes()??!1)}updated(){(0,p.placeSlotted)(this,g,{footer:this.region("footer")},this.contentRegion)}render(){return r.html`
|
|
2
2
|
<div
|
|
3
3
|
class="skdx-forgot-password-page__panel"
|
|
4
4
|
data-skdx-forgot-password-page-generated
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
>
|
|
12
12
|
${this.error?r.html`<skdx-alert
|
|
13
13
|
class="skdx-forgot-password-page__error"
|
|
14
|
+
.role=${"alert"}
|
|
14
15
|
.status=${"danger"}
|
|
15
16
|
>${this.error}</skdx-alert
|
|
16
17
|
>`:r.nothing}
|
|
@@ -54,4 +55,4 @@
|
|
|
54
55
|
</skdx-form>`}
|
|
55
56
|
${this.hasSlotted("footer")?r.html`<div class="skdx-forgot-password-page__footer"></div>`:r.nothing}
|
|
56
57
|
</div>
|
|
57
|
-
`}};
|
|
58
|
+
`}};l([(0,d.property)({type:String})],i.prototype,"title",2),l([(0,d.property)({type:String})],i.prototype,"description",2),l([(0,d.property)({type:String})],i.prototype,"error",2),l([(0,d.property)({type:String})],i.prototype,"success",2),l([(0,d.property)({type:Boolean})],i.prototype,"pending",2),l([(0,d.property)({type:String,attribute:"email-label"})],i.prototype,"emailLabel",2),l([(0,d.property)({type:String,attribute:"submit-label"})],i.prototype,"submitLabel",2),i=l([(0,h.customElement)("skdx-forgot-password-page","forgot-password-page","root")],i);0&&(module.exports={SkdxForgotPasswordPage});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var u=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var r=(n,
|
|
1
|
+
var u=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var r=(n,l,e,i)=>{for(var s=i>1?void 0:i?g(l,e):l,p=n.length-1,m;p>=0;p--)(m=n[p])&&(s=(i?m(l,e,s):m(s))||s);return i&&s&&u(l,e,s),s};import{html as o,LitElement as h,nothing as d}from"lit";import{property as a}from"lit/decorators.js";import{customElement as f}from"../internal/define.js";import{emit as x}from"../internal/events.js";import{hasUnslottedChild as k,placeSlotted as b}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/text";import"@skdx/web-components/text-field";var c="data-skdx-forgot-password-page-generated",v="data-skdx-forgot-password-page-content",$=0,t=class extends h{constructor(){super(...arguments);this.title="Reset your password";this.pending=!1;this.emailLabel="Email";this.submitLabel="Send reset link";this.titleId=`skdx-forgot-password-page-title-${++$}`;this.handleSubmit=e=>{let i=e.target?.closest("skdx-form");if(!i)return;e.preventDefault();let s=i.querySelector('[name="email"]');x(this,"request-reset",{email:s?.value??""})}}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-forgot-password-page__${e}`)}get contentRegion(){return this.querySelector(`[${v}]`)}get hasContent(){return k(this,c)||(this.contentRegion?.hasChildNodes()??!1)}updated(){b(this,c,{footer:this.region("footer")},this.contentRegion)}render(){return o`
|
|
2
2
|
<div
|
|
3
3
|
class="skdx-forgot-password-page__panel"
|
|
4
4
|
data-skdx-forgot-password-page-generated
|
|
@@ -11,15 +11,16 @@ var u=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var r=(n,d,e,i
|
|
|
11
11
|
>
|
|
12
12
|
${this.error?o`<skdx-alert
|
|
13
13
|
class="skdx-forgot-password-page__error"
|
|
14
|
+
.role=${"alert"}
|
|
14
15
|
.status=${"danger"}
|
|
15
16
|
>${this.error}</skdx-alert
|
|
16
|
-
>`:
|
|
17
|
+
>`:d}
|
|
17
18
|
${this.description?o`<skdx-text
|
|
18
19
|
class="skdx-forgot-password-page__description"
|
|
19
20
|
as="p"
|
|
20
21
|
.tone=${"muted"}
|
|
21
22
|
>${this.description}</skdx-text
|
|
22
|
-
>`:
|
|
23
|
+
>`:d}
|
|
23
24
|
${this.success?o`<skdx-alert
|
|
24
25
|
class="skdx-forgot-password-page__success"
|
|
25
26
|
.status=${"success"}
|
|
@@ -42,7 +43,7 @@ var u=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var r=(n,d,e,i
|
|
|
42
43
|
></skdx-text-field-input>
|
|
43
44
|
</skdx-text-field>
|
|
44
45
|
</skdx-field>
|
|
45
|
-
${this.hasContent?o`<div data-skdx-forgot-password-page-content></div>`:
|
|
46
|
+
${this.hasContent?o`<div data-skdx-forgot-password-page-content></div>`:d}
|
|
46
47
|
<skdx-button
|
|
47
48
|
class="skdx-forgot-password-page__submit"
|
|
48
49
|
type="submit"
|
|
@@ -52,6 +53,6 @@ var u=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var r=(n,d,e,i
|
|
|
52
53
|
>
|
|
53
54
|
</form>
|
|
54
55
|
</skdx-form>`}
|
|
55
|
-
${this.hasSlotted("footer")?o`<div class="skdx-forgot-password-page__footer"></div>`:
|
|
56
|
+
${this.hasSlotted("footer")?o`<div class="skdx-forgot-password-page__footer"></div>`:d}
|
|
56
57
|
</div>
|
|
57
58
|
`}};r([a({type:String})],t.prototype,"title",2),r([a({type:String})],t.prototype,"description",2),r([a({type:String})],t.prototype,"error",2),r([a({type:String})],t.prototype,"success",2),r([a({type:Boolean})],t.prototype,"pending",2),r([a({type:String,attribute:"email-label"})],t.prototype,"emailLabel",2),r([a({type:String,attribute:"submit-label"})],t.prototype,"submitLabel",2),t=r([f("skdx-forgot-password-page","forgot-password-page","root")],t);export{t as SkdxForgotPasswordPage};
|
|
@@ -27,7 +27,7 @@ export interface SkdxPageContainerBreadcrumb {
|
|
|
27
27
|
* ```
|
|
28
28
|
*
|
|
29
29
|
* @slot - The page content below the header.
|
|
30
|
-
* @slot actions -
|
|
30
|
+
* @slot actions - Toolbar parts placed in the toolbar beside the heading. Pass toolbar parts — a toolbar button, link, separator or toggle group; anything else stays its own Tab stop and the arrow keys skip it, since only a toolbar part joins the roving tabindex.
|
|
31
31
|
*/
|
|
32
32
|
export declare class SkdxPageContainer extends LitElement {
|
|
33
33
|
/** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
|
|
@@ -27,7 +27,7 @@ export interface SkdxPageContainerBreadcrumb {
|
|
|
27
27
|
* ```
|
|
28
28
|
*
|
|
29
29
|
* @slot - The page content below the header.
|
|
30
|
-
* @slot actions -
|
|
30
|
+
* @slot actions - Toolbar parts placed in the toolbar beside the heading. Pass toolbar parts — a toolbar button, link, separator or toggle group; anything else stays its own Tab stop and the arrow keys skip it, since only a toolbar part joins the roving tabindex.
|
|
31
31
|
*/
|
|
32
32
|
export declare class SkdxPageContainer extends LitElement {
|
|
33
33
|
/** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
|
|
@@ -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=(
|
|
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})],
|
|
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});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var h=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var r=(l,n,e,
|
|
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}
|
|
@@ -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
|
|
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}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var u=Object.defineProperty;var
|
|
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?
|
|
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
|
-
>`:
|
|
17
|
-
${e.length?
|
|
18
|
-
${e.map(
|
|
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=${
|
|
22
|
-
@click=${()=>this.signUpWithProvider(
|
|
23
|
-
>${
|
|
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>`:
|
|
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?
|
|
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?
|
|
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=${
|
|
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?
|
|
87
|
-
${this.hasSlotted("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>`:
|
|
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")?
|
|
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,
|
|
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});
|
|
@@ -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;
|
|
@@ -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;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var
|
|
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(
|
|
19
|
+
${e.map(i=>l`<skdx-button
|
|
19
20
|
class="skdx-sign-up-page__provider"
|
|
20
21
|
type="button"
|
|
21
|
-
data-provider=${
|
|
22
|
-
@click=${()=>this.signUpWithProvider(
|
|
23
|
-
>${i
|
|
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=${
|
|
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
|
|
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})],
|
|
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};
|
|
@@ -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"),
|
|
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(
|
|
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=${(
|
|
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,
|
|
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});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var p=Object.defineProperty;var
|
|
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>`:
|
|
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(
|
|
18
|
-
${e===void 0?
|
|
19
|
-
${this.unit?d`<span class="skdx-usage-card__unit">${this.unit}</span>`:
|
|
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=${(
|
|
28
|
+
.getValueLabel=${(y,L,c)=>`${i(u)} / ${i(c)}${m}`}
|
|
29
29
|
data-skdx-usage-card-generated
|
|
30
|
-
></skdx-progress>`:
|
|
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
|
-
>`:
|
|
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>`:
|
|
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};
|
|
@@ -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,
|
|
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
|
|
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})],
|
|
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});
|
|
@@ -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;
|
|
@@ -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;
|