@foxy.io/elements 1.13.0 → 1.14.0-beta.4

package/dist/elements/public/TemplateConfigForm/defaults.js

@@ -0,0 +1,95 @@
+export const getDefaultJSON = () => ({
+    cart_type: 'default',
+    checkout_type: 'default_account',
+    csc_requirements: 'all_cards',
+    tos_checkbox_settings: {
+        usage: 'none',
+        initial_state: 'unchecked',
+        is_hidden: false,
+        url: '',
+    },
+    eu_secure_data_transfer_consent: {
+        usage: 'required',
+    },
+    newsletter_subscribe: {
+        usage: 'none',
+    },
+    analytics_config: {
+        usage: 'none',
+        google_analytics: {
+            usage: 'none',
+            account_id: '',
+            include_on_site: false,
+        },
+        segment_io: {
+            usage: 'none',
+            account_id: '',
+        },
+    },
+    colors: {
+        usage: 'none',
+        primary: '4D4D4D',
+        secondary: 'FFFFFF',
+        tertiary: 'FFFFFF',
+    },
+    use_checkout_confirmation_window: {
+        usage: 'none',
+    },
+    supported_payment_cards: ['visa', 'mastercard', 'discover', 'amex'],
+    custom_checkout_field_requirements: {
+        cart_controls: 'enabled',
+        coupon_entry: 'enabled',
+        billing_first_name: 'required',
+        billing_last_name: 'required',
+        billing_company: 'optional',
+        billing_tax_id: 'hidden',
+        billing_phone: 'optional',
+        billing_address1: 'required',
+        billing_address2: 'optional',
+        billing_city: 'required',
+        billing_region: 'default',
+        billing_postal_code: 'required',
+        billing_country: 'required',
+    },
+    cart_display_config: {
+        usage: 'none',
+        show_product_weight: true,
+        show_product_category: true,
+        show_product_code: true,
+        show_product_options: true,
+        show_sub_frequency: true,
+        show_sub_startdate: true,
+        show_sub_nextdate: true,
+        show_sub_enddate: true,
+        hidden_product_options: [],
+    },
+    foxycomplete: {
+        usage: 'required',
+        show_combobox: true,
+        combobox_open: '\\u25bc',
+        combobox_close: '\\u25b2',
+        show_flags: true,
+    },
+    custom_script_values: {
+        header: '',
+        footer: '',
+        checkout_fields: '',
+        multiship_checkout_fields: '',
+    },
+    http_receipt: false,
+    custom_config: '',
+    debug: {
+        usage: 'none',
+    },
+    location_filtering: {
+        usage: 'none',
+        shipping_filter_type: 'blacklist',
+        billing_filter_type: 'blacklist',
+        shipping_filter_values: {},
+        billing_filter_values: {},
+    },
+    postal_code_lookup: {
+        usage: 'enabled',
+    },
+});
+//# sourceMappingURL=defaults.js.map

