@foxy.io/elements 1.14.2 → 1.15.0-beta.3

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

@@ -0,0 +1,39 @@
+import { Data, Templates } from './types';
+import { TemplateResult } from 'lit-html';
+import { NucleonElement } from '../NucleonElement/NucleonElement';
+import { NucleonV8N } from '../NucleonElement/types';
+declare const Base: typeof NucleonElement & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+} & {
+    styles: import("lit-element").CSSResultArray;
+} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost>;
+/**
+ * Form element for generating codes for coupons or gift cards (`fx:generate_codes`).
+ *
+ * @slot length:before
+ * @slot length:after
+ *
+ * @slot number-of-codes:before
+ * @slot number-of-codes:after
+ *
+ * @slot prefix:before
+ * @slot prefix:after
+ *
+ * @slot generate:before
+ * @slot generate:after
+ *
+ * @element foxy-generate-codes-form
+ * @since 1.15.0
+ */
+export declare class GenerateCodesForm extends Base<Data> {
+    static get v8n(): NucleonV8N<Data>;
+    templates: Templates;
+    render(): TemplateResult;
+    private __getErrorMessage;
+    private __getValidator;
+    private __renderLength;
+    private __renderNumberOfCodes;
+    private __renderPrefix;
+    private __renderGenerate;
+}
+export {};

package/dist/elements/public/GenerateCodesForm/GenerateCodesForm.js

