@foxy.io/elements 1.34.0-beta.3 → 1.35.0-beta.1

package/dist/elements/internal/InternalSummaryControl/InternalSummaryControl.js

@@ -1,6 +1,19 @@
+import { svg } from 'lit-html';
 import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
 import { html, css } from 'lit-element';
 export class InternalSummaryControl extends InternalEditableControl {
+    constructor() {
+        super(...arguments);
+        this.layout = null;
+        this.open = false;
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            layout: {},
+            open: { type: Boolean },
+        };
+    }
     static get styles() {
         return [
             ...super.styles,
@@ -8,6 +21,14 @@ export class InternalSummaryControl extends InternalEditableControl {
   background-color:var(--lumo-contrast-5pct);
   padding:calc(0.625em + (var(--lumo-border-radius) / 4) - 1px);
 }
+
+details summary > div{
+  border-radius:var(--lumo-border-radius);
+}
+
+details[open] summary > div{
+  border-radius:var(--lumo-border-radius) var(--lumo-border-radius) 0 0;
+}
       `,
         ];
     }
@@ -15,6 +36,45 @@ export class InternalSummaryControl extends InternalEditableControl {
         return;
     }
     renderControl() {
+        if (this.layout === 'details') {
+            return html `
+        <details
+          class="rounded overflow-hidden"
+          ?open=${this.open}
+          @toggle=${(evt) => {
+                const details = evt.currentTarget;
+                this.open = details.open;
+                if (!evt.composed)
+                    this.dispatchEvent(new CustomEvent('toggle'));
+            }}
+        >
+          <summary class="select-none cursor-pointer focus-outline-none group">
+            <div
+              class="leading-s bg-contrast-5 group-focus-ring-2 group-focus-ring-inset group-focus-ring-primary-50"
+              style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+              ?hidden=${!this.label && !this.helperText}
+            >
+              <p
+                class="font-medium text-body text-l flex items-center justify-between gap-s"
+                ?hidden=${!this.label}
+              >
+                <span>${this.label}</span>
+                <span
+                  class="flex items-center justify-center transition-colors text-tertiary group-hover-text-body"
+                  style="transform: translateX(0.2em)"
+                >
+                  ${svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1.2em; height: 1.2em"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>`}
+                </span>
+              </p>
+              <p class="text-s text-secondary" ?hidden=${!this.helperText}>${this.helperText}</p>
+            </div>
+          </summary>
+          <div class="overflow-hidden grid" style="gap: 1px">
+            <slot></slot>
+          </div>
+        </details>
+      `;
+        }
         return html `
       <div class="leading-s mb-s" ?hidden=${!this.label && !this.helperText}>
         <p class="font-medium text-body text-l" ?hidden=${!this.label}>${this.label}</p>

package/dist/elements/internal/InternalSummaryControl/InternalSummaryControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalSummaryControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSummaryControl/InternalSummaryControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,OAAO,sBAAuB,SAAQ,uBAAuB;IACjE,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,KAAK,CAAC,MAAM;YACf,GAAG;;;;OAKF;SACF,CAAC;IACJ,CAAC;IAED,cAAc;QACZ,OAAO;IACT,CAAC;IAED,aAAa;QACX,OAAO,IAAI,CAAA;4CAC6B,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,UAAU;0DACjB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK;mDAChC,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU;;;;;KAKjF,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { CSSResultArray } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css } from 'lit-element';\n\nexport class InternalSummaryControl extends InternalEditableControl {\n  static get styles(): CSSResultArray {\n    return [\n      ...super.styles,\n      css`\n        ::slotted(*) {\n          background-color: var(--lumo-contrast-5pct);\n          padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px);\n        }\n      `,\n    ];\n  }\n\n  renderLightDom(): void {\n    return;\n  }\n\n  renderControl(): TemplateResult {\n    return html`\n      <div class=\"leading-s mb-s\" ?hidden=${!this.label && !this.helperText}>\n        <p class=\"font-medium text-body text-l\" ?hidden=${!this.label}>${this.label}</p>\n        <p class=\"text-s text-secondary\" ?hidden=${!this.helperText}>${this.helperText}</p>\n      </div>\n      <div class=\"rounded overflow-hidden grid\" style=\"gap: 1px\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"InternalSummaryControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSummaryControl/InternalSummaryControl.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAkB,MAAM,UAAU,CAAC;AAE/C,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,OAAO,sBAAuB,SAAQ,uBAAuB;IAAnE;;QA6BE,WAAM,GAAqB,IAAI,CAAC;QAEhC,SAAI,GAAG,KAAK,CAAC;IAwDf,CAAC;IAtFC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,MAAM,EAAE,EAAE;YACV,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SACxB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,KAAK,CAAC,MAAM;YACf,GAAG;;;;;;;;;;;;OAaF;SACF,CAAC;IACJ,CAAC;IAMD,cAAc;QACZ,OAAO;IACT,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE;YAC7B,OAAO,IAAI,CAAA;;;kBAGC,IAAI,CAAC,IAAI;oBACP,CAAC,GAAU,EAAE,EAAE;gBACvB,MAAM,OAAO,GAAG,GAAG,CAAC,aAAmC,CAAC;gBACxD,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;gBACzB,IAAI,CAAC,GAAG,CAAC,QAAQ;oBAAE,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;YACnE,CAAC;;;;;;wBAMa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,UAAU;;;;0BAI7B,CAAC,IAAI,CAAC,KAAK;;wBAEb,IAAI,CAAC,KAAK;;;;;oBAKd,GAAG,CAAA,uTAAuT;;;yDAGrR,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU;;;;;;;OAOrF,CAAC;SACH;QAED,OAAO,IAAI,CAAA;4CAC6B,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,UAAU;0DACjB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK;mDAChC,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU;;;;;KAKjF,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { CSSResultArray, PropertyDeclarations } from 'lit-element';\nimport { svg, TemplateResult } from 'lit-html';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css } from 'lit-element';\n\nexport class InternalSummaryControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      layout: {},\n      open: { type: Boolean },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      ...super.styles,\n      css`\n        ::slotted(*) {\n          background-color: var(--lumo-contrast-5pct);\n          padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px);\n        }\n\n        details summary > div {\n          border-radius: var(--lumo-border-radius);\n        }\n\n        details[open] summary > div {\n          border-radius: var(--lumo-border-radius) var(--lumo-border-radius) 0 0;\n        }\n      `,\n    ];\n  }\n\n  layout: null | 'details' = null;\n\n  open = false;\n\n  renderLightDom(): void {\n    return;\n  }\n\n  renderControl(): TemplateResult {\n    if (this.layout === 'details') {\n      return html`\n        <details\n          class=\"rounded overflow-hidden\"\n          ?open=${this.open}\n          @toggle=${(evt: Event) => {\n            const details = evt.currentTarget as HTMLDetailsElement;\n            this.open = details.open;\n            if (!evt.composed) this.dispatchEvent(new CustomEvent('toggle'));\n          }}\n        >\n          <summary class=\"select-none cursor-pointer focus-outline-none group\">\n            <div\n              class=\"leading-s bg-contrast-5 group-focus-ring-2 group-focus-ring-inset group-focus-ring-primary-50\"\n              style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n              ?hidden=${!this.label && !this.helperText}\n            >\n              <p\n                class=\"font-medium text-body text-l flex items-center justify-between gap-s\"\n                ?hidden=${!this.label}\n              >\n                <span>${this.label}</span>\n                <span\n                  class=\"flex items-center justify-center transition-colors text-tertiary group-hover-text-body\"\n                  style=\"transform: translateX(0.2em)\"\n                >\n                  ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1.2em; height: 1.2em\"><path fill-rule=\"evenodd\" d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z\" clip-rule=\"evenodd\" /></svg>`}\n                </span>\n              </p>\n              <p class=\"text-s text-secondary\" ?hidden=${!this.helperText}>${this.helperText}</p>\n            </div>\n          </summary>\n          <div class=\"overflow-hidden grid\" style=\"gap: 1px\">\n            <slot></slot>\n          </div>\n        </details>\n      `;\n    }\n\n    return html`\n      <div class=\"leading-s mb-s\" ?hidden=${!this.label && !this.helperText}>\n        <p class=\"font-medium text-body text-l\" ?hidden=${!this.label}>${this.label}</p>\n        <p class=\"text-s text-secondary\" ?hidden=${!this.helperText}>${this.helperText}</p>\n      </div>\n      <div class=\"rounded overflow-hidden grid\" style=\"gap: 1px\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,46 @@
+import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import type { Data } from './types';
+import { InternalForm } from '../../internal/InternalForm/InternalForm';
+declare const Base: typeof InternalForm & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+};
+/**
+ * WARNING: this element is marked as experimental and is subject to change in future releases.
+ * We will not be maintaining backwards compatibility for elements in the experimental namespace.
+ * If you are using this element, please make sure to use a fixed version of the package in your `package.json`.
+ *
+ * This element allows you to create an add-to-cart form and link for your store.
+ *
+ * @element foxy-experimental-add-to-cart-builder
+ */
+export declare class ExperimentalAddToCartBuilder extends Base<Data> {
+    static get properties(): PropertyDeclarations;
+    /** Default host domain for stores that don't use a custom domain name, e.g. `foxycart.com`. */
+    defaultDomain: string | null;
+    /** URL of the HMAC encoder endpoint. */
+    encodeHelper: string | null;
+    /** URL of the `fx:locale_codes` property helper. This will be used to determine the currency code. */
+    localeCodes: string | null;
+    /** URL of the store this add-to-cart code is created for. */
+    store: string | null;
+    private readonly __signingSeparator;
+    private readonly __signAsync;
+    private __previousUnsignedCode;
+    private __previousSignedCode;
+    private __signingState;
+    private __openState;
+    renderBody(): TemplateResult;
+    updated(changes: Map<keyof this, unknown>): void;
+    submit(): void;
+    private get __defaultTemplateSetHref();
+    private get __resolvedCurrencyCode();
+    private get __resolvedTemplateSet();
+    private get __resolvedCartUrl();
+    private get __storeLoader();
+    private __getItemCategoryLoader;
+    private __getAddToCartFormHTML;
+    private __getAddToCartLinkHref;
+    private __getAddToCartCode;
+    private __getOptionModifiers;
+}
+export {};