package/dist/elements/public/TemplateConfigForm/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../../src/elements/public/TemplateConfigForm/defaults.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAG,GAAuB,EAAE,CAAC,CAAC;IACvD,SAAS,EAAE,SAAS;IACpB,aAAa,EAAE,iBAAiB;IAChC,gBAAgB,EAAE,WAAW;IAC7B,qBAAqB,EAAE;QACrB,KAAK,EAAE,MAAM;QACb,aAAa,EAAE,WAAW;QAC1B,SAAS,EAAE,KAAK;QAChB,GAAG,EAAE,EAAE;KACR;IACD,+BAA+B,EAAE;QAC/B,KAAK,EAAE,UAAU;KAClB;IACD,oBAAoB,EAAE;QACpB,KAAK,EAAE,MAAM;KACd;IACD,gBAAgB,EAAE;QAChB,KAAK,EAAE,MAAM;QACb,gBAAgB,EAAE;YAChB,KAAK,EAAE,MAAM;YACb,UAAU,EAAE,EAAE;YACd,eAAe,EAAE,KAAK;SACvB;QACD,UAAU,EAAE;YACV,KAAK,EAAE,MAAM;YACb,UAAU,EAAE,EAAE;SACf;KACF;IACD,MAAM,EAAE;QACN,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,QAAQ;QACjB,SAAS,EAAE,QAAQ;QACnB,QAAQ,EAAE,QAAQ;KACnB;IACD,gCAAgC,EAAE;QAChC,KAAK,EAAE,MAAM;KACd;IACD,uBAAuB,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,CAAC;IACnE,kCAAkC,EAAE;QAClC,aAAa,EAAE,SAAS;QACxB,YAAY,EAAE,SAAS;QACvB,kBAAkB,EAAE,UAAU;QAC9B,iBAAiB,EAAE,UAAU;QAC7B,eAAe,EAAE,UAAU;QAC3B,cAAc,EAAE,QAAQ;QACxB,aAAa,EAAE,UAAU;QACzB,gBAAgB,EAAE,UAAU;QAC5B,gBAAgB,EAAE,UAAU;QAC5B,YAAY,EAAE,UAAU;QACxB,cAAc,EAAE,SAAS;QACzB,mBAAmB,EAAE,UAAU;QAC/B,eAAe,EAAE,UAAU;KAC5B;IACD,mBAAmB,EAAE;QACnB,KAAK,EAAE,MAAM;QACb,mBAAmB,EAAE,IAAI;QACzB,qBAAqB,EAAE,IAAI;QAC3B,iBAAiB,EAAE,IAAI;QACvB,oBAAoB,EAAE,IAAI;QAC1B,kBAAkB,EAAE,IAAI;QACxB,kBAAkB,EAAE,IAAI;QACxB,iBAAiB,EAAE,IAAI;QACvB,gBAAgB,EAAE,IAAI;QACtB,sBAAsB,EAAE,EAAE;KAC3B;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,UAAU;QACjB,aAAa,EAAE,IAAI;QACnB,aAAa,EAAE,SAAS;QACxB,cAAc,EAAE,SAAS;QACzB,UAAU,EAAE,IAAI;KACjB;IACD,oBAAoB,EAAE;QACpB,MAAM,EAAE,EAAE;QACV,MAAM,EAAE,EAAE;QACV,eAAe,EAAE,EAAE;QACnB,yBAAyB,EAAE,EAAE;KAC9B;IACD,YAAY,EAAE,KAAK;IACnB,aAAa,EAAE,EAAE;IACjB,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;KACd;IACD,kBAAkB,EAAE;QAClB,KAAK,EAAE,MAAM;QACb,oBAAoB,EAAE,WAAW;QACjC,mBAAmB,EAAE,WAAW;QAChC,sBAAsB,EAAE,EAAE;QAC1B,qBAAqB,EAAE,EAAE;KAC1B;IACD,kBAAkB,EAAE;QAClB,KAAK,EAAE,SAAS;KACjB;CACF,CAAC,CAAC","sourcesContent":["import { TemplateConfigJSON } from './types';\n\nexport const getDefaultJSON = (): TemplateConfigJSON => ({\n  cart_type: 'default',\n  checkout_type: 'default_account',\n  csc_requirements: 'all_cards',\n  tos_checkbox_settings: {\n    usage: 'none',\n    initial_state: 'unchecked',\n    is_hidden: false,\n    url: '',\n  },\n  eu_secure_data_transfer_consent: {\n    usage: 'required',\n  },\n  newsletter_subscribe: {\n    usage: 'none',\n  },\n  analytics_config: {\n    usage: 'none',\n    google_analytics: {\n      usage: 'none',\n      account_id: '',\n      include_on_site: false,\n    },\n    segment_io: {\n      usage: 'none',\n      account_id: '',\n    },\n  },\n  colors: {\n    usage: 'none',\n    primary: '4D4D4D',\n    secondary: 'FFFFFF',\n    tertiary: 'FFFFFF',\n  },\n  use_checkout_confirmation_window: {\n    usage: 'none',\n  },\n  supported_payment_cards: ['visa', 'mastercard', 'discover', 'amex'],\n  custom_checkout_field_requirements: {\n    cart_controls: 'enabled',\n    coupon_entry: 'enabled',\n    billing_first_name: 'required',\n    billing_last_name: 'required',\n    billing_company: 'optional',\n    billing_tax_id: 'hidden',\n    billing_phone: 'optional',\n    billing_address1: 'required',\n    billing_address2: 'optional',\n    billing_city: 'required',\n    billing_region: 'default',\n    billing_postal_code: 'required',\n    billing_country: 'required',\n  },\n  cart_display_config: {\n    usage: 'none',\n    show_product_weight: true,\n    show_product_category: true,\n    show_product_code: true,\n    show_product_options: true,\n    show_sub_frequency: true,\n    show_sub_startdate: true,\n    show_sub_nextdate: true,\n    show_sub_enddate: true,\n    hidden_product_options: [],\n  },\n  foxycomplete: {\n    usage: 'required',\n    show_combobox: true,\n    combobox_open: '\\\\u25bc',\n    combobox_close: '\\\\u25b2',\n    show_flags: true,\n  },\n  custom_script_values: {\n    header: '',\n    footer: '',\n    checkout_fields: '',\n    multiship_checkout_fields: '',\n  },\n  http_receipt: false,\n  custom_config: '',\n  debug: {\n    usage: 'none',\n  },\n  location_filtering: {\n    usage: 'none',\n    shipping_filter_type: 'blacklist',\n    billing_filter_type: 'blacklist',\n    shipping_filter_values: {},\n    billing_filter_values: {},\n  },\n  postal_code_lookup: {\n    usage: 'enabled',\n  },\n});\n"]}

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

@@ -0,0 +1,9 @@
+import '@polymer/iron-icons';
+import '@polymer/iron-icon';
+import '@vaadin/vaadin-text-field/vaadin-text-field';
+import '@vaadin/vaadin-text-field/vaadin-text-area';
+import '../../internal/InternalSandbox/index';
+import '../Spinner/index';
+import '../I18n/index';
+import { TemplateConfigForm } from './TemplateConfigForm';
+export { TemplateConfigForm };

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

