@foxy.io/elements 1.15.0-beta.8 → 1.16.0-beta.10

package/dist/elements/private/FrequencyInput/FrequencyInput.js

@@ -4,10 +4,12 @@ import '@vaadin/vaadin-combo-box';
 import "../../public/I18n/index.js";
 import { LitElement, css, html, } from 'lit-element';
 import { FrequencyInputChangeEvent } from "./FrequencyInputChangeEvent.js";
+import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { live } from '@open-wc/lit-helpers';
 import memoize from 'lodash-es/memoize';
 import { parseDuration } from "../../../utils/parse-duration.js";
-export class FrequencyInput extends LitElement {
+import { InferrableMixin } from "../../../mixins/inferrable.js";
+export class FrequencyInput extends TranslatableMixin(InferrableMixin(LitElement)) {
     constructor() {
         super(...arguments);
         this.label = '';
@@ -25,22 +27,22 @@ export class FrequencyInput extends LitElement {
         this.__getItems = memoize((value) => {
             const count = parseDuration(value).count;
             return [
-                { value: 'd', label: this.__t('day', { count }) },
-                { value: 'w', label: this.__t('week', { count }) },
-                { value: 'm', label: this.__t('month', { count }) },
-                { value: 'y', label: this.__t('year', { count }) },
+                { value: 'd', label: this.t('day', { count }) },
+                { value: 'w', label: this.t('week', { count }) },
+                { value: 'm', label: this.t('month', { count }) },
+                { value: 'y', label: this.t('year', { count }) },
             ];
         });
     }
     static get properties() {
         return {
+            ...super.properties,
             checkValidity: { attribute: false },
             errorMessage: { type: String, attribute: 'error-message' },
             disabled: { type: Boolean, reflect: true },
             readonly: { type: Boolean, reflect: true },
             label: { type: String },
             value: { type: String },
-            lang: { type: String },
         };
     }
     static get styles() {
@@ -78,14 +80,6 @@ vaadin-combo-box::part(text-field){
 }
     `;
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.__untrackTranslations = customElements.get('foxy-i18n').onTranslationChange(() => {
-            var _a, _b;
-            (_b = (_a = this.__getItems.cache).clear) === null || _b === void 0 ? void 0 : _b.call(_a);
-            this.requestUpdate();
-        });
-    }
     render() {
         return html `
       <vaadin-custom-field
@@ -130,17 +124,9 @@ vaadin-combo-box::part(text-field){
         if (field.value !== this.value)
             field.value = this.value;
     }
-    disconnectedCallback() {
-        var _a;
-        super.disconnectedCallback();
-        (_a = this.__untrackTranslations) === null || _a === void 0 ? void 0 : _a.call(this);
-    }
     checkValidity() {
         return true;
     }
-    get __t() {
-        return customElements.get('foxy-i18n').i18next.getFixedT(this.lang);
-    }
     __handleChange(evt) {
         const field = evt.target;
         this.value = field.value;

package/dist/elements/private/FrequencyInput/FrequencyInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FrequencyInput.js","sourceRoot":"","sources":["../../../../src/elements/private/FrequencyInput/FrequencyInput.ts"],"names":[],"mappings":"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","sourcesContent":["import '@vaadin/vaadin-text-field/vaadin-integer-field';\nimport '@vaadin/vaadin-custom-field';\nimport '@vaadin/vaadin-combo-box';\nimport '../../public/I18n/index';\n\nimport {\n  CSSResult,\n  CSSResultArray,\n  LitElement,\n  PropertyDeclarations,\n  TemplateResult,\n  css,\n  html,\n} from 'lit-element';\nimport type { CustomFieldElement, CustomFieldI18n } from '@vaadin/vaadin-custom-field';\n\nimport { FrequencyInputChangeEvent } from './FrequencyInputChangeEvent';\nimport { live } from '@open-wc/lit-helpers';\nimport memoize from 'lodash-es/memoize';\nimport { parseDuration } from '../../../utils/parse-duration';\n\nexport class FrequencyInput extends LitElement {\n  static get properties(): PropertyDeclarations {\n    return {\n      checkValidity: { attribute: false },\n      errorMessage: { type: String, attribute: 'error-message' },\n      disabled: { type: Boolean, reflect: true },\n      readonly: { type: Boolean, reflect: true },\n      label: { type: String },\n      value: { type: String },\n      lang: { type: String },\n    };\n  }\n\n  static get styles(): CSSResult | CSSResultArray {\n    return css`\n      :host {\n        display: block;\n      }\n\n      vaadin-custom-field {\n        width: 100%;\n        font-size: 0;\n        line-height: 0;\n        padding-top: 0 !important;\n      }\n\n      vaadin-custom-field::part(label) {\n        padding-bottom: var(--lumo-space-s);\n      }\n\n      vaadin-custom-field::part(error-message)[aria-hidden='false'] {\n        padding-top: var(--lumo-space-xs);\n      }\n\n      vaadin-integer-field,\n      vaadin-combo-box {\n        width: calc(50% - (var(--lumo-space-s) / 2));\n      }\n\n      vaadin-integer-field {\n        margin-right: var(--lumo-space-s);\n        padding: 0;\n      }\n\n      vaadin-combo-box::part(text-field) {\n        padding: 0;\n      }\n    `;\n  }\n\n  label = '';\n\n  value = '';\n\n  disabled = false;\n\n  readonly = false;\n\n  errorMessage = '';\n\n  private __i18n: CustomFieldI18n = {\n    formatValue: inputValues => inputValues.join(''),\n    parseValue: value => {\n      const { count, units } = parseDuration(value);\n      return [count.toString(), units];\n    },\n  };\n\n  private __getItems = memoize((value: string) => {\n    const count = parseDuration(value).count;\n\n    return [\n      { value: 'd', label: this.__t('day', { count }) },\n      { value: 'w', label: this.__t('week', { count }) },\n      { value: 'm', label: this.__t('month', { count }) },\n      { value: 'y', label: this.__t('year', { count }) },\n    ];\n  });\n\n  private __untrackTranslations?: () => void;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.__untrackTranslations = customElements.get('foxy-i18n').onTranslationChange(() => {\n      this.__getItems.cache.clear?.();\n      this.requestUpdate();\n    });\n  }\n\n  render(): TemplateResult {\n    return html`\n      <vaadin-custom-field\n        data-testid=\"field\"\n        .i18n=${this.__i18n}\n        .label=${this.label}\n        .value=${live(this.value)}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .errorMessage=${this.errorMessage}\n        .checkValidity=${this.checkValidity}\n        @change=${this.__handleChange}\n      >\n        <vaadin-integer-field\n          data-testid=\"value\"\n          min=\"1\"\n          max=\"999\"\n          has-controls\n          prevent-invalid-input\n          ?invalid=${!this.checkValidity()}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n        >\n        </vaadin-integer-field>\n\n        <vaadin-combo-box\n          data-testid=\"units\"\n          item-value-path=\"value\"\n          item-label-path=\"label\"\n          .items=${this.__getItems(this.value)}\n          ?invalid=${!this.checkValidity()}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n        >\n        </vaadin-combo-box>\n      </vaadin-custom-field>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    const field = this.renderRoot.firstElementChild as CustomFieldElement;\n    if (field.value !== this.value) field.value = this.value;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.__untrackTranslations?.();\n  }\n\n  checkValidity(): boolean {\n    return true;\n  }\n\n  private get __t() {\n    return customElements.get('foxy-i18n').i18next.getFixedT(this.lang);\n  }\n\n  private __handleChange(evt: CustomEvent<void>) {\n    const field = evt.target as CustomFieldElement;\n    this.value = field.value as string;\n    this.dispatchEvent(new FrequencyInputChangeEvent(this.value));\n  }\n}\n"]}
+{"version":3,"file":"FrequencyInput.js","sourceRoot":"","sources":["../../../../src/elements/private/FrequencyInput/FrequencyInput.ts"],"names":[],"mappings":"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","sourcesContent":["import '@vaadin/vaadin-text-field/vaadin-integer-field';\nimport '@vaadin/vaadin-custom-field';\nimport '@vaadin/vaadin-combo-box';\nimport '../../public/I18n/index';\n\nimport {\n  CSSResult,\n  CSSResultArray,\n  LitElement,\n  PropertyDeclarations,\n  TemplateResult,\n  css,\n  html,\n} from 'lit-element';\nimport type { CustomFieldElement, CustomFieldI18n } from '@vaadin/vaadin-custom-field';\n\nimport { FrequencyInputChangeEvent } from './FrequencyInputChangeEvent';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { live } from '@open-wc/lit-helpers';\nimport memoize from 'lodash-es/memoize';\nimport { parseDuration } from '../../../utils/parse-duration';\nimport { InferrableMixin } from '../../../mixins/inferrable';\n\nexport class FrequencyInput extends TranslatableMixin(InferrableMixin(LitElement)) {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      checkValidity: { attribute: false },\n      errorMessage: { type: String, attribute: 'error-message' },\n      disabled: { type: Boolean, reflect: true },\n      readonly: { type: Boolean, reflect: true },\n      label: { type: String },\n      value: { type: String },\n    };\n  }\n\n  static get styles(): CSSResult | CSSResultArray {\n    return css`\n      :host {\n        display: block;\n      }\n\n      vaadin-custom-field {\n        width: 100%;\n        font-size: 0;\n        line-height: 0;\n        padding-top: 0 !important;\n      }\n\n      vaadin-custom-field::part(label) {\n        padding-bottom: var(--lumo-space-s);\n      }\n\n      vaadin-custom-field::part(error-message)[aria-hidden='false'] {\n        padding-top: var(--lumo-space-xs);\n      }\n\n      vaadin-integer-field,\n      vaadin-combo-box {\n        width: calc(50% - (var(--lumo-space-s) / 2));\n      }\n\n      vaadin-integer-field {\n        margin-right: var(--lumo-space-s);\n        padding: 0;\n      }\n\n      vaadin-combo-box::part(text-field) {\n        padding: 0;\n      }\n    `;\n  }\n\n  label = '';\n\n  value = '';\n\n  disabled = false;\n\n  readonly = false;\n\n  errorMessage = '';\n\n  private __i18n: CustomFieldI18n = {\n    formatValue: inputValues => inputValues.join(''),\n    parseValue: value => {\n      const { count, units } = parseDuration(value);\n      return [count.toString(), units];\n    },\n  };\n\n  private __getItems = memoize((value: string) => {\n    const count = parseDuration(value).count;\n\n    return [\n      { value: 'd', label: this.t('day', { count }) },\n      { value: 'w', label: this.t('week', { count }) },\n      { value: 'm', label: this.t('month', { count }) },\n      { value: 'y', label: this.t('year', { count }) },\n    ];\n  });\n\n  render(): TemplateResult {\n    return html`\n      <vaadin-custom-field\n        data-testid=\"field\"\n        .i18n=${this.__i18n}\n        .label=${this.label}\n        .value=${live(this.value)}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .errorMessage=${this.errorMessage}\n        .checkValidity=${this.checkValidity}\n        @change=${this.__handleChange}\n      >\n        <vaadin-integer-field\n          data-testid=\"value\"\n          min=\"1\"\n          max=\"999\"\n          has-controls\n          prevent-invalid-input\n          ?invalid=${!this.checkValidity()}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n        >\n        </vaadin-integer-field>\n\n        <vaadin-combo-box\n          data-testid=\"units\"\n          item-value-path=\"value\"\n          item-label-path=\"label\"\n          .items=${this.__getItems(this.value)}\n          ?invalid=${!this.checkValidity()}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n        >\n        </vaadin-combo-box>\n      </vaadin-custom-field>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    const field = this.renderRoot.firstElementChild as CustomFieldElement;\n    if (field.value !== this.value) field.value = this.value;\n  }\n\n  checkValidity(): boolean {\n    return true;\n  }\n\n  private __handleChange(evt: CustomEvent<void>) {\n    const field = evt.target as CustomFieldElement;\n    this.value = field.value as string;\n    this.dispatchEvent(new FrequencyInputChangeEvent(this.value));\n  }\n}\n"]}

package/dist/elements/public/AccessRecoveryForm/AccessRecoveryForm.js

@@ -79,7 +79,7 @@ export class AccessRecoveryForm extends Base {
         ${this.renderTemplateOrSlot('message:before')}
 
         <p class="leading-s flex items-start text-s rounded p-s ${color}">
-          <iron-icon class="flex-shrink-0 mr-s" icon=${icon}></iron-icon>
+          <iron-icon class="flex-shrink-0 icon-inline text-l mr-s" icon=${icon}></iron-icon>
           <foxy-i18n lang=${this.lang} key=${key} ns=${this.ns} data-testid="message"></foxy-i18n>
         </p>
 

package/dist/elements/public/AccessRecoveryForm/AccessRecoveryForm.js.map

@@ -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 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"]}
+{"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"]}

package/dist/elements/public/ApiBrowser/ApiBrowser.d.ts

@@ -0,0 +1,31 @@
+import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import type { Data } from './types';
+import { NucleonElement } from '../NucleonElement/NucleonElement';
+declare const Base: typeof NucleonElement & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+} & {
+    styles: import("lit-element").CSSResultArray;
+};
+/**
+ * Interactive hAPI explorer.
+ *
+ * @element foxy-api-explorer
+ * @since 1.17.0
+ */
+export declare class ApiBrowser extends Base<Data> {
+    static get properties(): PropertyDeclarations;
+    /** Bookmark URL of your API. */
+    home: string | null;
+    private __history;
+    private __debounce;
+    private __renderItem;
+    private __handleExistingResourceFetch;
+    render(): TemplateResult;
+    private get __canGoBack();
+    private get __canGoHome();
+    private get __mode();
+    private set __mode(value);
+    private __goBack;
+    private __goHome;
+}
+export {};

package/dist/elements/public/ApiBrowser/ApiBrowser.js

@@ -0,0 +1,215 @@
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { ThemeableMixin } from "../../../mixins/themeable.js";
+import { NucleonElement } from "../NucleonElement/NucleonElement.js";
+import { html } from 'lit-element';
+import debounce from 'lodash-es/debounce';
+const NS = 'api-browser';
+const Base = ThemeableMixin(TranslatableMixin(NucleonElement, NS));
+/**
+ * Interactive hAPI explorer.
+ *
+ * @element foxy-api-explorer
+ * @since 1.17.0
+ */
+export class ApiBrowser extends Base {
+    constructor() {
+        super(...arguments);
+        /** Bookmark URL of your API. */
+        this.home = null;
+        this.__history = [];
+        this.__debounce = debounce((callback) => callback(), 250);
+        this.__renderItem = ({ href, html }) => {
+            if (!href)
+                return html ``;
+            return html `
+      <foxy-internal-api-browser-resource-form infer="" href=${href}>
+      </foxy-internal-api-browser-resource-form>
+    `;
+        };
+        this.__handleExistingResourceFetch = (evt) => {
+            if (evt.request.method === 'DELETE') {
+                evt.preventDefault();
+                evt.respondWith(new ApiBrowser.API(this).fetch(evt.request).then(response => {
+                    if (response.ok) {
+                        if (this.__canGoBack) {
+                            this.__goBack();
+                        }
+                        else if (this.__canGoHome) {
+                            this.__goHome();
+                        }
+                        else {
+                            this.parent = '';
+                            this.href = '';
+                        }
+                    }
+                    return response;
+                }));
+            }
+        };
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            __history: { attribute: false },
+            home: { type: String },
+        };
+    }
+    render() {
+        var _a;
+        return html `
+      <div class="space-y-m">
+        <div class="flex items-center gap-s flex-wrap-reverse">
+          <vaadin-button
+            title=${this.t('go_back')}
+            theme="icon contrast"
+            class="p-0"
+            ?disabled=${!this.__canGoBack}
+            @click=${() => this.__goBack()}
+          >
+            <iron-icon class="icon-inline text-m" icon="icons:arrow-back"></iron-icon>
+          </vaadin-button>
+
+          <vaadin-button
+            title=${this.t('go_home')}
+            theme="icon contrast"
+            class="p-0"
+            ?disabled=${!this.__canGoHome}
+            @click=${() => this.__goHome()}
+          >
+            <iron-icon class="icon-inline text-m" icon="icons:home"></iron-icon>
+          </vaadin-button>
+
+          <vaadin-text-field
+            placeholder="https://api.foxy.io/stores/0"
+            class="flex-1"
+            .value=${this.href || this.parent}
+            @input=${(evt) => {
+            const field = evt.currentTarget;
+            const value = field.value;
+            const property = this.href ? 'href' : 'parent';
+            this.__debounce(() => (this[property] = value));
+        }}
+          >
+          </vaadin-text-field>
+
+          <vaadin-button
+            title=${this.t('refresh')}
+            theme="icon contrast"
+            class="p-0"
+            ?disabled=${this.in('busy')}
+            @click=${() => this.refresh()}
+          >
+            <iron-icon class="icon-inline text-m" icon="icons:refresh"></iron-icon>
+          </vaadin-button>
+
+          <div class="grid grid-cols-2">
+            <vaadin-button
+              theme=${this.href ? 'contrast primary' : 'contrast'}
+              class="rounded-r-none p-0"
+              ?disabled=${this.__mode === 'get'}
+              @click=${() => (this.__mode = 'get')}
+            >
+              GET
+            </vaadin-button>
+
+            <vaadin-button
+              theme=${this.href ? 'contrast' : 'contrast primary'}
+              class="rounded-l-none p-0"
+              ?disabled=${this.__mode === 'post'}
+              @click=${() => (this.__mode = 'post')}
+            >
+              POST
+            </vaadin-button>
+          </div>
+        </div>
+
+        <div
+          @navigate:get=${(evt) => {
+            evt.stopPropagation();
+            this.__history.push({ href: this.href, parent: this.parent });
+            this.parent = '';
+            this.href = evt.detail;
+        }}
+          @navigate:post=${(evt) => {
+            evt.stopPropagation();
+            this.__history.push({ href: this.href, parent: this.parent });
+            this.parent = evt.detail;
+            this.href = '';
+        }}
+        >
+          ${this.href
+            ? html `
+                ${((_a = this.data) === null || _a === void 0 ? void 0 : _a._links.first) ? html `
+                      <foxy-pagination first=${this.href} infer="">
+                        <foxy-collection-page
+                          class="block space-y-m mb-m"
+                          infer=""
+                          .item=${this.__renderItem}
+                        >
+                        </foxy-collection-page>
+                      </foxy-pagination>
+                    `
+                : html `
+                      <foxy-internal-api-browser-resource-form
+                        infer=""
+                        href=${this.href}
+                        open
+                        @fetch=${this.__handleExistingResourceFetch}
+                      >
+                      </foxy-internal-api-browser-resource-form>
+                    `}
+              `
+            : html `
+                <foxy-internal-api-browser-resource-form
+                  infer=""
+                  parent=${this.parent}
+                  open
+                  @update=${(evt) => {
+                const form = evt.currentTarget;
+                if (form.in({ idle: 'snapshot' })) {
+                    this.href = form.data._links.self.href;
+                    this.parent = '';
+                }
+            }}
+                >
+                </foxy-internal-api-browser-resource-form>
+              `}
+        </div>
+      </div>
+    `;
+    }
+    get __canGoBack() {
+        return this.__history.length > 0;
+    }
+    get __canGoHome() {
+        return this.href !== this.home;
+    }
+    get __mode() {
+        return this.href ? 'get' : 'post';
+    }
+    set __mode(newValue) {
+        if (newValue === 'get') {
+            this.href = this.parent;
+            this.parent = '';
+        }
+        else {
+            this.parent = this.href;
+            this.href = '';
+        }
+    }
+    __goBack() {
+        var _a, _b;
+        const index = this.__history.length - 1;
+        const entry = this.__history[index];
+        this.parent = (_a = entry === null || entry === void 0 ? void 0 : entry.parent) !== null && _a !== void 0 ? _a : '';
+        this.href = (_b = entry === null || entry === void 0 ? void 0 : entry.href) !== null && _b !== void 0 ? _b : '';
+        this.__history = this.__history.slice(0, index);
+    }
+    __goHome() {
+        var _a;
+        this.__history = [];
+        this.parent = '';
+        this.href = (_a = this.home) !== null && _a !== void 0 ? _a : '';
+    }
+}
+//# sourceMappingURL=ApiBrowser.js.map

package/dist/elements/public/ApiBrowser/ApiBrowser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApiBrowser.js","sourceRoot":"","sources":["../../../../src/elements/public/ApiBrowser/ApiBrowser.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { InternalApiBrowserResourceForm } from './internal/InternalApiBrowserResourceForm/InternalApiBrowserResourceForm';\nimport type { ItemRendererContext } from '../CollectionPage/types';\nimport type { FetchEvent } from '../NucleonElement/FetchEvent';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { TextFieldElement } from '@vaadin/vaadin-text-field';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { html } from 'lit-element';\n\nimport debounce from 'lodash-es/debounce';\n\nconst NS = 'api-browser';\nconst Base = ThemeableMixin(TranslatableMixin(NucleonElement, NS));\n\n/**\n * Interactive hAPI explorer.\n *\n * @element foxy-api-explorer\n * @since 1.17.0\n */\nexport class ApiBrowser extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __history: { attribute: false },\n      home: { type: String },\n    };\n  }\n\n  /** Bookmark URL of your API. */\n  home: string | null = null;\n\n  private __history: { href: string; parent: string }[] = [];\n\n  private __debounce = debounce((callback: () => void) => callback(), 250);\n\n  private __renderItem = ({ href, html }: ItemRendererContext<Data>) => {\n    if (!href) return html``;\n    return html`\n      <foxy-internal-api-browser-resource-form infer=\"\" href=${href}>\n      </foxy-internal-api-browser-resource-form>\n    `;\n  };\n\n  private __handleExistingResourceFetch = (evt: FetchEvent) => {\n    if (evt.request.method === 'DELETE') {\n      evt.preventDefault();\n      evt.respondWith(\n        new ApiBrowser.API(this).fetch(evt.request).then(response => {\n          if (response.ok) {\n            if (this.__canGoBack) {\n              this.__goBack();\n            } else if (this.__canGoHome) {\n              this.__goHome();\n            } else {\n              this.parent = '';\n              this.href = '';\n            }\n          }\n\n          return response;\n        })\n      );\n    }\n  };\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"space-y-m\">\n        <div class=\"flex items-center gap-s flex-wrap-reverse\">\n          <vaadin-button\n            title=${this.t('go_back')}\n            theme=\"icon contrast\"\n            class=\"p-0\"\n            ?disabled=${!this.__canGoBack}\n            @click=${() => this.__goBack()}\n          >\n            <iron-icon class=\"icon-inline text-m\" icon=\"icons:arrow-back\"></iron-icon>\n          </vaadin-button>\n\n          <vaadin-button\n            title=${this.t('go_home')}\n            theme=\"icon contrast\"\n            class=\"p-0\"\n            ?disabled=${!this.__canGoHome}\n            @click=${() => this.__goHome()}\n          >\n            <iron-icon class=\"icon-inline text-m\" icon=\"icons:home\"></iron-icon>\n          </vaadin-button>\n\n          <vaadin-text-field\n            placeholder=\"https://api.foxy.io/stores/0\"\n            class=\"flex-1\"\n            .value=${this.href || this.parent}\n            @input=${(evt: CustomEvent) => {\n              const field = evt.currentTarget as TextFieldElement;\n              const value = field.value;\n              const property = this.href ? 'href' : 'parent';\n\n              this.__debounce(() => (this[property] = value));\n            }}\n          >\n          </vaadin-text-field>\n\n          <vaadin-button\n            title=${this.t('refresh')}\n            theme=\"icon contrast\"\n            class=\"p-0\"\n            ?disabled=${this.in('busy')}\n            @click=${() => this.refresh()}\n          >\n            <iron-icon class=\"icon-inline text-m\" icon=\"icons:refresh\"></iron-icon>\n          </vaadin-button>\n\n          <div class=\"grid grid-cols-2\">\n            <vaadin-button\n              theme=${this.href ? 'contrast primary' : 'contrast'}\n              class=\"rounded-r-none p-0\"\n              ?disabled=${this.__mode === 'get'}\n              @click=${() => (this.__mode = 'get')}\n            >\n              GET\n            </vaadin-button>\n\n            <vaadin-button\n              theme=${this.href ? 'contrast' : 'contrast primary'}\n              class=\"rounded-l-none p-0\"\n              ?disabled=${this.__mode === 'post'}\n              @click=${() => (this.__mode = 'post')}\n            >\n              POST\n            </vaadin-button>\n          </div>\n        </div>\n\n        <div\n          @navigate:get=${(evt: CustomEvent<string>) => {\n            evt.stopPropagation();\n            this.__history.push({ href: this.href, parent: this.parent });\n            this.parent = '';\n            this.href = evt.detail;\n          }}\n          @navigate:post=${(evt: CustomEvent<string>) => {\n            evt.stopPropagation();\n            this.__history.push({ href: this.href, parent: this.parent });\n            this.parent = evt.detail;\n            this.href = '';\n          }}\n        >\n          ${this.href\n            ? html`\n                ${this.data?._links.first\n                  ? html`\n                      <foxy-pagination first=${this.href} infer=\"\">\n                        <foxy-collection-page\n                          class=\"block space-y-m mb-m\"\n                          infer=\"\"\n                          .item=${this.__renderItem as any}\n                        >\n                        </foxy-collection-page>\n                      </foxy-pagination>\n                    `\n                  : html`\n                      <foxy-internal-api-browser-resource-form\n                        infer=\"\"\n                        href=${this.href}\n                        open\n                        @fetch=${this.__handleExistingResourceFetch}\n                      >\n                      </foxy-internal-api-browser-resource-form>\n                    `}\n              `\n            : html`\n                <foxy-internal-api-browser-resource-form\n                  infer=\"\"\n                  parent=${this.parent}\n                  open\n                  @update=${(evt: CustomEvent) => {\n                    const form = evt.currentTarget as InternalApiBrowserResourceForm;\n                    if (form.in({ idle: 'snapshot' })) {\n                      this.href = form.data._links.self.href;\n                      this.parent = '';\n                    }\n                  }}\n                >\n                </foxy-internal-api-browser-resource-form>\n              `}\n        </div>\n      </div>\n    `;\n  }\n\n  private get __canGoBack() {\n    return this.__history.length > 0;\n  }\n\n  private get __canGoHome() {\n    return this.href !== this.home;\n  }\n\n  private get __mode() {\n    return this.href ? 'get' : 'post';\n  }\n\n  private set __mode(newValue: 'get' | 'post') {\n    if (newValue === 'get') {\n      this.href = this.parent;\n      this.parent = '';\n    } else {\n      this.parent = this.href;\n      this.href = '';\n    }\n  }\n\n  private __goBack() {\n    const index = this.__history.length - 1;\n    const entry = this.__history[index];\n\n    this.parent = entry?.parent ?? '';\n    this.href = entry?.href ?? '';\n    this.__history = this.__history.slice(0, index);\n  }\n\n  private __goHome() {\n    this.__history = [];\n    this.parent = '';\n    this.href = this.home ?? '';\n  }\n}\n"]}

