@foxy.io/elements 1.18.0-beta.11 → 1.18.0-beta.12
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
import"./shared-96695c93.js";import"./shared-c99a75d8.js";import"./shared-66a0263f.js";import"./shared-4a2e1638.js";import"./shared-0ffa1afb.js";import"./shared-ccb96675.js";import"./shared-0479553e.js";import"./foxy-spinner.js";import"./shared-d9c5e26e.js";import{h as e}from"./shared-7f33a83a.js";import{C as s}from"./shared-24d650cd.js";import{N as
|
|
1
|
+
import"./shared-96695c93.js";import"./shared-c99a75d8.js";import"./shared-66a0263f.js";import"./shared-4a2e1638.js";import"./shared-0ffa1afb.js";import"./shared-ccb96675.js";import"./shared-0479553e.js";import"./foxy-spinner.js";import"./shared-d9c5e26e.js";import{h as e}from"./shared-7f33a83a.js";import{C as s}from"./shared-24d650cd.js";import{N as i}from"./shared-425d906a.js";import{T as t,a}from"./shared-1c9fd2b1.js";import{c as r}from"./shared-4e709717.js";import{i as l}from"./shared-d3bf9ac0.js";import{v as o}from"./shared-b738ee96.js";import"./shared-0ca312eb.js";import"./shared-b1304f5b.js";import"./shared-a8ced8bf.js";import"./shared-4f037e43.js";import"./shared-7c8b3ce0.js";import"./shared-a03d948d.js";import"./shared-7684cb05.js";import"./shared-b0ba62ff.js";let n,d,m,h,c=e=>e;const p=t(s(a(i,"access-recovery-form")));class u extends p{constructor(){super(...arguments),this.templates={},this.__checkEmailValidity=()=>!this.errors.some((e=>e.startsWith("email"))),this.__renderEmail=()=>{var s;const i=this.in("fail"),t=this.in("busy"),a=this.in({idle:"snapshot"}),r=this.errors.filter((e=>e.startsWith("email"))).map((e=>e.replace("email","v8n"))),o=r[0]?this.t(r[0]).toString():"";return e(n||(n=c` <div> ${0} <vaadin-email-field error-message="${0}" data-testid="email" class="w-full" label="${0}" value="${0}" ?disabled="${0}" ?readonly="${0}" .checkValidity="${0}" @input="${0}" @keydown="${0}"> </vaadin-email-field> ${0} </div> `),this.renderTemplateOrSlot("email:before"),o,this.t("email").toString(),l(null===(s=this.form.detail)||void 0===s?void 0:s.email),t||a||i||this.disabledSelector.matches("email",!0),this.readonlySelector.matches("email",!0),this.__checkEmailValidity,(e=>{this.edit({detail:{email:e.target.value},type:"email"})}),(e=>{"Enter"===e.key&&this.submit()}),this.renderTemplateOrSlot("email:after"))},this.__renderMessage=()=>{const s=this.in("fail"),i=s?"bg-error-10 text-error":"bg-success-10 text-success",t=s?"lumo:error":"lumo:cog",a=s?"unknown_error":"recover_access_success";return e(d||(d=c` <div> ${0} <p class="leading-s flex items-start text-s rounded p-s ${0}"> <iron-icon class="flex-shrink-0 icon-inline text-l mr-s" icon="${0}"></iron-icon> <foxy-i18n lang="${0}" key="${0}" ns="${0}" data-testid="message"></foxy-i18n> </p> ${0} </div> `),this.renderTemplateOrSlot("message:before"),i,t,this.lang,a,this.ns,this.renderTemplateOrSlot("message:after"))},this.__renderSubmit=()=>{const s=this.in("fail"),i=0===this.errors.length,t=this.in("busy"),a=this.in({idle:"snapshot"}),r=t||a||!i||s;return e(m||(m=c` <div> ${0} <vaadin-button data-testid="submit" class="w-full" theme="primary" ?disabled="${0}" @click="${0}"> <foxy-i18n lang="${0}" key="recover_access" ns="${0}"></foxy-i18n> </vaadin-button> ${0} </div> `),this.renderTemplateOrSlot("submit:before"),r||this.disabledSelector.matches("submit",!0),(()=>this.submit()),this.lang,this.ns,this.renderTemplateOrSlot("submit:after"))}}static get v8n(){return[({detail:e})=>(null==e?void 0:e.email)&&e.email.length>0||"email_required",({detail:e})=>{var s;return o(null!==(s=null==e?void 0:e.email)&&void 0!==s?s:"")||"email_invalid_email"}]}render(){var s,i;const t=this.hiddenSelector,a=this.in({idle:"snapshot"})||this.in("fail"),l=this.in("busy");return e(h||(h=c` <main data-testid="wrapper" aria-live="polite" aria-busy="${0}" class="relative font-lumo text-m leading-m space-y-m"> ${0} ${0} ${0} <div data-testid="spinner" class="${0}"> <foxy-spinner layout="vertical" class="m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l" state="busy" lang="${0}" ns="${0} ${0}"> </foxy-spinner> </div> </main> `),l,t.matches("email",!0)?"":this.__renderEmail(),t.matches("message",!0)||!a?"":this.__renderMessage(),t.matches("submit",!0)?"":this.__renderSubmit(),r({"transition duration-500 ease-in-out absolute inset-0 flex":!0,"opacity-0 pointer-events-none":!l}),this.lang,this.ns,null!==(i=null===(s=customElements.get("foxy-spinner"))||void 0===s?void 0:s.defaultNS)&&void 0!==i?i:"")}}customElements.define("foxy-access-recovery-form",u);export{u as AccessRecoveryForm};
|
|
@@ -34,6 +34,7 @@ export class AccessRecoveryForm extends Base {
|
|
|
34
34
|
var _a;
|
|
35
35
|
const isFailed = this.in('fail');
|
|
36
36
|
const isBusy = this.in('busy');
|
|
37
|
+
const isDone = this.in({ idle: 'snapshot' });
|
|
37
38
|
const emailErrors = this.errors.filter(error => error.startsWith('email'));
|
|
38
39
|
const emailErrorKeys = emailErrors.map(error => error.replace('email', 'v8n'));
|
|
39
40
|
const emailErrorMessage = emailErrorKeys[0] ? this.t(emailErrorKeys[0]).toString() : '';
|
|
@@ -57,7 +58,7 @@ export class AccessRecoveryForm extends Base {
|
|
|
57
58
|
class="w-full"
|
|
58
59
|
label=${this.t('email').toString()}
|
|
59
60
|
value=${ifDefined((_a = this.form.detail) === null || _a === void 0 ? void 0 : _a.email)}
|
|
60
|
-
?disabled=${isBusy || isFailed || this.disabledSelector.matches('email', true)}
|
|
61
|
+
?disabled=${isBusy || isDone || isFailed || this.disabledSelector.matches('email', true)}
|
|
61
62
|
?readonly=${this.readonlySelector.matches('email', true)}
|
|
62
63
|
.checkValidity=${this.__checkEmailValidity}
|
|
63
64
|
@input=${handleInput}
|
|
@@ -91,6 +92,8 @@ export class AccessRecoveryForm extends Base {
|
|
|
91
92
|
const isFailed = this.in('fail');
|
|
92
93
|
const isValid = this.errors.length === 0;
|
|
93
94
|
const isBusy = this.in('busy');
|
|
95
|
+
const isDone = this.in({ idle: 'snapshot' });
|
|
96
|
+
const isDisabledByForm = isBusy || isDone || !isValid || isFailed;
|
|
94
97
|
return html `
|
|
95
98
|
<div>
|
|
96
99
|
${this.renderTemplateOrSlot('submit:before')}
|
|
@@ -99,10 +102,7 @@ export class AccessRecoveryForm extends Base {
|
|
|
99
102
|
data-testid="submit"
|
|
100
103
|
class="w-full"
|
|
101
104
|
theme="primary"
|
|
102
|
-
?disabled=${
|
|
103
|
-
!isValid ||
|
|
104
|
-
isFailed ||
|
|
105
|
-
this.disabledSelector.matches('submit', true)}
|
|
105
|
+
?disabled=${isDisabledByForm || this.disabledSelector.matches('submit', true)}
|
|
106
106
|
@click=${() => this.submit()}
|
|
107
107
|
>
|
|
108
108
|
<foxy-i18n lang=${this.lang} key="recover_access" ns=${this.ns}></foxy-i18n>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccessRecoveryForm.js","sourceRoot":"","sources":["../../../../src/elements/public/AccessRecoveryForm/AccessRecoveryForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates } from './types';\nimport { TemplateResult, html } from 'lit-element';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { EmailFieldElement } from '@vaadin/vaadin-text-field/vaadin-email-field';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { NucleonV8N } from '../NucleonElement/types';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { validate as isEmail } from 'email-validator';\n\nconst NS = 'access-recovery-form';\nconst Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)));\n\n/**\n * Email-based \"forgot password\" form.\n *\n * @slot email:before\n * @slot email:after\n *\n * @slot message:before\n * @slot message:after\n *\n * @slot submit:before\n * @slot submit:after\n *\n * @element foxy-access-recovery-form\n * @since 1.4.0\n */\nexport class AccessRecoveryForm extends Base<Data> {\n static get v8n(): NucleonV8N<Data> {\n return [\n ({ detail: d }) => (d?.email && d.email.length > 0) || 'email_required',\n ({ detail: d }) => isEmail(d?.email ?? '') || 'email_invalid_email',\n ];\n }\n\n templates: Templates = {};\n\n private readonly __checkEmailValidity = () => {\n return !this.errors.some(err => err.startsWith('email'));\n };\n\n private readonly __renderEmail = () => {\n const isFailed = this.in('fail');\n const isBusy = this.in('busy');\n\n const emailErrors = this.errors.filter(error => error.startsWith('email'));\n const emailErrorKeys = emailErrors.map(error => error.replace('email', 'v8n'));\n const emailErrorMessage = emailErrorKeys[0] ? this.t(emailErrorKeys[0]).toString() : '';\n\n const handleKeyDown = (evt: KeyboardEvent) => {\n if (evt.key === 'Enter') this.submit();\n };\n\n const handleInput = (evt: InputEvent) => {\n this.edit({\n detail: { email: (evt.target as EmailFieldElement).value },\n type: 'email',\n });\n };\n\n return html`\n <div>\n ${this.renderTemplateOrSlot('email:before')}\n\n <vaadin-email-field\n error-message=${emailErrorMessage}\n data-testid=\"email\"\n class=\"w-full\"\n label=${this.t('email').toString()}\n value=${ifDefined(this.form.detail?.email)}\n ?disabled=${isBusy || isFailed || this.disabledSelector.matches('email', true)}\n ?readonly=${this.readonlySelector.matches('email', true)}\n .checkValidity=${this.__checkEmailValidity}\n @input=${handleInput}\n @keydown=${handleKeyDown}\n >\n </vaadin-email-field>\n\n ${this.renderTemplateOrSlot('email:after')}\n </div>\n `;\n };\n\n private readonly __renderMessage = () => {\n const isFailed = this.in('fail');\n const color = isFailed ? 'bg-error-10 text-error' : 'bg-success-10 text-success';\n const icon = isFailed ? 'lumo:error' : 'lumo:cog';\n const key = isFailed ? 'unknown_error' : 'recover_access_success';\n\n return html`\n <div>\n ${this.renderTemplateOrSlot('message:before')}\n\n <p class=\"leading-s flex items-start text-s rounded p-s ${color}\">\n <iron-icon class=\"flex-shrink-0 icon-inline text-l mr-s\" icon=${icon}></iron-icon>\n <foxy-i18n lang=${this.lang} key=${key} ns=${this.ns} data-testid=\"message\"></foxy-i18n>\n </p>\n\n ${this.renderTemplateOrSlot('message:after')}\n </div>\n `;\n };\n\n private readonly __renderSubmit = () => {\n const isFailed = this.in('fail');\n const isValid = this.errors.length === 0;\n const isBusy = this.in('busy');\n\n return html`\n <div>\n ${this.renderTemplateOrSlot('submit:before')}\n\n <vaadin-button\n data-testid=\"submit\"\n class=\"w-full\"\n theme=\"primary\"\n ?disabled=${isBusy ||\n !isValid ||\n isFailed ||\n this.disabledSelector.matches('submit', true)}\n @click=${() => this.submit()}\n >\n <foxy-i18n lang=${this.lang} key=\"recover_access\" ns=${this.ns}></foxy-i18n>\n </vaadin-button>\n\n ${this.renderTemplateOrSlot('submit:after')}\n </div>\n `;\n };\n\n render(): TemplateResult {\n const hiddenSelector = this.hiddenSelector;\n const isDone = this.in({ idle: 'snapshot' }) || this.in('fail');\n const isBusy = this.in('busy');\n\n return html`\n <main\n data-testid=\"wrapper\"\n aria-live=\"polite\"\n aria-busy=${isBusy}\n class=\"relative font-lumo text-m leading-m space-y-m\"\n >\n ${hiddenSelector.matches('email', true) ? '' : this.__renderEmail()}\n ${hiddenSelector.matches('message', true) || !isDone ? '' : this.__renderMessage()}\n ${hiddenSelector.matches('submit', true) ? '' : this.__renderSubmit()}\n\n <div\n data-testid=\"spinner\"\n class=${classMap({\n 'transition duration-500 ease-in-out absolute inset-0 flex': true,\n 'opacity-0 pointer-events-none': !isBusy,\n })}\n >\n <foxy-spinner\n layout=\"vertical\"\n class=\"m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l\"\n state=\"busy\"\n lang=${this.lang}\n ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n >\n </foxy-spinner>\n </div>\n </main>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"AccessRecoveryForm.js","sourceRoot":"","sources":["../../../../src/elements/public/AccessRecoveryForm/AccessRecoveryForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates } from './types';\nimport { TemplateResult, html } from 'lit-element';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { EmailFieldElement } from '@vaadin/vaadin-text-field/vaadin-email-field';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { NucleonV8N } from '../NucleonElement/types';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { validate as isEmail } from 'email-validator';\n\nconst NS = 'access-recovery-form';\nconst Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)));\n\n/**\n * Email-based \"forgot password\" form.\n *\n * @slot email:before\n * @slot email:after\n *\n * @slot message:before\n * @slot message:after\n *\n * @slot submit:before\n * @slot submit:after\n *\n * @element foxy-access-recovery-form\n * @since 1.4.0\n */\nexport class AccessRecoveryForm extends Base<Data> {\n static get v8n(): NucleonV8N<Data> {\n return [\n ({ detail: d }) => (d?.email && d.email.length > 0) || 'email_required',\n ({ detail: d }) => isEmail(d?.email ?? '') || 'email_invalid_email',\n ];\n }\n\n templates: Templates = {};\n\n private readonly __checkEmailValidity = () => {\n return !this.errors.some(err => err.startsWith('email'));\n };\n\n private readonly __renderEmail = () => {\n const isFailed = this.in('fail');\n const isBusy = this.in('busy');\n const isDone = this.in({ idle: 'snapshot' });\n\n const emailErrors = this.errors.filter(error => error.startsWith('email'));\n const emailErrorKeys = emailErrors.map(error => error.replace('email', 'v8n'));\n const emailErrorMessage = emailErrorKeys[0] ? this.t(emailErrorKeys[0]).toString() : '';\n\n const handleKeyDown = (evt: KeyboardEvent) => {\n if (evt.key === 'Enter') this.submit();\n };\n\n const handleInput = (evt: InputEvent) => {\n this.edit({\n detail: { email: (evt.target as EmailFieldElement).value },\n type: 'email',\n });\n };\n\n return html`\n <div>\n ${this.renderTemplateOrSlot('email:before')}\n\n <vaadin-email-field\n error-message=${emailErrorMessage}\n data-testid=\"email\"\n class=\"w-full\"\n label=${this.t('email').toString()}\n value=${ifDefined(this.form.detail?.email)}\n ?disabled=${isBusy || isDone || isFailed || this.disabledSelector.matches('email', true)}\n ?readonly=${this.readonlySelector.matches('email', true)}\n .checkValidity=${this.__checkEmailValidity}\n @input=${handleInput}\n @keydown=${handleKeyDown}\n >\n </vaadin-email-field>\n\n ${this.renderTemplateOrSlot('email:after')}\n </div>\n `;\n };\n\n private readonly __renderMessage = () => {\n const isFailed = this.in('fail');\n const color = isFailed ? 'bg-error-10 text-error' : 'bg-success-10 text-success';\n const icon = isFailed ? 'lumo:error' : 'lumo:cog';\n const key = isFailed ? 'unknown_error' : 'recover_access_success';\n\n return html`\n <div>\n ${this.renderTemplateOrSlot('message:before')}\n\n <p class=\"leading-s flex items-start text-s rounded p-s ${color}\">\n <iron-icon class=\"flex-shrink-0 icon-inline text-l mr-s\" icon=${icon}></iron-icon>\n <foxy-i18n lang=${this.lang} key=${key} ns=${this.ns} data-testid=\"message\"></foxy-i18n>\n </p>\n\n ${this.renderTemplateOrSlot('message:after')}\n </div>\n `;\n };\n\n private readonly __renderSubmit = () => {\n const isFailed = this.in('fail');\n const isValid = this.errors.length === 0;\n const isBusy = this.in('busy');\n const isDone = this.in({ idle: 'snapshot' });\n const isDisabledByForm = isBusy || isDone || !isValid || isFailed;\n\n return html`\n <div>\n ${this.renderTemplateOrSlot('submit:before')}\n\n <vaadin-button\n data-testid=\"submit\"\n class=\"w-full\"\n theme=\"primary\"\n ?disabled=${isDisabledByForm || this.disabledSelector.matches('submit', true)}\n @click=${() => this.submit()}\n >\n <foxy-i18n lang=${this.lang} key=\"recover_access\" ns=${this.ns}></foxy-i18n>\n </vaadin-button>\n\n ${this.renderTemplateOrSlot('submit:after')}\n </div>\n `;\n };\n\n render(): TemplateResult {\n const hiddenSelector = this.hiddenSelector;\n const isDone = this.in({ idle: 'snapshot' }) || this.in('fail');\n const isBusy = this.in('busy');\n\n return html`\n <main\n data-testid=\"wrapper\"\n aria-live=\"polite\"\n aria-busy=${isBusy}\n class=\"relative font-lumo text-m leading-m space-y-m\"\n >\n ${hiddenSelector.matches('email', true) ? '' : this.__renderEmail()}\n ${hiddenSelector.matches('message', true) || !isDone ? '' : this.__renderMessage()}\n ${hiddenSelector.matches('submit', true) ? '' : this.__renderSubmit()}\n\n <div\n data-testid=\"spinner\"\n class=${classMap({\n 'transition duration-500 ease-in-out absolute inset-0 flex': true,\n 'opacity-0 pointer-events-none': !isBusy,\n })}\n >\n <foxy-spinner\n layout=\"vertical\"\n class=\"m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l\"\n state=\"busy\"\n lang=${this.lang}\n ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n >\n </foxy-spinner>\n </div>\n </main>\n `;\n }\n}\n"]}
|