@tet/tet-components 1.3.147-testing → 1.3.148-staging

package/dist/types/components/views/tet-b2b-configurator/tet-b2b-configurator.d.ts

@@ -0,0 +1,170 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+export type B2BSubmit = {
+    cart: Record<string, number>;
+    contactInfo: Record<string, string>;
+};
+export type FormState = 'loading' | 'success' | 'error';
+export declare class TetB2bConfigurator {
+    hostElement: HTMLTetB2bConfiguratorElement;
+    /** @private The suffix for the price displayed - "€/mēn."). */
+    private readonly priceSuffix;
+    /**The reference to cart element. */
+    private cartEl;
+    /**The reference to confirmation Modal, shown on delete events. */
+    private confirmationDialogEl;
+    /**The reference to submission state Modal, shown after form submit action. */
+    private submissionStateDialogEl;
+    /**The reference to checkout Modal Form. */
+    private checkoutFormEl;
+    /** @private Reference to 1st inner accordion element*/
+    private primaryAccordionEl;
+    /** @private Reference to 2nd inner accordion element*/
+    private secondaryAccordionEl;
+    /** @private Reference to 1st inner accordion element*/
+    private primaryNavEl;
+    /** @private Reference to 2nd inner accordion element*/
+    private secondaryNavEl;
+    /** The element, used to determine the carts's  sticky position. */
+    referenceElement: HTMLElement;
+    /** Loading flag. Used to render skeleton */
+    isLoading: boolean;
+    /** Holds temp value for item which is to be removed after primary button click of the confirmation dialog */
+    itemToRemove: string | null;
+    /** Indicates whether user has tried to press `submit` in cart component */
+    checkoutAttempted: boolean;
+    /** Loading flag. Used to render loader after form submission */
+    formState: FormState;
+    /** Currently active primary category */
+    activePrimaryCategoryId: number | null;
+    /** Resets selected (open) primary cards on category change */
+    resetSelectedPrimaryCards(): void;
+    /** Currently active secondary category */
+    activeSecondaryCategoryId: number | null;
+    /** Resets selected (open) secondary cards on category change */
+    resetSelectedSecondaryCards(): void;
+    /** Currently selected (open) cards in offer section's primary block*/
+    selectedPrimaryCards: string[];
+    /** Currently selected (open) cards in offer section's secondary block*/
+    selectedSecondaryCards: string[];
+    /** Stores flag for desktop reslution. Used to render different UI or perform animations in specific cases */
+    isDesktopResolution: boolean;
+    /** The theme used for the component's styling. @default 'light'*/
+    theme: 'light' | 'dark';
+    /** Id or class of refenrece element in parent component. The header sticky position will be set to the top of this container. */
+    stickyRefEl: string;
+    /** Emitted when the compare link for a category is clicked. */
+    compareLinkClick: EventEmitter<string>;
+    /** The submit event of the B2B configurator. */
+    b2bConfiguratorSubmit: EventEmitter<B2BSubmit>;
+    /** Emitted when the close button of success modal is clicked. */
+    successCloseClick: EventEmitter;
+    /** Checks for desktop resolution and intializes the sticky element's reference using the provided prop or the host's parent */
+    componentWillLoad(): Promise<void>;
+    /**
+     * Initiates:
+     * - data (with minimum load time to reduce flickering)
+     * - selected categories for each type
+     * - sticky elements position
+     */
+    componentDidLoad(): Promise<void>;
+    /**
+     * Initiates desktop resolution listener and sticky adjustement on window resize
+     */
+    onResize(): void;
+    /** Sets the value of form submission status*/
+    setSubmitFormState(value: FormState): Promise<void>;
+    /** Syncs desktop resolution with state variable */
+    private checkDesktopResolution;
+    /** Fetches the data and passes it to Stencil store */
+    private fetchData;
+    /** Renders the placeholdes/skeleton */
+    private renderPlaceholder;
+    /**
+     * Handles event form navigation and sets currently active categories
+     * @param e
+     * @returns
+     */
+    private categoryClickHandler;
+    /** Renders the offer section */
+    private renderOffer;
+    /**
+     * Finds category by id. Returns category or undefined.
+     * @param categoryId
+     * @returns
+     */
+    private getCategoryById;
+    /**
+     * Event, emitted on compare link click with the relevant modal Id
+     * @param categoryId
+     * @returns
+     */
+    private onCompareLinkClick;
+    /**
+     * Handles card selection (aka. oepen state). Checks for single|multi choice
+     * @param cardId
+     * @param categoryId
+     * @returns
+     */
+    private handleCardSelected;
+    /**
+     * Updates product in cart (add, edit, remove)
+     * In desktop mode - changes state of summary cart's accordions
+     * @param e
+     * @param categoryId
+     */
+    private handleProductCountChanged;
+    /** Resets itemId to be removed when confirmation dialog is closed */
+    private onConfirmationClose;
+    /** Renders confirmation dialog, shown on product removal action */
+    private renderConfirmationDialog;
+    /** Performs action to start again */
+    private resetState;
+    /** Renders dialog, shown after form submit */
+    private renderSubmissionStateDialog;
+    /**
+     * Renders offer section cards for the given category type
+     * @param categoryType The type of category block to render
+     * @returns
+     */
+    private renderCards;
+    /**
+     * Translates Cart "count change" event and uses in the general "count change" handler
+     * @param cardId
+     * @param count
+     * @param categoryId
+     */
+    private handleCartProductCountChange;
+    /**
+     * Navigates user in offer section by opening accordion and selecting the specific product which was clicked in cart component
+     * @param categoryId
+     * @param productCode
+     * @returns
+     */
+    private goToProduct;
+    /**
+     * Renders list of Cards in Cart depending on context
+     * @param context
+     * @returns
+     */
+    private renderCartCardsList;
+    /** Adjusts the top position variable for the sticky cart element */
+    private positionStickyCartEl;
+    /**
+     * Renders Cart content depending on context
+     * @param context
+     * @returns
+     */
+    private renderCart;
+    /** Checks if both primary and secondary products are currently in cart */
+    private areProductsAddedToCart;
+    /** Cart checkout handler. Opens Checkout component*/
+    private checkout;
+    /**
+     * Catches emitted checkout form data
+     * Combines with cart data and re-emits
+     * @param e
+     */
+    private submit;
+    private renderCheckoutForm;
+    render(): any;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tet/tet-components",
-  "version": "v1.3.147-testing",
+  "version": "v1.3.148-staging",
   "description": "A Stencil-based Web Components library for reusable UI elements.",
   "homepage": "https://tet.lv",
   "main": "dist/index.cjs.js",

package/dist/tet-components/p-b2b384d2.js

@@ -1 +0,0 @@
-import{h as t}from"./p-1ec7f341.js";import{c as e}from"./p-77372984.js";var o;!function(t){t.LIGHT="light",t.DARK="dark"}(o||(o={}));const r="tet-components-theme",a=t=>Object.values(o).some((e=>e===t)),{state:n,onChange:s}=e({theme:(()=>{const t=localStorage.getItem(r);return a(t)?t:o.LIGHT})()});s("theme",(t=>{const e=t.toString();if(!a(e))throw new Error(`Invalid theme: "${e}"`);localStorage.setItem(r,e)}));const c=t=>`theme-${t}`,m=({theme:e},o)=>t("div",{class:{[c(e||n.theme)]:!0}},o);export{o as T,m as a}

package/dist/tet-components/p-d2919aae.js

@@ -1 +0,0 @@
-import{e as o}from"./p-8c964cca.js";import{A as s}from"./p-dcbe09b5.js";const c=c=>{const r=o.createCallCenterTask;return(new s).setUrl(r).setData(c).setOptions({method:"POST"}).setErrorFallbackValue({TaskId:null}).execute()};export{c}