@foxy.io/elements 1.15.0-beta.1 → 1.15.0-beta.10

package/dist/elements/public/CouponCodesForm/CouponCodesForm.js

@@ -0,0 +1,218 @@
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { html } from 'lit-html';
+import { ConfigurableMixin } from "../../../mixins/configurable.js";
+import { EditableList } from "../../private/EditableList/EditableList.js";
+import { Group } from "../../private/Group/Group.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 = 'coupon-codes-form';
+const Base = ConfigurableMixin(ThemeableMixin(ScopedElementsMixin(TranslatableMixin(NucleonElement, NS))));
+/**
+ * Form element for importing coupon codes (`fx:coupon_codes`).
+ *
+ * @slot codes:before
+ * @slot codes:after
+ *
+ * @slot import:before
+ * @slot import:after
+ *
+ * @element foxy-coupon-codes-form
+ * @since 1.15.0
+ */
+export class CouponCodesForm extends Base {
+    constructor() {
+        super(...arguments);
+        this.templates = {};
+    }
+    static get scopedElements() {
+        return {
+            'vaadin-button': customElements.get('vaadin-button'),
+            'iron-icon': customElements.get('iron-icon'),
+            'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),
+            'foxy-spinner': customElements.get('foxy-spinner'),
+            'foxy-i18n': customElements.get('foxy-i18n'),
+            'x-editable-list': EditableList,
+            'x-group': Group,
+        };
+    }
+    static get v8n() {
+        return [({ coupon_codes: v }) => (v && v.length > 0) || 'coupon_codes_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 class="relative">
+        <div
+          class=${classMap({
+            'relative space-y-m': true,
+            [transition]: true,
+            [hidden]: isSnapshot,
+        })}
+        >
+          ${hiddenSelector.matches('codes', true) ? '' : this.__renderCodes()}
+          ${hiddenSelector.matches('import', true) ? '' : this.__renderImport()}
+        </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="import_codes_done" ns=${ns}></foxy-i18n>
+        </div>
+
+        <div
+          data-testid="spinner"
+          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>
+    `;
+    }
+    __renderCodes() {
+        var _a;
+        const maxVisible = 16;
+        const codes = (_a = this.form.coupon_codes) !== null && _a !== void 0 ? _a : [];
+        const visibleCodes = codes.length > maxVisible ? codes.slice(-maxVisible) : codes;
+        const hiddenCodes = codes.length > maxVisible ? codes.slice(0, -maxVisible) : [];
+        const items = visibleCodes.map(code => {
+            let href;
+            try {
+                const url = new URL(this.parent);
+                url.searchParams.set('code', code);
+                href = url.toString();
+            }
+            catch (_a) {
+                href = this.parent;
+            }
+            return {
+                value: code,
+                label: html `
+          <foxy-internal-coupon-codes-form-list-item
+            group=${this.group}
+            href=${href}
+            lang=${this.lang}
+            ns=${this.ns}
+          >
+          </foxy-internal-coupon-codes-form-list-item>
+        `,
+            };
+        });
+        return html `
+      <div data-testid="codes">
+        ${this.renderTemplateOrSlot('codes:before')}
+
+        <x-group class="mb-xs" frame>
+          <foxy-i18n slot="header" lang=${this.lang} key="code_plural" ns=${this.ns}></foxy-i18n>
+
+          <x-editable-list
+            data-testid="codes:list"
+            lang=${this.lang}
+            ns=${this.ns}
+            ?disabled=${!this.in('idle') || this.disabledSelector.matches('codes', true)}
+            ?readonly=${this.readonlySelector.matches('codes', true)}
+            .items=${items}
+            @change=${(evt) => {
+            const list = evt.currentTarget;
+            const newCodes = new Set([...hiddenCodes, ...list.items.map(item => item.value)]);
+            this.edit({ coupon_codes: [...newCodes] });
+        }}
+            @paste=${(evt) => {
+            var _a, _b;
+            evt.preventDefault();
+            const text = (_b = (_a = evt.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : '';
+            const pastedCodes = text
+                .split(/\s/)
+                .map(code => code.trim())
+                .filter(code => code.length > 0);
+            this.edit({ coupon_codes: Array.from(new Set([...codes, ...pastedCodes])) });
+        }}
+          >
+            <div
+              class="ml-m py-s border-b border-contrast-10 font-lumo"
+              ?hidden=${hiddenCodes.length === 0}
+            >
+              <foxy-i18n
+                options=${JSON.stringify({ count: hiddenCodes.length })}
+                class="block text-body text-m mb-xs"
+                lang=${this.lang}
+                key="hidden_codes_header"
+                ns=${this.ns}
+              >
+              </foxy-i18n>
+
+              <foxy-i18n
+                class="block text-xs text-tertiary"
+                lang=${this.lang}
+                key="hidden_codes_explainer"
+                ns=${this.ns}
+              >
+              </foxy-i18n>
+            </div>
+          </x-editable-list>
+        </x-group>
+
+        <foxy-i18n
+          class="block text-xs text-tertiary leading-s"
+          lang=${this.lang}
+          key="code_import_hint"
+          ns=${this.ns}
+        >
+        </foxy-i18n>
+
+        ${this.renderTemplateOrSlot('codes:after')}
+      </div>
+    `;
+    }
+    __renderImport() {
+        const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });
+        const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });
+        const isValid = isTemplateValid || isSnapshotValid;
+        return html `
+      <div>
+        ${this.renderTemplateOrSlot('import:before')}
+
+        <vaadin-button
+          data-testid="import"
+          class="w-full mb-xs"
+          theme="primary success"
+          ?disabled=${!isValid || !this.in('idle') || this.disabledSelector.matches('import', true)}
+          @click=${() => this.submit()}
+        >
+          <foxy-i18n ns=${this.ns} key="import" lang=${this.lang}></foxy-i18n>
+        </vaadin-button>
+
+        ${this.renderTemplateOrSlot('import:after')}
+      </div>
+    `;
+    }
+}
+//# sourceMappingURL=CouponCodesForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CouponCodesForm.js","sourceRoot":"","sources":["../../../../src/elements/public/CouponCodesForm/CouponCodesForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { EditableList } from '../../private/EditableList/EditableList';\nimport { Group } from '../../private/Group/Group';\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';\n\nconst NS = 'coupon-codes-form';\nconst Base = ConfigurableMixin(\n  ThemeableMixin(ScopedElementsMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/**\n * Form element for importing coupon codes (`fx:coupon_codes`).\n *\n * @slot codes:before\n * @slot codes:after\n *\n * @slot import:before\n * @slot import:after\n *\n * @element foxy-coupon-codes-form\n * @since 1.15.0\n */\nexport class CouponCodesForm extends Base<Data> {\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'vaadin-button': customElements.get('vaadin-button'),\n      'iron-icon': customElements.get('iron-icon'),\n\n      'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n      'foxy-i18n': customElements.get('foxy-i18n'),\n\n      'x-editable-list': EditableList,\n      'x-group': Group,\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [({ coupon_codes: v }) => (v && v.length > 0) || 'coupon_codes_required'];\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 class=\"relative\">\n        <div\n          class=${classMap({\n            'relative space-y-m': true,\n            [transition]: true,\n            [hidden]: isSnapshot,\n          })}\n        >\n          ${hiddenSelector.matches('codes', true) ? '' : this.__renderCodes()}\n          ${hiddenSelector.matches('import', true) ? '' : this.__renderImport()}\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=\"import_codes_done\" ns=${ns}></foxy-i18n>\n        </div>\n\n        <div\n          data-testid=\"spinner\"\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 __renderCodes() {\n    const maxVisible = 16;\n    const codes = this.form.coupon_codes ?? [];\n\n    const visibleCodes = codes.length > maxVisible ? codes.slice(-maxVisible) : codes;\n    const hiddenCodes = codes.length > maxVisible ? codes.slice(0, -maxVisible) : [];\n\n    const items = visibleCodes.map(code => {\n      let href: string;\n\n      try {\n        const url = new URL(this.parent);\n        url.searchParams.set('code', code);\n        href = url.toString();\n      } catch {\n        href = this.parent;\n      }\n\n      return {\n        value: code,\n        label: html`\n          <foxy-internal-coupon-codes-form-list-item\n            group=${this.group}\n            href=${href}\n            lang=${this.lang}\n            ns=${this.ns}\n          >\n          </foxy-internal-coupon-codes-form-list-item>\n        `,\n      };\n    });\n\n    return html`\n      <div data-testid=\"codes\">\n        ${this.renderTemplateOrSlot('codes:before')}\n\n        <x-group class=\"mb-xs\" frame>\n          <foxy-i18n slot=\"header\" lang=${this.lang} key=\"code_plural\" ns=${this.ns}></foxy-i18n>\n\n          <x-editable-list\n            data-testid=\"codes:list\"\n            lang=${this.lang}\n            ns=${this.ns}\n            ?disabled=${!this.in('idle') || this.disabledSelector.matches('codes', true)}\n            ?readonly=${this.readonlySelector.matches('codes', true)}\n            .items=${items}\n            @change=${(evt: CustomEvent) => {\n              const list = evt.currentTarget as EditableList;\n              const newCodes = new Set([...hiddenCodes, ...list.items.map(item => item.value)]);\n              this.edit({ coupon_codes: [...newCodes] });\n            }}\n            @paste=${(evt: ClipboardEvent) => {\n              evt.preventDefault();\n\n              const text = evt.clipboardData?.getData('text') ?? '';\n              const pastedCodes = text\n                .split(/\\s/)\n                .map(code => code.trim())\n                .filter(code => code.length > 0);\n\n              this.edit({ coupon_codes: Array.from(new Set([...codes, ...pastedCodes])) });\n            }}\n          >\n            <div\n              class=\"ml-m py-s border-b border-contrast-10 font-lumo\"\n              ?hidden=${hiddenCodes.length === 0}\n            >\n              <foxy-i18n\n                options=${JSON.stringify({ count: hiddenCodes.length })}\n                class=\"block text-body text-m mb-xs\"\n                lang=${this.lang}\n                key=\"hidden_codes_header\"\n                ns=${this.ns}\n              >\n              </foxy-i18n>\n\n              <foxy-i18n\n                class=\"block text-xs text-tertiary\"\n                lang=${this.lang}\n                key=\"hidden_codes_explainer\"\n                ns=${this.ns}\n              >\n              </foxy-i18n>\n            </div>\n          </x-editable-list>\n        </x-group>\n\n        <foxy-i18n\n          class=\"block text-xs text-tertiary leading-s\"\n          lang=${this.lang}\n          key=\"code_import_hint\"\n          ns=${this.ns}\n        >\n        </foxy-i18n>\n\n        ${this.renderTemplateOrSlot('codes:after')}\n      </div>\n    `;\n  }\n\n  private __renderImport() {\n    const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n    const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n    const isValid = isTemplateValid || isSnapshotValid;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('import:before')}\n\n        <vaadin-button\n          data-testid=\"import\"\n          class=\"w-full mb-xs\"\n          theme=\"primary success\"\n          ?disabled=${!isValid || !this.in('idle') || this.disabledSelector.matches('import', true)}\n          @click=${() => this.submit()}\n        >\n          <foxy-i18n ns=${this.ns} key=\"import\" lang=${this.lang}></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('import:after')}\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,8 @@
+import '@vaadin/vaadin-button';
+import '@polymer/iron-icons';
+import '@polymer/iron-icon';
+import '../../internal/InternalSandbox/index';
+import '../Spinner/index';
+import '../I18n/index';
+import { CouponCodesForm } from './CouponCodesForm';
+export { CouponCodesForm };

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

@@ -0,0 +1,12 @@
+import '@vaadin/vaadin-button';
+import '@polymer/iron-icons';
+import '@polymer/iron-icon';
+import "../../internal/InternalSandbox/index.js";
+import "../Spinner/index.js";
+import "../I18n/index.js";
+import { CouponCodesForm } from "./CouponCodesForm.js";
+import { InternalCouponCodesFormListItem } from "./internal/InternalCouponCodesFormListItem.js";
+customElements.define('foxy-coupon-codes-form', CouponCodesForm);
+customElements.define('foxy-internal-coupon-codes-form-list-item', InternalCouponCodesFormListItem);
+export { CouponCodesForm };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/CouponCodesForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAC5B,iDAA8C;AAC9C,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,eAAe,EAAE,6BAA0B;AACpD,OAAO,EAAE,+BAA+B,EAAE,sDAAmD;AAE7F,cAAc,CAAC,MAAM,CAAC,wBAAwB,EAAE,eAAe,CAAC,CAAC;AACjE,cAAc,CAAC,MAAM,CAAC,2CAA2C,EAAE,+BAA+B,CAAC,CAAC;AAEpG,OAAO,EAAE,eAAe,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-button';\nimport '@polymer/iron-icons';\nimport '@polymer/iron-icon';\nimport '../../internal/InternalSandbox/index';\nimport '../Spinner/index';\nimport '../I18n/index';\n\nimport { CouponCodesForm } from './CouponCodesForm';\nimport { InternalCouponCodesFormListItem } from './internal/InternalCouponCodesFormListItem';\n\ncustomElements.define('foxy-coupon-codes-form', CouponCodesForm);\ncustomElements.define('foxy-internal-coupon-codes-form-list-item', InternalCouponCodesFormListItem);\n\nexport { CouponCodesForm };\n"]}

package/dist/elements/public/CouponCodesForm/internal/InternalCouponCodesFormListItem.d.ts

@@ -0,0 +1,14 @@
+import { TemplateResult } from 'lit-html';
+import { NucleonElement } from '../../NucleonElement/NucleonElement';
+import { Rels } from '@foxy.io/sdk/backend';
+import { Resource } from '@foxy.io/sdk/core';
+declare type Data = Resource<Rels.CouponCodes>;
+declare const Base: typeof NucleonElement & {
+    styles: import("lit-element").CSSResultArray;
+} & import("lit-element").Constructor<import("../../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+};
+export declare class InternalCouponCodesFormListItem extends Base<Data> {
+    render(): TemplateResult;
+}
+export {};

package/dist/elements/public/CouponCodesForm/internal/InternalCouponCodesFormListItem.js

@@ -0,0 +1,48 @@
+import { html } from 'lit-html';
+import { NucleonElement } from "../../NucleonElement/NucleonElement.js";
+import { ThemeableMixin } from "../../../../mixins/themeable.js";
+import { TranslatableMixin } from "../../../../mixins/translatable.js";
+const Base = TranslatableMixin(ThemeableMixin(NucleonElement));
+export class InternalCouponCodesFormListItem extends Base {
+    render() {
+        var _a, _b;
+        let code;
+        try {
+            code = (_a = new URL(this.href).searchParams.get('code')) !== null && _a !== void 0 ? _a : '';
+        }
+        catch (_c) {
+            return html ``;
+        }
+        let statusClass = 'text-tertiary bg-contrast-5';
+        let statusKey;
+        let codeClass = 'text-body';
+        if (this.in('fail')) {
+            statusKey = 'loading_error';
+        }
+        else if (this.in('busy')) {
+            statusKey = 'loading_busy';
+        }
+        else if (((_b = this.data) === null || _b === void 0 ? void 0 : _b.returned_items) === 0) {
+            statusClass = 'text-success bg-success-10';
+            statusKey = 'unique';
+        }
+        else {
+            statusClass = 'text-error bg-error-10';
+            statusKey = 'duplicate';
+            codeClass = 'text-error';
+        }
+        return html `
+      <div class="flex justify-between items-center font-lumo leading-m">
+        <div class="text-m ${codeClass}">${code}</div>
+        <foxy-i18n
+          class="text-xs font-medium px-xs rounded ${statusClass}"
+          lang=${this.lang}
+          key=${statusKey}
+          ns=${this.ns}
+        >
+        </foxy-i18n>
+      </div>
+    `;
+    }
+}
+//# sourceMappingURL=InternalCouponCodesFormListItem.js.map

package/dist/elements/public/CouponCodesForm/internal/InternalCouponCodesFormListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InternalCouponCodesFormListItem.js","sourceRoot":"","sources":["../../../../../src/elements/public/CouponCodesForm/internal/InternalCouponCodesFormListItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,cAAc,EAAE,+CAA4C;AAGrE,OAAO,EAAE,cAAc,EAAE,wCAAqC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,2CAAwC;AAGpE,MAAM,IAAI,GAAG,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;AAE/D,MAAM,OAAO,+BAAgC,SAAQ,IAAU;IAC7D,MAAM;;QACJ,IAAI,IAAY,CAAC;QAEjB,IAAI;YACF,IAAI,SAAG,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,mCAAI,EAAE,CAAC;SAC1D;QAAC,WAAM;YACN,OAAO,IAAI,CAAA,EAAE,CAAC;SACf;QAED,IAAI,WAAW,GAAG,6BAA6B,CAAC;QAChD,IAAI,SAAiB,CAAC;QACtB,IAAI,SAAS,GAAG,WAAW,CAAC;QAE5B,IAAI,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE;YACnB,SAAS,GAAG,eAAe,CAAC;SAC7B;aAAM,IAAI,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE;YAC1B,SAAS,GAAG,cAAc,CAAC;SAC5B;aAAM,IAAI,OAAA,IAAI,CAAC,IAAI,0CAAE,cAAc,MAAK,CAAC,EAAE;YAC1C,WAAW,GAAG,4BAA4B,CAAC;YAC3C,SAAS,GAAG,QAAQ,CAAC;SACtB;aAAM;YACL,WAAW,GAAG,wBAAwB,CAAC;YACvC,SAAS,GAAG,WAAW,CAAC;YACxB,SAAS,GAAG,YAAY,CAAC;SAC1B;QAED,OAAO,IAAI,CAAA;;6BAEc,SAAS,KAAK,IAAI;;qDAEM,WAAW;iBAC/C,IAAI,CAAC,IAAI;gBACV,SAAS;eACV,IAAI,CAAC,EAAE;;;;KAIjB,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { NucleonElement } from '../../NucleonElement/NucleonElement';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { ThemeableMixin } from '../../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../../mixins/translatable';\n\ntype Data = Resource<Rels.CouponCodes>;\nconst Base = TranslatableMixin(ThemeableMixin(NucleonElement));\n\nexport class InternalCouponCodesFormListItem extends Base<Data> {\n  render(): TemplateResult {\n    let code: string;\n\n    try {\n      code = new URL(this.href).searchParams.get('code') ?? '';\n    } catch {\n      return html``;\n    }\n\n    let statusClass = 'text-tertiary bg-contrast-5';\n    let statusKey: string;\n    let codeClass = 'text-body';\n\n    if (this.in('fail')) {\n      statusKey = 'loading_error';\n    } else if (this.in('busy')) {\n      statusKey = 'loading_busy';\n    } else if (this.data?.returned_items === 0) {\n      statusClass = 'text-success bg-success-10';\n      statusKey = 'unique';\n    } else {\n      statusClass = 'text-error bg-error-10';\n      statusKey = 'duplicate';\n      codeClass = 'text-error';\n    }\n\n    return html`\n      <div class=\"flex justify-between items-center font-lumo leading-m\">\n        <div class=\"text-m ${codeClass}\">${code}</div>\n        <foxy-i18n\n          class=\"text-xs font-medium px-xs rounded ${statusClass}\"\n          lang=${this.lang}\n          key=${statusKey}\n          ns=${this.ns}\n        >\n        </foxy-i18n>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,17 @@
+import { CouponCodesForm } from './CouponCodesForm';
+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.CouponCodesImport> & {
+    _links: {
+        self: {
+            href: string;
+        };
+    };
+};
+export declare type Templates = {
+    'codes:before'?: Renderer<CouponCodesForm>;
+    'codes:after'?: Renderer<CouponCodesForm>;
+    'import:before'?: Renderer<CouponCodesForm>;
+    'import:after'?: Renderer<CouponCodesForm>;
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/CouponCodesForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import { CouponCodesForm } from './CouponCodesForm';\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.CouponCodesImport> & { _links: { self: { href: string } } };\n\nexport type Templates = {\n  'codes:before'?: Renderer<CouponCodesForm>;\n  'codes:after'?: Renderer<CouponCodesForm>;\n  'import:before'?: Renderer<CouponCodesForm>;\n  'import:after'?: Renderer<CouponCodesForm>;\n};\n"]}

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

@@ -0,0 +1,77 @@
+import { Data } from './types';
+import { PropertyDeclarations, TemplateResult } from 'lit-element';
+import { ScopedElementsMap } from '@open-wc/scoped-elements';
+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;
+} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost> & {
+    styles: import("lit-element").CSSResultArray;
+} & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/src/types").ScopedElementsHost>;
+/**
+ * Form element for creating or editing coupons (`fx:coupon`).
+ *
+ * @slot name:before
+ * @slot name:after
+ *
+ * @slot rules:before
+ * @slot rules:after
+ *
+ * @slot codes:before
+ * @slot codes:after
+ *
+ * @slot usage:before
+ * @slot usage:after
+ *
+ * @slot product-restrictions:before
+ * @slot product-restrictions:after
+ *
+ * @slot category-restrictions:before
+ * @slot category-restrictions:after
+ *
+ * @slot options:before
+ * @slot options:after
+ *
+ * @slot timestamps:before
+ * @slot timestamps:after
+ *
+ * @slot delete:before
+ * @slot delete:after
+ *
+ * @slot create:before
+ * @slot create:after
+ *
+ * @element foxy-coupon-form
+ * @since 1.15.0
+ */
+export declare class CouponForm extends Base<Data> {
+    static get scopedElements(): ScopedElementsMap;
+    static get properties(): PropertyDeclarations;
+    static get v8n(): NucleonV8N<Data>;
+    private __codesTableColumns;
+    private static readonly __codesQueryOptions;
+    private __codesTableQuery;
+    private __itemCategories;
+    render(): TemplateResult;
+    protected _sendGet(): Promise<Data>;
+    private __getErrorMessage;
+    private __getValidator;
+    private __renderName;
+    private __renderRulesPreset;
+    private __renderRulesTierSelect;
+    private __renderRulesTierSwitch;
+    private __renderRulesTierField;
+    private __renderRulesTier;
+    private __renderRulesUrlParameter;
+    private __renderRulesDescription;
+    private __renderRules;
+    private __renderCodes;
+    private __renderUsage;
+    private __renderProductRestrictions;
+    private __renderCategoryRestrictions;
+    private __renderOptions;
+    private __renderTimestamps;
+    private __renderCreate;
+    private __renderDelete;
+}
+export {};