@@ -0,0 +1,11 @@
+import '@polymer/iron-icons';
+import '@polymer/iron-icon';
+import '@vaadin/vaadin-text-field/vaadin-text-field';
+import '@vaadin/vaadin-text-field/vaadin-text-area';
+import "../../internal/InternalSandbox/index.js";
+import "../Spinner/index.js";
+import "../I18n/index.js";
+import { TemplateConfigForm } from "./TemplateConfigForm.js";
+customElements.define('foxy-template-config-form', TemplateConfigForm);
+export { TemplateConfigForm };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/TemplateConfigForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,6CAA6C,CAAC;AACrD,OAAO,4CAA4C,CAAC;AACpD,iDAA8C;AAC9C,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,kBAAkB,EAAE,gCAA6B;AAE1D,cAAc,CAAC,MAAM,CAAC,2BAA2B,EAAE,kBAAkB,CAAC,CAAC;AAEvE,OAAO,EAAE,kBAAkB,EAAE,CAAC","sourcesContent":["import '@polymer/iron-icons';\nimport '@polymer/iron-icon';\nimport '@vaadin/vaadin-text-field/vaadin-text-field';\nimport '@vaadin/vaadin-text-field/vaadin-text-area';\nimport '../../internal/InternalSandbox/index';\nimport '../Spinner/index';\nimport '../I18n/index';\n\nimport { TemplateConfigForm } from './TemplateConfigForm';\n\ncustomElements.define('foxy-template-config-form', TemplateConfigForm);\n\nexport { TemplateConfigForm };\n"]}

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