@@ -0,0 +1,197 @@
+import { html } from 'lit-html';
+import { ConfigurableMixin } from "../../../mixins/configurable.js";
+import { NucleonElement } from "../NucleonElement/NucleonElement.js";
+import { ThemeableMixin } from "../../../mixins/themeable.js";
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { classMap } from "../../../utils/class-map.js";
+const NS = 'generate-codes';
+const Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement, NS)));
+/**
+ * Form element for generating codes for coupons or gift cards (`fx:generate_codes`).
+ *
+ * @slot length:before
+ * @slot length:after
+ *
+ * @slot number-of-codes:before
+ * @slot number-of-codes:after
+ *
+ * @slot prefix:before
+ * @slot prefix:after
+ *
+ * @slot generate:before
+ * @slot generate:after
+ *
+ * @element foxy-generate-codes-form
+ * @since 1.15.0
+ */
+export class GenerateCodesForm extends Base {
+    constructor() {
+        super(...arguments);
+        this.templates = {};
+    }
+    static get v8n() {
+        return [
+            ({ number_of_codes: v }) => (v && v > 0) || 'number_of_codes_required',
+            ({ length: v }) => (v && v > 0) || 'length_required',
+        ];
+    }
+    render() {
+        var _a, _b;
+        const { hiddenSelector, lang, ns } = this;
+        const isBusy = this.in('busy');
+        const isFail = this.in('fail');
+        const isSnapshot = this.in({ idle: 'snapshot' });
+        const isTemplate = this.in({ idle: 'template' });
+        const transition = 'transition-opacity duration-500';
+        const hidden = 'opacity-0 pointer-events-none';
+        return html `
+      <div aria-busy=${isBusy} aria-live="polite" class="relative">
+        <div
+          class=${classMap({
+            'grid grid-cols-2 gap-m': true,
+            [transition]: true,
+            [hidden]: isSnapshot,
+        })}
+        >
+          ${hiddenSelector.matches('length', true) ? '' : this.__renderLength()}
+          ${hiddenSelector.matches('number-of-codes', true) ? '' : this.__renderNumberOfCodes()}
+          ${hiddenSelector.matches('prefix', true) ? '' : this.__renderPrefix()}
+          ${hiddenSelector.matches('generate', true) ? '' : this.__renderGenerate()}
+        </div>
+
+        <div
+          class=${classMap({
+            'absolute inset-0 flex flex-col items-center justify-center': true,
+            'text-center text-m text-secondary leading-m': true,
+            [transition]: true,
+            [hidden]: !isSnapshot,
+        })}
+        >
+          <div class="mx-auto flex mb-m w-l h-l rounded-t-l rounded-b-l bg-success">
+            <iron-icon icon="icons:done-all" class="m-auto text-success-contrast"></iron-icon>
+          </div>
+
+          <foxy-i18n class="block" lang=${lang} key="generate_codes_done" ns=${ns}></foxy-i18n>
+        </div>
+
+        <div
+          class=${classMap({
+            'absolute inset-0 flex': true,
+            [transition]: true,
+            [hidden]: !isBusy && !isFail,
+        })}
+        >
+          <foxy-spinner
+            layout="vertical"
+            class="m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l"
+            state=${isFail ? 'error' : isTemplate ? 'empty' : 'busy'}
+            lang=${lang}
+            ns="${ns} ${(_b = (_a = customElements.get('foxy-spinner')) === null || _a === void 0 ? void 0 : _a.defaultNS) !== null && _b !== void 0 ? _b : ''}"
+          >
+          </foxy-spinner>
+        </div>
+      </div>
+    `;
+    }
+    __getErrorMessage(prefix) {
+        const error = this.errors.find(err => err.startsWith(prefix));
+        return error ? this.t(error.replace(prefix, 'v8n')) : '';
+    }
+    __getValidator(prefix) {
+        return () => !this.errors.some(err => err.startsWith(prefix));
+    }
+    __renderLength() {
+        const isTemplate = this.in({ idle: 'template' });
+        return html `
+      ${this.renderTemplateOrSlot('length:before')}
+
+      <vaadin-integer-field
+        error-message=${this.__getErrorMessage('length')}
+        label=${this.t('length')}
+        class="w-full"
+        min="1"
+        ?disabled=${!isTemplate || this.disabledSelector.matches('length', true)}
+        ?readonly=${this.readonlySelector.matches('length', true)}
+        prevent-invalid-input
+        has-controls
+        .checkValidity=${this.__getValidator('length')}
+        .value=${isTemplate ? this.form.length : ''}
+        @change=${(evt) => {
+            const field = evt.currentTarget;
+            this.edit({ length: parseInt(field.value) });
+        }}
+      >
+      </vaadin-integer-field>
+
+      ${this.renderTemplateOrSlot('length:after')}
+    `;
+    }
+    __renderNumberOfCodes() {
+        const isTemplate = this.in({ idle: 'template' });
+        return html `
+      ${this.renderTemplateOrSlot('number-of-codes:before')}
+
+      <vaadin-integer-field
+        error-message=${this.__getErrorMessage('number_of_codes')}
+        label=${this.t('number_of_codes')}
+        class="w-full"
+        min="1"
+        ?disabled=${!isTemplate || this.disabledSelector.matches('number-of-codes', true)}
+        ?readonly=${this.readonlySelector.matches('number-of-codes', true)}
+        prevent-invalid-input
+        has-controls
+        .checkValidity=${this.__getValidator('number_of_codes')}
+        .value=${isTemplate ? this.form.number_of_codes : ''}
+        @change=${(evt) => {
+            const field = evt.currentTarget;
+            this.edit({ number_of_codes: parseInt(field.value) });
+        }}
+      >
+      </vaadin-integer-field>
+
+      ${this.renderTemplateOrSlot('number-of-codes:after')}
+    `;
+    }
+    __renderPrefix() {
+        const isTemplate = this.in({ idle: 'template' });
+        return html `
+      ${this.renderTemplateOrSlot('prefix:before')}
+
+      <vaadin-text-field
+        helper-text=${this.t('leave_empty_for_random_codes')}
+        label=${this.t('prefix')}
+        class="col-span-2"
+        min="1"
+        ?disabled=${!isTemplate || this.disabledSelector.matches('prefix', true)}
+        ?readonly=${this.readonlySelector.matches('prefix', true)}
+        clear-button-visible
+        .value=${isTemplate ? this.form.prefix : ''}
+        @change=${(evt) => {
+            const field = evt.currentTarget;
+            this.edit({ prefix: field.value });
+        }}
+      >
+      </vaadin-text-field>
+
+      ${this.renderTemplateOrSlot('prefix:after')}
+    `;
+    }
+    __renderGenerate() {
+        const isValidTemplate = this.in({ idle: { template: { dirty: 'valid' } } });
+        return html `
+      ${this.renderTemplateOrSlot('generate:before')}
+
+      <vaadin-button
+        class="col-span-2"
+        theme="success primary"
+        ?disabled=${!isValidTemplate || this.disabledSelector.matches('generate', true)}
+        @click=${this.submit}
+      >
+        <foxy-i18n lang=${this.lang} key="generate" ns=${this.ns}></foxy-i18n>
+      </vaadin-button>
+
+      ${this.renderTemplateOrSlot('create:after')}
+    `;
+    }
+}
+//# sourceMappingURL=GenerateCodesForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GenerateCodesForm.js","sourceRoot":"","sources":["../../../../src/elements/public/GenerateCodesForm/GenerateCodesForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates } from './types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { IntegerFieldElement } from '@vaadin/vaadin-text-field/vaadin-integer-field';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { NucleonV8N } from '../NucleonElement/types';\nimport { TextFieldElement } from '@vaadin/vaadin-text-field/vaadin-text-field';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'generate-codes';\nconst Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement, NS)));\n\n/**\n * Form element for generating codes for coupons or gift cards (`fx:generate_codes`).\n *\n * @slot length:before\n * @slot length:after\n *\n * @slot number-of-codes:before\n * @slot number-of-codes:after\n *\n * @slot prefix:before\n * @slot prefix:after\n *\n * @slot generate:before\n * @slot generate:after\n *\n * @element foxy-generate-codes-form\n * @since 1.15.0\n */\nexport class GenerateCodesForm extends Base<Data> {\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ number_of_codes: v }) => (v && v > 0) || 'number_of_codes_required',\n      ({ length: v }) => (v && v > 0) || 'length_required',\n    ];\n  }\n\n  templates: Templates = {};\n\n  render(): TemplateResult {\n    const { hiddenSelector, lang, ns } = this;\n\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\n    const isSnapshot = this.in({ idle: 'snapshot' });\n    const isTemplate = this.in({ idle: 'template' });\n\n    const transition = 'transition-opacity duration-500';\n    const hidden = 'opacity-0 pointer-events-none';\n\n    return html`\n      <div aria-busy=${isBusy} aria-live=\"polite\" class=\"relative\">\n        <div\n          class=${classMap({\n            'grid grid-cols-2 gap-m': true,\n            [transition]: true,\n            [hidden]: isSnapshot,\n          })}\n        >\n          ${hiddenSelector.matches('length', true) ? '' : this.__renderLength()}\n          ${hiddenSelector.matches('number-of-codes', true) ? '' : this.__renderNumberOfCodes()}\n          ${hiddenSelector.matches('prefix', true) ? '' : this.__renderPrefix()}\n          ${hiddenSelector.matches('generate', true) ? '' : this.__renderGenerate()}\n        </div>\n\n        <div\n          class=${classMap({\n            'absolute inset-0 flex flex-col items-center justify-center': true,\n            'text-center text-m text-secondary leading-m': true,\n            [transition]: true,\n            [hidden]: !isSnapshot,\n          })}\n        >\n          <div class=\"mx-auto flex mb-m w-l h-l rounded-t-l rounded-b-l bg-success\">\n            <iron-icon icon=\"icons:done-all\" class=\"m-auto text-success-contrast\"></iron-icon>\n          </div>\n\n          <foxy-i18n class=\"block\" lang=${lang} key=\"generate_codes_done\" ns=${ns}></foxy-i18n>\n        </div>\n\n        <div\n          class=${classMap({\n            'absolute inset-0 flex': true,\n            [transition]: true,\n            [hidden]: !isBusy && !isFail,\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=${isFail ? 'error' : isTemplate ? 'empty' : 'busy'}\n            lang=${lang}\n            ns=\"${ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  private __getErrorMessage(prefix: string) {\n    const error = this.errors.find(err => err.startsWith(prefix));\n    return error ? this.t(error.replace(prefix, 'v8n')) : '';\n  }\n\n  private __getValidator(prefix: string) {\n    return () => !this.errors.some(err => err.startsWith(prefix));\n  }\n\n  private __renderLength() {\n    const isTemplate = this.in({ idle: 'template' });\n\n    return html`\n      ${this.renderTemplateOrSlot('length:before')}\n\n      <vaadin-integer-field\n        error-message=${this.__getErrorMessage('length')}\n        label=${this.t('length')}\n        class=\"w-full\"\n        min=\"1\"\n        ?disabled=${!isTemplate || this.disabledSelector.matches('length', true)}\n        ?readonly=${this.readonlySelector.matches('length', true)}\n        prevent-invalid-input\n        has-controls\n        .checkValidity=${this.__getValidator('length')}\n        .value=${isTemplate ? this.form.length : ''}\n        @change=${(evt: CustomEvent) => {\n          const field = evt.currentTarget as IntegerFieldElement;\n          this.edit({ length: parseInt(field.value) });\n        }}\n      >\n      </vaadin-integer-field>\n\n      ${this.renderTemplateOrSlot('length:after')}\n    `;\n  }\n\n  private __renderNumberOfCodes() {\n    const isTemplate = this.in({ idle: 'template' });\n\n    return html`\n      ${this.renderTemplateOrSlot('number-of-codes:before')}\n\n      <vaadin-integer-field\n        error-message=${this.__getErrorMessage('number_of_codes')}\n        label=${this.t('number_of_codes')}\n        class=\"w-full\"\n        min=\"1\"\n        ?disabled=${!isTemplate || this.disabledSelector.matches('number-of-codes', true)}\n        ?readonly=${this.readonlySelector.matches('number-of-codes', true)}\n        prevent-invalid-input\n        has-controls\n        .checkValidity=${this.__getValidator('number_of_codes')}\n        .value=${isTemplate ? this.form.number_of_codes : ''}\n        @change=${(evt: CustomEvent) => {\n          const field = evt.currentTarget as IntegerFieldElement;\n          this.edit({ number_of_codes: parseInt(field.value) });\n        }}\n      >\n      </vaadin-integer-field>\n\n      ${this.renderTemplateOrSlot('number-of-codes:after')}\n    `;\n  }\n\n  private __renderPrefix() {\n    const isTemplate = this.in({ idle: 'template' });\n\n    return html`\n      ${this.renderTemplateOrSlot('prefix:before')}\n\n      <vaadin-text-field\n        helper-text=${this.t('leave_empty_for_random_codes')}\n        label=${this.t('prefix')}\n        class=\"col-span-2\"\n        min=\"1\"\n        ?disabled=${!isTemplate || this.disabledSelector.matches('prefix', true)}\n        ?readonly=${this.readonlySelector.matches('prefix', true)}\n        clear-button-visible\n        .value=${isTemplate ? this.form.prefix : ''}\n        @change=${(evt: CustomEvent) => {\n          const field = evt.currentTarget as TextFieldElement;\n          this.edit({ prefix: field.value });\n        }}\n      >\n      </vaadin-text-field>\n\n      ${this.renderTemplateOrSlot('prefix:after')}\n    `;\n  }\n\n  private __renderGenerate() {\n    const isValidTemplate = this.in({ idle: { template: { dirty: 'valid' } } });\n\n    return html`\n      ${this.renderTemplateOrSlot('generate:before')}\n\n      <vaadin-button\n        class=\"col-span-2\"\n        theme=\"success primary\"\n        ?disabled=${!isValidTemplate || this.disabledSelector.matches('generate', true)}\n        @click=${this.submit}\n      >\n        <foxy-i18n lang=${this.lang} key=\"generate\" ns=${this.ns}></foxy-i18n>\n      </vaadin-button>\n\n      ${this.renderTemplateOrSlot('create:after')}\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,8 @@
+import '@vaadin/vaadin-text-field/vaadin-integer-field';
+import '@vaadin/vaadin-text-field/vaadin-text-field';
+import '@vaadin/vaadin-button';
+import '../../internal/InternalSandbox/index';
+import '../Spinner/index';
+import '../I18n/index';
+import { GenerateCodesForm } from './GenerateCodesForm';
+export { GenerateCodesForm };

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