package/dist/elements/public/ApiBrowser/index.d.ts

@@ -0,0 +1,9 @@
+import '@vaadin/vaadin-text-field';
+import '@vaadin/vaadin-button';
+import '@polymer/iron-icons';
+import '@polymer/iron-icon';
+import '../CollectionPage/index';
+import '../Pagination/index';
+import './internal/InternalApiBrowserResourceForm/index';
+import { ApiBrowser } from './ApiBrowser';
+export { ApiBrowser };

package/dist/elements/public/ApiBrowser/index.js

@@ -0,0 +1,11 @@
+import '@vaadin/vaadin-text-field';
+import '@vaadin/vaadin-button';
+import '@polymer/iron-icons';
+import '@polymer/iron-icon';
+import "../CollectionPage/index.js";
+import "../Pagination/index.js";
+import "./internal/InternalApiBrowserResourceForm/index.js";
+import { ApiBrowser } from "./ApiBrowser.js";
+customElements.define('foxy-api-browser', ApiBrowser);
+export { ApiBrowser };
+//# sourceMappingURL=index.js.map

package/dist/elements/public/ApiBrowser/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/ApiBrowser/index.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AACnC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAE5B,oCAAiC;AACjC,gCAA6B;AAE7B,4DAAyD;AAEzD,OAAO,EAAE,UAAU,EAAE,wBAAqB;AAE1C,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC;AAEtD,OAAO,EAAE,UAAU,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-text-field';\nimport '@vaadin/vaadin-button';\nimport '@polymer/iron-icons';\nimport '@polymer/iron-icon';\n\nimport '../CollectionPage/index';\nimport '../Pagination/index';\n\nimport './internal/InternalApiBrowserResourceForm/index';\n\nimport { ApiBrowser } from './ApiBrowser';\n\ncustomElements.define('foxy-api-browser', ApiBrowser);\n\nexport { ApiBrowser };\n"]}