@@ -0,0 +1,116 @@
+import { Rels } from '@foxy.io/sdk/backend';
+import { Resource } from '@foxy.io/sdk/core';
+export declare type Data = Resource<Rels.TemplateConfig>;
+export declare type TemplateConfigJSON = {
+    /** Controls how your cart functions. */
+    cart_type: 'default' | 'fullpage' | 'custom';
+    /** Determines how you'd like customers to interact with your checkout regarding guest checkout or account checkout. The default value shows which option is shown first by default. */
+    checkout_type: 'default_account' | 'default_guest' | 'guest_only' | 'account_only';
+    /** Sets under what circumstances the card security code should be required. */
+    csc_requirements: 'all_cards' | 'sso_only' | 'new_cards_only';
+    /** Determines if you'd like a terms of service checkbox and url on your checkout. */
+    tos_checkbox_settings: {
+        usage: 'none' | 'required' | 'optional';
+        initial_state: 'checked' | 'unchecked';
+        is_hidden: boolean;
+        url: string;
+    };
+    /** Display a Secure Data Transfer agreement to EU customers. */
+    eu_secure_data_transfer_consent: {
+        usage: 'none' | 'required';
+    };
+    /** Display a newsletter subscribe checkbox on your checkout. */
+    newsletter_subscribe: {
+        usage: 'none' | 'required';
+    };
+    /** Determine if you'd like to use an analytics service. */
+    analytics_config: {
+        usage: 'none' | 'required';
+        google_analytics: {
+            usage: 'none' | 'required';
+            account_id: string;
+            include_on_site: boolean;
+        };
+        segment_io: {
+            usage: 'none' | 'required';
+            account_id: string;
+        };
+    };
+    /** Can be used to set some basic colors for your cart, checkout, and receipt templates. */
+    colors: {
+        usage: 'none' | 'required';
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+    /** Not currently implemented. */
+    use_checkout_confirmation_window: {
+        usage: 'none' | 'required';
+    };
+    /** Add the payment card types you support and want displayed on the checkout page. */
+    supported_payment_cards: ('visa' | 'mastercard' | 'discover' | 'amex' | 'dinersclub' | 'maestro' | 'laser')[];
+    /** Customize which fields should be required, option, hidden or default on the checkout page. */
+    custom_checkout_field_requirements: {
+        cart_controls: 'enabled' | 'disabled';
+        coupon_entry: 'enabled' | 'disabled';
+        billing_first_name: 'default' | 'optional' | 'required' | 'hidden';
+        billing_last_name: 'default' | 'optional' | 'required' | 'hidden';
+        billing_company: 'default' | 'optional' | 'required' | 'hidden';
+        billing_tax_id: 'default' | 'optional' | 'required' | 'hidden';
+        billing_phone: 'default' | 'optional' | 'required' | 'hidden';
+        billing_address1: 'default' | 'optional' | 'required' | 'hidden';
+        billing_address2: 'default' | 'optional' | 'required' | 'hidden';
+        billing_city: 'default' | 'optional' | 'required' | 'hidden';
+        billing_region: 'default' | 'optional' | 'required' | 'hidden';
+        billing_postal_code: 'default' | 'optional' | 'required' | 'hidden';
+        billing_country: 'default' | 'optional' | 'required' | 'hidden';
+    };
+    /** Customize which fields in the cart are shown or hidden. */
+    cart_display_config: {
+        usage: 'none' | 'required';
+        show_product_weight: boolean;
+        show_product_category: boolean;
+        show_product_code: boolean;
+        show_product_options: boolean;
+        show_sub_frequency: boolean;
+        show_sub_startdate: boolean;
+        show_sub_nextdate: boolean;
+        show_sub_enddate: boolean;
+        hidden_product_options: string[];
+    };
+    /** Allows you to customize and control the functionality of our find-as-you type system from countries and regions. */
+    foxycomplete: {
+        usage: 'none' | 'required';
+        show_combobox: boolean;
+        show_flags: boolean;
+        combobox_open: string;
+        combobox_close: string;
+    };
+    /** Custom HTML, css, and JavaScript for your cart, checkout and receipt templates. Twig is not allowed in the header template. */
+    custom_script_values: {
+        header: string;
+        footer: string;
+        checkout_fields: string;
+        multiship_checkout_fields: string;
+    };
+    /** @deprecated */
+    http_receipt: boolean;
+    /** A place where you can store your own custom JSON configuration data to be used by your Twig templates. */
+    custom_config: string;
+    /** Log debug info to browser console. */
+    debug: {
+        usage: 'none' | 'required';
+    };
+    /** This controls which countries and regions you want to allow on your cart and checkout pages. */
+    location_filtering: {
+        usage: 'none' | 'shipping' | 'billing' | 'both' | 'independent';
+        shipping_filter_type: 'blacklist' | 'whitelist';
+        billing_filter_type: 'blacklist' | 'whitelist';
+        shipping_filter_values: Record<string, '*' | string[]>;
+        billing_filter_values: Record<string, '*' | string[]>;
+    };
+    /** Enable postal code lookup on checkout. */
+    postal_code_lookup: {
+        usage: 'none' | 'enabled';
+    };
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/TemplateConfigForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\n\nexport type Data = Resource<Rels.TemplateConfig>;\n\nexport type TemplateConfigJSON = {\n  /** Controls how your cart functions. */\n  cart_type: 'default' | 'fullpage' | 'custom';\n\n  /** Determines how you'd like customers to interact with your checkout regarding guest checkout or account checkout. The default value shows which option is shown first by default. */\n  checkout_type: 'default_account' | 'default_guest' | 'guest_only' | 'account_only';\n\n  /** Sets under what circumstances the card security code should be required. */\n  csc_requirements: 'all_cards' | 'sso_only' | 'new_cards_only';\n\n  /** Determines if you'd like a terms of service checkbox and url on your checkout. */\n  tos_checkbox_settings: {\n    usage: 'none' | 'required' | 'optional';\n    initial_state: 'checked' | 'unchecked';\n    is_hidden: boolean;\n    url: string;\n  };\n\n  /** Display a Secure Data Transfer agreement to EU customers. */\n  eu_secure_data_transfer_consent: {\n    usage: 'none' | 'required';\n  };\n\n  /** Display a newsletter subscribe checkbox on your checkout. */\n  newsletter_subscribe: {\n    usage: 'none' | 'required';\n  };\n\n  /** Determine if you'd like to use an analytics service. */\n  analytics_config: {\n    usage: 'none' | 'required';\n    google_analytics: {\n      usage: 'none' | 'required';\n      account_id: string;\n      include_on_site: boolean;\n    };\n    segment_io: {\n      usage: 'none' | 'required';\n      account_id: string;\n    };\n  };\n\n  /** Can be used to set some basic colors for your cart, checkout, and receipt templates. */\n  colors: {\n    usage: 'none' | 'required';\n    primary: string;\n    secondary: string;\n    tertiary: string;\n  };\n\n  /** Not currently implemented. */\n  use_checkout_confirmation_window: {\n    usage: 'none' | 'required';\n  };\n\n  /** Add the payment card types you support and want displayed on the checkout page. */\n  supported_payment_cards: (\n    | 'visa'\n    | 'mastercard'\n    | 'discover'\n    | 'amex'\n    | 'dinersclub'\n    | 'maestro'\n    | 'laser'\n  )[];\n\n  /** Customize which fields should be required, option, hidden or default on the checkout page. */\n  custom_checkout_field_requirements: {\n    cart_controls: 'enabled' | 'disabled';\n    coupon_entry: 'enabled' | 'disabled';\n    billing_first_name: 'default' | 'optional' | 'required' | 'hidden';\n    billing_last_name: 'default' | 'optional' | 'required' | 'hidden';\n    billing_company: 'default' | 'optional' | 'required' | 'hidden';\n    billing_tax_id: 'default' | 'optional' | 'required' | 'hidden';\n    billing_phone: 'default' | 'optional' | 'required' | 'hidden';\n    billing_address1: 'default' | 'optional' | 'required' | 'hidden';\n    billing_address2: 'default' | 'optional' | 'required' | 'hidden';\n    billing_city: 'default' | 'optional' | 'required' | 'hidden';\n    billing_region: 'default' | 'optional' | 'required' | 'hidden';\n    billing_postal_code: 'default' | 'optional' | 'required' | 'hidden';\n    billing_country: 'default' | 'optional' | 'required' | 'hidden';\n  };\n\n  /** Customize which fields in the cart are shown or hidden. */\n  cart_display_config: {\n    usage: 'none' | 'required';\n    show_product_weight: boolean;\n    show_product_category: boolean;\n    show_product_code: boolean;\n    show_product_options: boolean;\n    show_sub_frequency: boolean;\n    show_sub_startdate: boolean;\n    show_sub_nextdate: boolean;\n    show_sub_enddate: boolean;\n    hidden_product_options: string[];\n  };\n\n  /** Allows you to customize and control the functionality of our find-as-you type system from countries and regions. */\n  foxycomplete: {\n    usage: 'none' | 'required';\n    show_combobox: boolean;\n    show_flags: boolean;\n    combobox_open: string;\n    combobox_close: string;\n  };\n\n  /** Custom HTML, css, and JavaScript for your cart, checkout and receipt templates. Twig is not allowed in the header template. */\n  custom_script_values: {\n    header: string;\n    footer: string;\n    checkout_fields: string;\n    multiship_checkout_fields: string;\n  };\n\n  /** @deprecated */\n  http_receipt: boolean;\n\n  /** A place where you can store your own custom JSON configuration data to be used by your Twig templates. */\n  custom_config: string;\n\n  /** Log debug info to browser console. */\n  debug: {\n    usage: 'none' | 'required';\n  };\n\n  /** This controls which countries and regions you want to allow on your cart and checkout pages. */\n  location_filtering: {\n    usage: 'none' | 'shipping' | 'billing' | 'both' | 'independent';\n    shipping_filter_type: 'blacklist' | 'whitelist';\n    billing_filter_type: 'blacklist' | 'whitelist';\n    shipping_filter_values: Record<string, '*' | string[]>;\n    billing_filter_values: Record<string, '*' | string[]>;\n  };\n\n  /** Enable postal code lookup on checkout. */\n  postal_code_lookup: {\n    usage: 'none' | 'enabled';\n  };\n};\n"]}

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

@@ -0,0 +1,23 @@
+import { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';
+import { ScopedElementsMap } from '@open-wc/scoped-elements';
+import { Data } from './types';
+import { NucleonElement } from '../NucleonElement/NucleonElement';
+declare const Base: typeof NucleonElement & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost> & {
+    styles: CSSResultArray;
+} & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/src/types").ScopedElementsHost>;
+export declare class TemplateForm extends Base<Data> {
+    static get properties(): PropertyDeclarations;
+    static get styles(): CSSResultArray;
+    static get scopedElements(): ScopedElementsMap;
+    private __cacheState;
+    private __contentChoice;
+    render(): TemplateResult;
+    private __renderDescription;
+    private __renderContent;
+    private __renderTimestamps;
+    private __renderAction;
+    private __cache;
+}
+export {};

package/dist/elements/public/TemplateForm/TemplateForm.js

@@ -0,0 +1,303 @@
+import { css, html } from 'lit-element';
+import { Choice, Group, PropertyTable } from "../../private/index.js";
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { ChoiceChangeEvent } from "../../private/events.js";
+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";
+import { ifDefined } from 'lit-html/directives/if-defined';
+const NS = 'template-form';
+const Base = ScopedElementsMixin(ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS))));
+export class TemplateForm extends Base {
+    constructor() {
+        super(...arguments);
+        this.__cacheState = 'idle';
+        this.__contentChoice = 'default';
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            __cacheState: { attribute: false },
+            __contentChoice: { attribute: false },
+        };
+    }
+    static get styles() {
+        return [
+            ...super.styles,
+            css `#cached-content::part(input-field){
+  max-height:15em;
+}
+      `,
+        ];
+    }
+    static get scopedElements() {
+        return {
+            'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),
+            'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),
+            'foxy-spinner': customElements.get('foxy-spinner'),
+            'foxy-i18n': customElements.get('foxy-i18n'),
+            'vaadin-text-field': customElements.get('vaadin-text-field'),
+            'vaadin-text-area': customElements.get('vaadin-text-area'),
+            'vaadin-button': customElements.get('vaadin-button'),
+            'x-property-table': PropertyTable,
+            'x-choice': Choice,
+            'x-group': Group,
+        };
+    }
+    render() {
+        var _a, _b;
+        const { hiddenSelector, href, lang, ns } = this;
+        const action = href ? 'delete' : 'create';
+        const isBusy = this.in('busy');
+        const isFail = this.in('fail');
+        return html `
+      <div class="space-y-m">
+        ${hiddenSelector.matches('description', true) ? '' : this.__renderDescription()}
+        ${hiddenSelector.matches('content', true) ? '' : this.__renderContent()}
+        ${hiddenSelector.matches('timestamps', true) || !href ? '' : this.__renderTimestamps()}
+        ${hiddenSelector.matches(action) ? '' : this.__renderAction(action)}
+
+        <div
+          data-testid="spinner"
+          class=${classMap({
+            'transition duration-500 ease-in-out absolute inset-0 flex': true,
+            'opacity-0 pointer-events-none': !isBusy && !isFail,
+        })}
+        >
+          <foxy-spinner
+            layout="vertical"
+            class="m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l"
+            state=${isFail ? 'error' : isBusy ? 'busy' : 'empty'}
+            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>
+    `;
+    }
+    __renderDescription() {
+        var _a, _b;
+        return html `
+      <div>
+        ${this.renderTemplateOrSlot('description:before')}
+
+        <vaadin-text-field
+          class="w-full mb-s"
+          label=${this.t('description')}
+          .value=${(_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.description) !== null && _b !== void 0 ? _b : ''}
+          @keydown=${(evt) => evt.key === 'Enter' && this.submit()}
+          @input=${(evt) => {
+            this.edit({ description: evt.currentTarget.value });
+        }}
+        >
+        </vaadin-text-field>
+
+        ${this.renderTemplateOrSlot('description:after')}
+      </div>
+    `;
+    }
+    __renderContent() {
+        var _a;
+        const contentChoice = this.form.content_url
+            ? 'url'
+            : this.form.content
+                ? 'clipboard'
+                : this.__contentChoice;
+        return html `
+      <div>
+        ${this.renderTemplateOrSlot('content:before')}
+
+        <x-group frame>
+          <foxy-i18n lang=${this.lang} slot="header" key="template" ns=${this.ns}></foxy-i18n>
+
+          <x-choice
+            data-testid="template-type"
+            .value=${contentChoice}
+            .items=${['default', 'url', 'clipboard']}
+            ?readonly=${this.readonlySelector.matches('content', true)}
+            ?disabled=${this.in('busy') || this.disabledSelector.matches('content', true)}
+            @change=${(evt) => {
+            if (evt instanceof ChoiceChangeEvent) {
+                this.edit({ content: '', content_url: '' });
+                this.__contentChoice = evt.detail;
+            }
+        }}
+          >
+            ${['default', 'url', 'clipboard'].map(value => {
+            return html `
+                <div slot="${value}-label" class="py-s">
+                  <foxy-i18n class="block" lang=${this.lang} key="template_${value}" ns=${this.ns}>
+                  </foxy-i18n>
+
+                  <foxy-i18n
+                    class="block text-s opacity-70"
+                    lang=${this.lang}
+                    key="template_${value}_explainer"
+                    ns=${this.ns}
+                  >
+                  </foxy-i18n>
+                </div>
+              `;
+        })}
+
+            <div slot="url" ?hidden=${contentChoice !== 'url'}>
+              <div class="flex items-center mt-0 mb-m">
+                <vaadin-text-field
+                  data-testid="content_url"
+                  value=${ifDefined(this.form.content_url)}
+                  class="mr-s flex-grow"
+                  @input=${(evt) => {
+            const value = evt.currentTarget.value;
+            this.edit({ content: '', content_url: value });
+        }}
+                >
+                </vaadin-text-field>
+
+                ${this.form.content_url === ((_a = this.data) === null || _a === void 0 ? void 0 : _a.content_url)
+            ? html `
+                      <vaadin-button
+                        class="relative"
+                        ?disabled=${this.__cacheState === 'busy'}
+                        @click=${this.__cache}
+                      >
+                        <foxy-i18n
+                          class=${classMap({
+                'relative transition-opacity': true,
+                'opacity-0': this.__cacheState !== 'idle',
+            })}
+                          lang=${this.lang}
+                          key="cache"
+                          ns=${this.ns}
+                        >
+                        </foxy-i18n>
+
+                        <div
+                          class=${classMap({
+                'absolute inset-0 flex transition-opacity': true,
+                'opacity-0': this.__cacheState === 'idle',
+            })}
+                        >
+                          <foxy-spinner
+                            layout="no-label"
+                            class="m-auto"
+                            state=${this.__cacheState === 'fail' ? 'error' : 'busy'}
+                            lang=${this.lang}
+                            ns=${this.ns}
+                          >
+                          </foxy-spinner>
+                        </div>
+                      </vaadin-button>
+                    `
+            : ''}
+              </div>
+            </div>
+
+            <div slot="clipboard" ?hidden=${contentChoice !== 'clipboard'}>
+              <vaadin-text-area
+                id="cached-content"
+                data-testid="content"
+                class="w-full mb-m"
+                .value=${this.form.content}
+                @input=${(evt) => {
+            const value = evt.currentTarget.value;
+            this.edit({ content: value, content_url: '' });
+        }}
+              >
+              </vaadin-text-area>
+            </div>
+          </x-choice>
+        </x-group>
+
+        ${this.renderTemplateOrSlot('content:after')}
+      </div>
+    `;
+    }
+    __renderTimestamps() {
+        return html `
+      <div>
+        ${this.renderTemplateOrSlot('timestamps:before')}
+
+        <x-property-table
+          data-testid="timestamps"
+          .items=${['date_modified', 'date_created'].map(field => {
+            var _a;
+            return ({
+                name: this.t(field),
+                value: ((_a = this.data) === null || _a === void 0 ? void 0 : _a[field]) ? this.t('date', { value: new Date(this.data[field]) })
+                    : '',
+            });
+        })}
+        >
+        </x-property-table>
+
+        ${this.renderTemplateOrSlot('timestamps:after')}
+      </div>
+    `;
+    }
+    __renderAction(action) {
+        const { disabledSelector, href, lang, ns } = this;
+        const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });
+        const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });
+        const isDisabled = !this.in('idle') || disabledSelector.matches(action, true);
+        const isValid = isTemplateValid || isSnapshotValid;
+        const handleClick = (evt) => {
+            if (action === 'delete') {
+                const confirm = this.renderRoot.querySelector('#confirm');
+                confirm.show(evt.currentTarget);
+            }
+            else {
+                this.submit();
+            }
+        };
+        return html `
+      <div>
+        ${this.renderTemplateOrSlot(`${action}:before`)}
+
+        <foxy-internal-confirm-dialog
+          message="delete_prompt"
+          confirm="delete"
+          cancel="cancel"
+          header="delete"
+          theme="primary error"
+          lang=${lang}
+          ns=${ns}
+          id="confirm"
+          data-testid="confirm"
+          @hide=${(evt) => {
+            if (!evt.detail.cancelled)
+                this.delete();
+        }}
+        >
+        </foxy-internal-confirm-dialog>
+
+        <vaadin-button
+          class="w-full"
+          theme=${this.in('idle') ? `primary ${href ? 'error' : 'success'}` : ''}
+          data-testid=${action}
+          ?disabled=${(this.in({ idle: 'template' }) && !isValid) || isDisabled}
+          @click=${handleClick}
+        >
+          <foxy-i18n ns=${ns} key=${action} lang=${lang}></foxy-i18n>
+        </vaadin-button>
+
+        ${this.renderTemplateOrSlot(`${action}:after`)}
+      </div>
+    `;
+    }
+    async __cache() {
+        var _a, _b;
+        this.__cacheState = 'busy';
+        try {
+            const url = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links['fx:cache'].href) !== null && _b !== void 0 ? _b : '';
+            const response = await new TemplateForm.API(this).fetch(url, { method: 'POST' });
+            this.__cacheState = response.ok ? 'idle' : 'fail';
+        }
+        catch (_c) {
+            this.__cacheState = 'fail';
+        }
+    }
+}
+//# sourceMappingURL=TemplateForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateForm.js","sourceRoot":"","sources":["../../../../src/elements/public/TemplateForm/TemplateForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultArray, PropertyDeclarations, TemplateResult, css, html } from 'lit-element';\nimport { Choice, Group, PropertyTable } from '../../private/index';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\n\nimport { ChoiceChangeEvent } from '../../private/events';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { Data } from './types';\nimport { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { TextAreaElement } from '@vaadin/vaadin-text-field/vaadin-text-area';\nimport { TextFieldElement } from '@vaadin/vaadin-text-field';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\n\nconst NS = 'template-form';\nconst Base = ScopedElementsMixin(\n  ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\nexport class TemplateForm extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __cacheState: { attribute: false },\n      __contentChoice: { attribute: false },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      ...super.styles,\n      css`\n        #cached-content::part(input-field) {\n          max-height: 15em;\n        }\n      `,\n    ];\n  }\n\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),\n      'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n      'foxy-i18n': customElements.get('foxy-i18n'),\n      'vaadin-text-field': customElements.get('vaadin-text-field'),\n      'vaadin-text-area': customElements.get('vaadin-text-area'),\n      'vaadin-button': customElements.get('vaadin-button'),\n      'x-property-table': PropertyTable,\n      'x-choice': Choice,\n      'x-group': Group,\n    };\n  }\n\n  private __cacheState: 'idle' | 'busy' | 'fail' = 'idle';\n\n  private __contentChoice: 'default' | 'url' | 'clipboard' = 'default';\n\n  render(): TemplateResult {\n    const { hiddenSelector, href, lang, ns } = this;\n    const action = href ? 'delete' : 'create';\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\n\n    return html`\n      <div class=\"space-y-m\">\n        ${hiddenSelector.matches('description', true) ? '' : this.__renderDescription()}\n        ${hiddenSelector.matches('content', true) ? '' : this.__renderContent()}\n        ${hiddenSelector.matches('timestamps', true) || !href ? '' : this.__renderTimestamps()}\n        ${hiddenSelector.matches(action) ? '' : this.__renderAction(action)}\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 && !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' : isBusy ? 'busy' : 'empty'}\n            lang=${lang}\n            ns=\"${ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  private __renderDescription() {\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('description:before')}\n\n        <vaadin-text-field\n          class=\"w-full mb-s\"\n          label=${this.t('description')}\n          .value=${this.form?.description ?? ''}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n          @input=${(evt: CustomEvent) => {\n            this.edit({ description: (evt.currentTarget as TextFieldElement).value });\n          }}\n        >\n        </vaadin-text-field>\n\n        ${this.renderTemplateOrSlot('description:after')}\n      </div>\n    `;\n  }\n\n  private __renderContent() {\n    const contentChoice = this.form.content_url\n      ? 'url'\n      : this.form.content\n      ? 'clipboard'\n      : this.__contentChoice;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('content:before')}\n\n        <x-group frame>\n          <foxy-i18n lang=${this.lang} slot=\"header\" key=\"template\" ns=${this.ns}></foxy-i18n>\n\n          <x-choice\n            data-testid=\"template-type\"\n            .value=${contentChoice}\n            .items=${['default', 'url', 'clipboard']}\n            ?readonly=${this.readonlySelector.matches('content', true)}\n            ?disabled=${this.in('busy') || this.disabledSelector.matches('content', true)}\n            @change=${(evt: Event) => {\n              if (evt instanceof ChoiceChangeEvent) {\n                this.edit({ content: '', content_url: '' });\n                this.__contentChoice = evt.detail as 'url' | 'clipboard' | 'default';\n              }\n            }}\n          >\n            ${['default', 'url', 'clipboard'].map(value => {\n              return html`\n                <div slot=\"${value}-label\" class=\"py-s\">\n                  <foxy-i18n class=\"block\" lang=${this.lang} key=\"template_${value}\" ns=${this.ns}>\n                  </foxy-i18n>\n\n                  <foxy-i18n\n                    class=\"block text-s opacity-70\"\n                    lang=${this.lang}\n                    key=\"template_${value}_explainer\"\n                    ns=${this.ns}\n                  >\n                  </foxy-i18n>\n                </div>\n              `;\n            })}\n\n            <div slot=\"url\" ?hidden=${contentChoice !== 'url'}>\n              <div class=\"flex items-center mt-0 mb-m\">\n                <vaadin-text-field\n                  data-testid=\"content_url\"\n                  value=${ifDefined(this.form.content_url)}\n                  class=\"mr-s flex-grow\"\n                  @input=${(evt: CustomEvent) => {\n                    const value = (evt.currentTarget as TextFieldElement).value;\n                    this.edit({ content: '', content_url: value });\n                  }}\n                >\n                </vaadin-text-field>\n\n                ${this.form.content_url === this.data?.content_url\n                  ? html`\n                      <vaadin-button\n                        class=\"relative\"\n                        ?disabled=${this.__cacheState === 'busy'}\n                        @click=${this.__cache}\n                      >\n                        <foxy-i18n\n                          class=${classMap({\n                            'relative transition-opacity': true,\n                            'opacity-0': this.__cacheState !== 'idle',\n                          })}\n                          lang=${this.lang}\n                          key=\"cache\"\n                          ns=${this.ns}\n                        >\n                        </foxy-i18n>\n\n                        <div\n                          class=${classMap({\n                            'absolute inset-0 flex transition-opacity': true,\n                            'opacity-0': this.__cacheState === 'idle',\n                          })}\n                        >\n                          <foxy-spinner\n                            layout=\"no-label\"\n                            class=\"m-auto\"\n                            state=${this.__cacheState === 'fail' ? 'error' : 'busy'}\n                            lang=${this.lang}\n                            ns=${this.ns}\n                          >\n                          </foxy-spinner>\n                        </div>\n                      </vaadin-button>\n                    `\n                  : ''}\n              </div>\n            </div>\n\n            <div slot=\"clipboard\" ?hidden=${contentChoice !== 'clipboard'}>\n              <vaadin-text-area\n                id=\"cached-content\"\n                data-testid=\"content\"\n                class=\"w-full mb-m\"\n                .value=${this.form.content}\n                @input=${(evt: CustomEvent) => {\n                  const value = (evt.currentTarget as TextAreaElement).value;\n                  this.edit({ content: value, content_url: '' });\n                }}\n              >\n              </vaadin-text-area>\n            </div>\n          </x-choice>\n        </x-group>\n\n        ${this.renderTemplateOrSlot('content:after')}\n      </div>\n    `;\n  }\n\n  private __renderTimestamps() {\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('timestamps:before')}\n\n        <x-property-table\n          data-testid=\"timestamps\"\n          .items=${(['date_modified', 'date_created'] as const).map(field => ({\n            name: this.t(field),\n            value: this.data?.[field]\n              ? this.t('date', { value: new Date(this.data[field] as string) })\n              : '',\n          }))}\n        >\n        </x-property-table>\n\n        ${this.renderTemplateOrSlot('timestamps:after')}\n      </div>\n    `;\n  }\n\n  private __renderAction(action: string) {\n    const { disabledSelector, href, lang, ns } = this;\n\n    const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n    const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n    const isDisabled = !this.in('idle') || disabledSelector.matches(action, true);\n    const isValid = isTemplateValid || isSnapshotValid;\n\n    const handleClick = (evt: Event) => {\n      if (action === 'delete') {\n        const confirm = this.renderRoot.querySelector('#confirm');\n        (confirm as InternalConfirmDialog).show(evt.currentTarget as HTMLElement);\n      } else {\n        this.submit();\n      }\n    };\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot(`${action}:before`)}\n\n        <foxy-internal-confirm-dialog\n          message=\"delete_prompt\"\n          confirm=\"delete\"\n          cancel=\"cancel\"\n          header=\"delete\"\n          theme=\"primary error\"\n          lang=${lang}\n          ns=${ns}\n          id=\"confirm\"\n          data-testid=\"confirm\"\n          @hide=${(evt: DialogHideEvent) => {\n            if (!evt.detail.cancelled) this.delete();\n          }}\n        >\n        </foxy-internal-confirm-dialog>\n\n        <vaadin-button\n          class=\"w-full\"\n          theme=${this.in('idle') ? `primary ${href ? 'error' : 'success'}` : ''}\n          data-testid=${action}\n          ?disabled=${(this.in({ idle: 'template' }) && !isValid) || isDisabled}\n          @click=${handleClick}\n        >\n          <foxy-i18n ns=${ns} key=${action} lang=${lang}></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot(`${action}:after`)}\n      </div>\n    `;\n  }\n\n  private async __cache(): Promise<void> {\n    this.__cacheState = 'busy';\n\n    try {\n      const url = this.data?._links['fx:cache'].href ?? '';\n      const response = await new TemplateForm.API(this).fetch(url, { method: 'POST' });\n\n      this.__cacheState = response.ok ? 'idle' : 'fail';\n    } catch {\n      this.__cacheState = 'fail';\n    }\n  }\n}\n"]}

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

@@ -0,0 +1,9 @@
+import '@vaadin/vaadin-text-field/vaadin-text-field';
+import '@vaadin/vaadin-text-field/vaadin-text-area';
+import '@vaadin/vaadin-button';
+import '../../internal/InternalConfirmDialog/index';
+import '../../internal/InternalSandbox/index';
+import '../Spinner/index';
+import '../I18n/index';
+import { TemplateForm } from './TemplateForm';
+export { TemplateForm };