@@ -0,0 +1,10 @@
+import '@vaadin/vaadin-text-field/vaadin-integer-field';
+import '@vaadin/vaadin-text-field/vaadin-text-field';
+import '@vaadin/vaadin-button';
+import "../../internal/InternalSandbox/index.js";
+import "../Spinner/index.js";
+import "../I18n/index.js";
+import { GenerateCodesForm } from "./GenerateCodesForm.js";
+customElements.define('foxy-generate-codes-form', GenerateCodesForm);
+export { GenerateCodesForm };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/GenerateCodesForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,gDAAgD,CAAC;AACxD,OAAO,6CAA6C,CAAC;AACrD,OAAO,uBAAuB,CAAC;AAC/B,iDAA8C;AAC9C,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,iBAAiB,EAAE,+BAA4B;AAExD,cAAc,CAAC,MAAM,CAAC,0BAA0B,EAAE,iBAAiB,CAAC,CAAC;AAErE,OAAO,EAAE,iBAAiB,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-text-field/vaadin-integer-field';\nimport '@vaadin/vaadin-text-field/vaadin-text-field';\nimport '@vaadin/vaadin-button';\nimport '../../internal/InternalSandbox/index';\nimport '../Spinner/index';\nimport '../I18n/index';\n\nimport { GenerateCodesForm } from './GenerateCodesForm';\n\ncustomElements.define('foxy-generate-codes-form', GenerateCodesForm);\n\nexport { GenerateCodesForm };\n"]}