package/dist/elements/public/ApiBrowser/internal/InternalApiBrowserResourceForm/InternalApiBrowserResourceForm.d.ts

@@ -0,0 +1,25 @@
+import type { CSSResultArray, PropertyDeclarations } from 'lit-element';
+import type { TemplateResult } from 'lit-html';
+import type { NucleonV8N } from '../../../NucleonElement/types';
+import type { Data } from '../../types';
+import { InternalForm } from '../../../../internal/InternalForm/InternalForm';
+declare const InternalApiBrowserResourceForm_base: typeof InternalForm & import("lit-element").Constructor<import("../../../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+};
+export declare class InternalApiBrowserResourceForm extends InternalApiBrowserResourceForm_base<Data> {
+    static get properties(): PropertyDeclarations;
+    static get styles(): CSSResultArray;
+    static get v8n(): NucleonV8N<any>;
+    open: boolean;
+    renderBody(): TemplateResult;
+    updated(changes: Map<keyof this, unknown>): void;
+    protected _fetch<TResult = any>(...args: Parameters<Window['fetch']>): Promise<TResult>;
+    private __setTextAreaHeight;
+    private __renderTitle;
+    private __renderForm;
+    private get __links();
+    private get __formAsString();
+    private set __formAsString(value);
+    private __renderLink;
+}
+export {};