package/dist/elements/public/GenerateCodesForm/types.d.ts

@@ -0,0 +1,24 @@
+import { GenerateCodesForm } from '.';
+import { Rels } from '@foxy.io/sdk/backend';
+import { Renderer } from '../../../mixins/configurable';
+import { Resource } from '@foxy.io/sdk/core';
+export declare type Data = Resource<Rels.GenerateCodes> & {
+    /** Present only in the response. */
+    _links: {
+        self: {
+            href: string;
+        };
+    };
+    /** Present only in the response. */
+    message: string;
+};
+export declare type Templates = {
+    'length:before'?: Renderer<GenerateCodesForm>;
+    'length:after'?: Renderer<GenerateCodesForm>;
+    'number-of-codes:before'?: Renderer<GenerateCodesForm>;
+    'number-of-codes:after'?: Renderer<GenerateCodesForm>;
+    'prefix:before'?: Renderer<GenerateCodesForm>;
+    'prefix:after'?: Renderer<GenerateCodesForm>;
+    'generate:before'?: Renderer<GenerateCodesForm>;
+    'generate:after'?: Renderer<GenerateCodesForm>;
+};

package/dist/elements/public/GenerateCodesForm/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/elements/public/GenerateCodesForm/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/GenerateCodesForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import { GenerateCodesForm } from '.';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Renderer } from '../../../mixins/configurable';\nimport { Resource } from '@foxy.io/sdk/core';\n\nexport type Data = Resource<Rels.GenerateCodes> & {\n  /** Present only in the response. */\n  _links: { self: { href: string } };\n  /** Present only in the response. */\n  message: string;\n};\n\nexport type Templates = {\n  'length:before'?: Renderer<GenerateCodesForm>;\n  'length:after'?: Renderer<GenerateCodesForm>;\n  'number-of-codes:before'?: Renderer<GenerateCodesForm>;\n  'number-of-codes:after'?: Renderer<GenerateCodesForm>;\n  'prefix:before'?: Renderer<GenerateCodesForm>;\n  'prefix:after'?: Renderer<GenerateCodesForm>;\n  'generate:before'?: Renderer<GenerateCodesForm>;\n  'generate:after'?: Renderer<GenerateCodesForm>;\n};\n"]}

package/dist/elements/public/I18n/format/date.js

@@ -2,12 +2,13 @@
  * i18next formatter that localizes ISO date.
  * @see https://www.i18next.com/translation-function/formatting
  */
-export const date = (value, format, lang) => {
+export const date = (value, _, lang) => {
+    if (!value)
+        return '$t(unknown)';
     const valueAsDate = new Date(value);
-    return valueAsDate.toLocaleDateString(lang, {
-        month: 'long',
-        year: new Date().getFullYear() === valueAsDate.getFullYear() ? undefined : 'numeric',
-        day: 'numeric',
-    });
+    const month = 'long';
+    const year = new Date().getFullYear() === valueAsDate.getFullYear() ? undefined : 'numeric';
+    const day = 'numeric';
+    return valueAsDate.toLocaleDateString(lang, { month, year, day });
 };
 //# sourceMappingURL=date.js.map

package/dist/elements/public/I18n/format/date.js.map

@@ -1 +1 @@
-{"version":3,"file":"date.js","sourceRoot":"","sources":["../../../../../src/elements/public/I18n/format/date.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,IAAI,GAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAU,EAAE;IAClE,MAAM,WAAW,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IACpC,OAAO,WAAW,CAAC,kBAAkB,CAAC,IAAI,EAAE;QAC1C,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,KAAK,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QACpF,GAAG,EAAE,SAAS;KACf,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["import { FormatFunction } from 'i18next';\n\n/**\n * i18next formatter that localizes ISO date.\n * @see https://www.i18next.com/translation-function/formatting\n */\nexport const date: FormatFunction = (value, format, lang): string => {\n  const valueAsDate = new Date(value);\n  return valueAsDate.toLocaleDateString(lang, {\n    month: 'long',\n    year: new Date().getFullYear() === valueAsDate.getFullYear() ? undefined : 'numeric',\n    day: 'numeric',\n  });\n};\n"]}
+{"version":3,"file":"date.js","sourceRoot":"","sources":["../../../../../src/elements/public/I18n/format/date.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,IAAI,GAAmB,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAU,EAAE;IAC7D,IAAI,CAAC,KAAK;QAAE,OAAO,aAAa,CAAC;IAEjC,MAAM,WAAW,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IACpC,MAAM,KAAK,GAAG,MAAM,CAAC;IACrB,MAAM,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,KAAK,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5F,MAAM,GAAG,GAAG,SAAS,CAAC;IAEtB,OAAO,WAAW,CAAC,kBAAkB,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;AACpE,CAAC,CAAC","sourcesContent":["import { FormatFunction } from 'i18next';\n\n/**\n * i18next formatter that localizes ISO date.\n * @see https://www.i18next.com/translation-function/formatting\n */\nexport const date: FormatFunction = (value, _, lang): string => {\n  if (!value) return '$t(unknown)';\n\n  const valueAsDate = new Date(value);\n  const month = 'long';\n  const year = new Date().getFullYear() === valueAsDate.getFullYear() ? undefined : 'numeric';\n  const day = 'numeric';\n\n  return valueAsDate.toLocaleDateString(lang, { month, year, day });\n};\n"]}

package/dist/elements/public/I18n/format/discount.d.ts

@@ -0,0 +1,6 @@
+import { FormatFunction } from 'i18next';
+/**
+ * i18next formatter that returns a human-readable discount description for an API value.
+ * @see https://www.i18next.com/translation-function/formatting
+ */
+export declare const discount: FormatFunction;

package/dist/elements/public/I18n/format/discount.js

@@ -0,0 +1,20 @@
+/**
+ * i18next formatter that returns a human-readable discount description for an API value.
+ * @see https://www.i18next.com/translation-function/formatting
+ */
+export const discount = ({ type, details }, format, lang) => {
+    const methods = ['allunits', 'incremental', 'repeat', 'single'];
+    const factor = type.endsWith('_percentage') ? 0.01 : 1;
+    const tiers = details.split('|');
+    const method = methods.includes(tiers[0]) ? tiers.shift() : 'single';
+    const i18nKey = `${method}_${type}_discount_summary`;
+    const translatedTiers = tiers.map(tier => {
+        var _a, _b;
+        const signIndex = (_b = (_a = /[-+]/.exec(tier)) === null || _a === void 0 ? void 0 : _a.index) !== null && _b !== void 0 ? _b : -1;
+        const adjustment = parseFloat(tier.substring(signIndex)) * factor;
+        const from = parseFloat(tier.substring(0, signIndex));
+        return `$t(${i18nKey}, ${JSON.stringify({ adjustment, from })})`;
+    });
+    return translatedTiers.join('; ');
+};
+//# sourceMappingURL=discount.js.map

package/dist/elements/public/I18n/format/discount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"discount.js","sourceRoot":"","sources":["../../../../../src/elements/public/I18n/format/discount.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAmB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAS,EAAE,MAAM,EAAE,IAAI,EAAU,EAAE;IACzF,MAAM,OAAO,GAAG,CAAC,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAChE,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IACvD,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACjC,MAAM,MAAM,GAAG,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;IACrE,MAAM,OAAO,GAAG,GAAG,MAAM,IAAI,IAAI,mBAAmB,CAAC;IAErD,MAAM,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;;QACvC,MAAM,SAAS,eAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,0CAAE,KAAK,mCAAI,CAAC,CAAC,CAAC;QACjD,MAAM,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC;QAClE,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC;QAEtD,OAAO,MAAM,OAAO,KAAK,IAAI,CAAC,SAAS,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,GAAG,CAAC;IACnE,CAAC,CAAC,CAAC;IAEH,OAAO,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACpC,CAAC,CAAC","sourcesContent":["import { FormatFunction } from 'i18next';\n\ntype Value = { type: string; details: string };\n\n/**\n * i18next formatter that returns a human-readable discount description for an API value.\n * @see https://www.i18next.com/translation-function/formatting\n */\nexport const discount: FormatFunction = ({ type, details }: Value, format, lang): string => {\n  const methods = ['allunits', 'incremental', 'repeat', 'single'];\n  const factor = type.endsWith('_percentage') ? 0.01 : 1;\n  const tiers = details.split('|');\n  const method = methods.includes(tiers[0]) ? tiers.shift() : 'single';\n  const i18nKey = `${method}_${type}_discount_summary`;\n\n  const translatedTiers = tiers.map(tier => {\n    const signIndex = /[-+]/.exec(tier)?.index ?? -1;\n    const adjustment = parseFloat(tier.substring(signIndex)) * factor;\n    const from = parseFloat(tier.substring(0, signIndex));\n\n    return `$t(${i18nKey}, ${JSON.stringify({ adjustment, from })})`;\n  });\n\n  return translatedTiers.join('; ');\n};\n"]}

package/dist/elements/public/I18n/format/index.js

@@ -1,9 +1,13 @@
 import { date } from "./date.js";
+import { discount } from "./discount.js";
+import { ordinal } from "./ordinal.js";
 import { percent } from "./percent.js";
 import { price } from "./price.js";
 import { time } from "./time.js";
 const formatters = {
+    discount,
     percent,
+    ordinal,
     price,
     date,
     time,

package/dist/elements/public/I18n/format/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/elements/public/I18n/format/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,kBAAe;AAC9B,OAAO,EAAE,OAAO,EAAE,qBAAkB;AACpC,OAAO,EAAE,KAAK,EAAE,mBAAgB;AAChC,OAAO,EAAE,IAAI,EAAE,kBAAe;AAE9B,MAAM,UAAU,GAAmC;IACjD,OAAO;IACP,KAAK;IACL,IAAI;IACJ,IAAI;CACL,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAmB,CAAC,KAAK,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,GAAG,IAAI,EAAE,IAAI,GAAG,EAAE,EAAU,EAAE;IAC1F,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;IAC7D,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,IAAY,EAAE,EAAE;;QACnD,mBAAO,UAAU,CAAC,IAAI,CAAC,+CAAhB,UAAU,EAAS,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,oCAAK,MAAM,CAAC;IAChE,CAAC,CAAC;IAEF,OAAO,WAAW,CAAC,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AAChD,CAAC,CAAC","sourcesContent":["import { FormatFunction } from 'i18next';\nimport { date } from './date';\nimport { percent } from './percent';\nimport { price } from './price';\nimport { time } from './time';\n\nconst formatters: Record<string, FormatFunction> = {\n  percent,\n  price,\n  date,\n  time,\n};\n\n/**\n * Chooses the right i18next formatter for the given template.\n * @see https://www.i18next.com/translation-function/formatting\n */\nexport const format: FormatFunction = (value, names = '', lang = 'en', opts = {}): string => {\n  const parsedNames = names.split(' ').filter(v => !!v.trim());\n  const applyFormat = (result: string, name: string) => {\n    return formatters[name]?.(result, name, lang, opts) ?? result;\n  };\n\n  return parsedNames.reduce(applyFormat, value);\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/elements/public/I18n/format/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,kBAAe;AAC9B,OAAO,EAAE,QAAQ,EAAE,sBAAmB;AACtC,OAAO,EAAE,OAAO,EAAE,qBAAkB;AACpC,OAAO,EAAE,OAAO,EAAE,qBAAkB;AACpC,OAAO,EAAE,KAAK,EAAE,mBAAgB;AAChC,OAAO,EAAE,IAAI,EAAE,kBAAe;AAE9B,MAAM,UAAU,GAAmC;IACjD,QAAQ;IACR,OAAO;IACP,OAAO;IACP,KAAK;IACL,IAAI;IACJ,IAAI;CACL,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAmB,CAAC,KAAK,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,GAAG,IAAI,EAAE,IAAI,GAAG,EAAE,EAAU,EAAE;IAC1F,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;IAC7D,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,IAAY,EAAE,EAAE;;QACnD,mBAAO,UAAU,CAAC,IAAI,CAAC,+CAAhB,UAAU,EAAS,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,oCAAK,MAAM,CAAC;IAChE,CAAC,CAAC;IAEF,OAAO,WAAW,CAAC,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AAChD,CAAC,CAAC","sourcesContent":["import { FormatFunction } from 'i18next';\nimport { date } from './date';\nimport { discount } from './discount';\nimport { ordinal } from './ordinal';\nimport { percent } from './percent';\nimport { price } from './price';\nimport { time } from './time';\n\nconst formatters: Record<string, FormatFunction> = {\n  discount,\n  percent,\n  ordinal,\n  price,\n  date,\n  time,\n};\n\n/**\n * Chooses the right i18next formatter for the given template.\n * @see https://www.i18next.com/translation-function/formatting\n */\nexport const format: FormatFunction = (value, names = '', lang = 'en', opts = {}): string => {\n  const parsedNames = names.split(' ').filter(v => !!v.trim());\n  const applyFormat = (result: string, name: string) => {\n    return formatters[name]?.(result, name, lang, opts) ?? result;\n  };\n\n  return parsedNames.reduce(applyFormat, value);\n};\n"]}

package/dist/elements/public/I18n/format/ordinal.d.ts

@@ -0,0 +1,6 @@
+import { FormatFunction } from 'i18next';
+/**
+ * i18next formatter that returns ordinal for a number.
+ * @see https://www.i18next.com/translation-function/formatting
+ */
+export declare const ordinal: FormatFunction;

package/dist/elements/public/I18n/format/ordinal.js

@@ -0,0 +1,9 @@
+/**
+ * i18next formatter that returns ordinal for a number.
+ * @see https://www.i18next.com/translation-function/formatting
+ */
+export const ordinal = (value, format, lang) => {
+    const rules = new Intl.PluralRules(lang, { type: 'ordinal' });
+    return `${value}$t(ordinal_${rules.select(value)})`;
+};
+//# sourceMappingURL=ordinal.js.map

package/dist/elements/public/I18n/format/ordinal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ordinal.js","sourceRoot":"","sources":["../../../../../src/elements/public/I18n/format/ordinal.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,OAAO,GAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAU,EAAE;IACrE,MAAM,KAAK,GAAG,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;IAC9D,OAAO,GAAG,KAAK,cAAc,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC;AACtD,CAAC,CAAC","sourcesContent":["import { FormatFunction } from 'i18next';\n\n/**\n * i18next formatter that returns ordinal for a number.\n * @see https://www.i18next.com/translation-function/formatting\n */\nexport const ordinal: FormatFunction = (value, format, lang): string => {\n  const rules = new Intl.PluralRules(lang, { type: 'ordinal' });\n  return `${value}$t(ordinal_${rules.select(value)})`;\n};\n"]}

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

@@ -0,0 +1,37 @@
+import { LitElement, PropertyDeclarations, TemplateResult } from 'lit-element';
+declare const Base: typeof LitElement & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+} & {
+    styles: import("lit-element").CSSResultArray;
+} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost>;
+/**
+ * Helper element that adds pagination controls to elements
+ * representing Hypermedia API collection pages. Works with NucleonElement instances only.
+ * Page element **MUST** be a direct descendant of `foxy-pagination`.
+ *
+ * @example
+ * ```html
+ * <foxy-pagination first="https://demo.api/hapi/customers?limit=3">
+ *   <foxy-customers-table></foxy-customers-table>
+ * </foxy-pagination>
+ * ```
+ *
+ * @element foxy-pagination
+ * @since 1.15.0
+ */
+export declare class Pagination extends Base {
+    static get properties(): PropertyDeclarations;
+    private __pageElement;
+    private __rerender;
+    private __first;
+    /** URL of the first page of the colletion. */
+    get first(): string;
+    set first(newValue: string);
+    connectedCallback(): void;
+    render(): TemplateResult;
+    disconnectedCallback(): void;
+    private __goTo;
+    private __disconnectPageElement;
+    private __connectPageElement;
+}
+export {};

package/dist/elements/public/Pagination/Pagination.js

@@ -0,0 +1,154 @@
+import { LitElement, html } from 'lit-element';
+import { ConfigurableMixin } from "../../../mixins/configurable.js";
+import { NucleonElement } from "../NucleonElement/NucleonElement.js";
+import { ResponsiveMixin } from "../../../mixins/responsive.js";
+import { ThemeableMixin } from "../../../mixins/themeable.js";
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { classMap } from "../../../utils/class-map.js";
+import get from 'lodash-es/get';
+const NS = 'pagination';
+const Base = ResponsiveMixin(ConfigurableMixin(ThemeableMixin(TranslatableMixin(LitElement, NS))));
+/**
+ * Helper element that adds pagination controls to elements
+ * representing Hypermedia API collection pages. Works with NucleonElement instances only.
+ * Page element **MUST** be a direct descendant of `foxy-pagination`.
+ *
+ * @example
+ * ```html
+ * <foxy-pagination first="https://demo.api/hapi/customers?limit=3">
+ *   <foxy-customers-table></foxy-customers-table>
+ * </foxy-pagination>
+ * ```
+ *
+ * @element foxy-pagination
+ * @since 1.15.0
+ */
+export class Pagination extends Base {
+    constructor() {
+        super(...arguments);
+        this.__pageElement = null;
+        this.__rerender = () => this.requestUpdate();
+        this.__first = '';
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            first: { type: String },
+            __pageElement: { attribute: false },
+        };
+    }
+    /** URL of the first page of the colletion. */
+    get first() {
+        return this.__first;
+    }
+    set first(newValue) {
+        this.__first = newValue;
+        if (this.__pageElement)
+            this.__pageElement.href = newValue;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.__connectPageElement();
+    }
+    render() {
+        var _a;
+        const data = (_a = this.__pageElement) === null || _a === void 0 ? void 0 : _a.data;
+        const { disabled, lang, ns } = this;
+        const returnedItemsValue = Number(get(data, 'returned_items'));
+        const returnedItems = Number.isNaN(returnedItemsValue) ? 0 : returnedItemsValue;
+        const totalItemsValue = Number(get(data, 'total_items'));
+        const totalItems = Number.isNaN(totalItemsValue) ? 0 : totalItemsValue;
+        const offsetValue = Number(get(data, 'offset'));
+        const offset = Number.isNaN(offsetValue) ? 0 : offsetValue;
+        const canGoBack = !disabled && offset > 0;
+        const canGoForth = !disabled && offset + returnedItems < totalItems;
+        const labelClass = 'sr-only sm-not-sr-only';
+        return html `
+      <slot @slotchange=${this.__connectPageElement}></slot>
+
+      <div class="grid grid-cols-3 gap-s items-center">
+        <div class="flex items-center space-x-s">
+          <vaadin-button
+            theme="contrast tertiary-inline"
+            ?disabled=${!canGoBack}
+            @click=${() => this.__goTo('first')}
+          >
+            <iron-icon class="icon-inline text-s" icon="icons:first-page"></iron-icon>
+            <foxy-i18n class=${labelClass} lang=${lang} key="first" ns=${ns}></foxy-i18n>
+          </vaadin-button>
+
+          <vaadin-button
+            theme="contrast tertiary-inline"
+            ?disabled=${!canGoBack}
+            @click=${() => this.__goTo('prev')}
+          >
+            <iron-icon class="icon-inline text-s" icon="icons:chevron-left"></iron-icon>
+            <foxy-i18n class=${labelClass} lang=${lang} key="previous" ns=${ns}></foxy-i18n>
+          </vaadin-button>
+        </div>
+
+        <foxy-i18n
+          options=${JSON.stringify({
+            total: totalItems,
+            from: offset ? offset + 1 : 0,
+            to: offset + returnedItems,
+        })}
+          class=${classMap({
+            'flex-1 text-xs text-tertiary text-center leading-xs': true,
+            'opacity-0': !data,
+        })}
+          lang=${lang}
+          key="pagination"
+          ns=${ns}
+        >
+        </foxy-i18n>
+
+        <div class="flex items-center justify-end space-x-s">
+          <vaadin-button
+            theme="contrast tertiary-inline"
+            ?disabled=${!canGoForth}
+            @click=${() => this.__goTo('next')}
+          >
+            <foxy-i18n class=${labelClass} lang=${lang} key="next" ns=${ns}></foxy-i18n>
+            <iron-icon class="icon-inline text-s" icon="icons:chevron-right"></iron-icon>
+          </vaadin-button>
+
+          <vaadin-button
+            theme="contrast tertiary-inline"
+            ?disabled=${!canGoForth}
+            @click=${() => this.__goTo('last')}
+          >
+            <foxy-i18n class=${labelClass} lang=${lang} key="last" ns=${ns}></foxy-i18n>
+            <iron-icon class="icon-inline text-s" icon="icons:last-page"></iron-icon>
+          </vaadin-button>
+        </div>
+      </div>
+    `;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.__disconnectPageElement();
+    }
+    __goTo(rel) {
+        var _a;
+        this.__pageElement.href = String(get((_a = this.__pageElement) === null || _a === void 0 ? void 0 : _a.data, `_links.${rel}.href`));
+    }
+    __disconnectPageElement() {
+        var _a;
+        (_a = this.__pageElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('update', this.__rerender);
+        this.__pageElement = null;
+    }
+    __connectPageElement() {
+        var _a;
+        this.__disconnectPageElement();
+        const slot = this.renderRoot.querySelector('slot');
+        const assignedElements = (_a = slot === null || slot === void 0 ? void 0 : slot.assignedElements()) !== null && _a !== void 0 ? _a : [];
+        const firstNucleonElement = assignedElements.find(el => el instanceof NucleonElement);
+        if (firstNucleonElement) {
+            this.__pageElement = firstNucleonElement;
+            this.__pageElement.addEventListener('update', this.__rerender);
+            this.__pageElement.href = this.first;
+        }
+    }
+}
+//# sourceMappingURL=Pagination.js.map