adp-web-components 0.0.11

package/dist/collection/global/api/partInformation.js

@@ -0,0 +1,30 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+export const getPartInformation = async (component, generalProps) => {
+    const { notAvailableMessage, mockData, partNumber, scopedTimeoutRef, middlewareCallback } = generalProps;
+    const { isDev, baseUrl, queryString, abortController, networkTimeoutRef, loadedResponse } = component;
+    const handleResult = (newPartInformation) => {
+        if (networkTimeoutRef === scopedTimeoutRef) {
+            if (!newPartInformation && partNumber)
+                throw new Error(notAvailableMessage || 'Wrong response format');
+            if (loadedResponse)
+                loadedResponse(newPartInformation);
+            if (middlewareCallback)
+                middlewareCallback(newPartInformation);
+            return newPartInformation;
+        }
+    };
+    if (isDev) {
+        const newData = mockData[partNumber];
+        return handleResult(newData);
+    }
+    else {
+        if (!baseUrl)
+            throw new Error('Please provide base-url');
+        const response = await fetch(`${baseUrl}${partNumber}?${queryString}`, { signal: abortController.signal });
+        const newData = (await response.json());
+        return handleResult(newData);
+    }
+};

package/dist/collection/global/api/vehicleInformation.js

@@ -0,0 +1,48 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+const vehicleRequestHeaders = {
+    cityId: 'City-Id',
+    userId: 'User-Id',
+    companyId: 'Company-Id',
+    customerName: 'Customer-Name',
+    customerPhone: 'Customer-Phone',
+    customerEmail: 'Customer-Email',
+    companyBranchId: 'Company-Branch-Id',
+    cityIntegrationId: 'City-Integration-Id',
+    brandIntegrationId: 'Brand-Integration-Id',
+    companyIntegrationId: 'Company-Integration-Id',
+    companyBranchIntegrationId: 'Company-Branch-Integration-Id',
+};
+export const getVehicleInformation = async (component, generalProps) => {
+    const { notAvailableMessage, mockData, vin, scopedTimeoutRef, middlewareCallback } = generalProps;
+    const { isDev, baseUrl, queryString, abortController, networkTimeoutRef, loadedResponse } = component;
+    const handleResult = (newVehicleInformation) => {
+        if (networkTimeoutRef === scopedTimeoutRef) {
+            if (!newVehicleInformation && vin)
+                throw new Error(notAvailableMessage || 'Wrong response format');
+            if (loadedResponse)
+                loadedResponse(newVehicleInformation);
+            if (middlewareCallback)
+                middlewareCallback(newVehicleInformation);
+            return newVehicleInformation;
+        }
+    };
+    if (isDev) {
+        const newData = mockData[vin];
+        return handleResult(newData);
+    }
+    else {
+        if (!baseUrl)
+            throw new Error('Please provide base-url');
+        const headers = {};
+        Object.entries(vehicleRequestHeaders).forEach(([componentHeaderKey, headerField]) => {
+            if (component[componentHeaderKey])
+                headers[headerField] = component[componentHeaderKey];
+        });
+        const response = await fetch(`${baseUrl}${vin}?${queryString}`, { signal: abortController.signal, headers: headers });
+        const newData = (await response.json());
+        return handleResult(newData);
+    }
+};

package/dist/collection/global/assets/eye.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white"
+    stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye">
+    <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
+    <circle cx="12" cy="12" r="3" />
+</svg>

package/dist/collection/global/assets/loader.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+    stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-loader">
+    <path d="M12 2v4" />
+    <path d="m16.2 7.8 2.9-2.9" />
+    <path d="M18 12h4" />
+    <path d="m16.2 16.2 2.9 2.9" />
+    <path d="M12 18v4" />
+    <path d="m4.9 19.1 2.9-2.9" />
+    <path d="M2 12h4" />
+    <path d="m4.9 4.9 2.9 2.9" />
+</svg>

package/dist/collection/global/lib/cn.js

@@ -0,0 +1,9 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export default function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/collection/global/lib/form-hook.js

@@ -0,0 +1,118 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+export class FormHook {
+    constructor(context, schemaObject, formStateOptions) {
+        this.isSubmitted = false;
+        this.validationType = 'onSubmit';
+        this.subscribedFields = {};
+        this.formErrors = {};
+        this.getFormErrors = () => this.formErrors;
+        this.getValues = () => {
+            const form = this.context.el.shadowRoot.querySelector('form');
+            const formData = new FormData(form);
+            const formObject = Object.fromEntries(formData.entries());
+            return formObject;
+        };
+        this.focusFirstInput = (errorFields) => {
+            if (errorFields.length) {
+                const domElements = errorFields.map(field => this.context.el.shadowRoot.querySelector(`input[name="${field.name}"]`)).filter(dom => dom);
+                const sortedDomElements = domElements.sort((a, b) => {
+                    if (a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING)
+                        return -1; // a comes before b
+                    if (a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_PRECEDING)
+                        return 1; // b comes before a
+                    return 0; // They are the same
+                });
+                if (sortedDomElements[0])
+                    sortedDomElements[0].focus();
+            }
+        };
+        this.onSubmit = (formEvent) => {
+            formEvent.preventDefault();
+            (async () => {
+                try {
+                    this.isSubmitted = true;
+                    this.context.isLoading = true;
+                    this.signal({ isError: false });
+                    const formObject = this.getValues();
+                    const values = await this.schemaObject.validate(formObject, { abortEarly: false, strict: true });
+                    await this.context.formSubmit(values);
+                }
+                catch (error) {
+                    if (error.name === 'ValidationError') {
+                        this.formErrors = {};
+                        const errorFields = [];
+                        error.inner.forEach((element) => {
+                            if (element.path) {
+                                this.formErrors[element.path] = element.message;
+                                if (!errorFields.find(field => field.name === element.path))
+                                    errorFields.push({
+                                        isError: true,
+                                        name: element.path,
+                                        errorMessage: element.message,
+                                    });
+                            }
+                        });
+                        this.signal(errorFields);
+                        this.focusFirstInput(errorFields);
+                    }
+                    else
+                        console.error('Unexpected Error:', error);
+                }
+                finally {
+                    this.context.isLoading = false;
+                }
+            })();
+        };
+        this.newController = (name, fieldType) => {
+            if (fieldType === 'text')
+                this.subscribedFields[name] = {
+                    name,
+                    isError: false,
+                    disabled: false,
+                    errorMessage: '',
+                    onInput: (event) => {
+                        const value = event.target.value;
+                        this.onChanges(name, value);
+                    },
+                };
+            return this.subscribedFields[name];
+        };
+        this.signal = (partialSignal) => {
+            if (Array.isArray(partialSignal)) {
+                partialSignal.forEach(field => {
+                    if (this.subscribedFields[field.name])
+                        Object.assign(this.subscribedFields[field.name], field);
+                });
+            }
+            else {
+                Object.values(this.subscribedFields).forEach(field => Object.assign(field, partialSignal));
+            }
+        };
+        this.onChanges = async (name, value) => {
+            if (!this.isSubmitted && this.validationType !== 'always')
+                return;
+            const wasError = this.subscribedFields[name].isError;
+            try {
+                // @ts-ignore
+                this.schemaObject.fields[name].validateSync(value);
+                this.signal([{ name, isError: false }]);
+                if (wasError !== false)
+                    this.context.renderControl = {};
+            }
+            catch (error) {
+                if (error.message) {
+                    this.signal([{ name, isError: true, errorMessage: error.message }]);
+                    this.context.renderControl = {};
+                }
+            }
+        };
+        this.context = context;
+        this.schemaObject = schemaObject;
+        this.formController = { onSubmit: this.onSubmit };
+        if (formStateOptions === null || formStateOptions === void 0 ? void 0 : formStateOptions.validationType)
+            this.validationType = formStateOptions.validationType;
+    }
+}

package/dist/collection/global/lib/image-expansion.js

@@ -0,0 +1,69 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+export function openImageViewer(context, target, imageSrc) {
+    if (context.expandedImage === imageSrc)
+        return;
+    context.originalImage = target;
+    const expandedImageRef = context.el.shadowRoot.getElementById('expanded-image');
+    expandedImageRef.src = target.src;
+    document.addEventListener('keydown', context.closeImageListener);
+    const rect = target.getBoundingClientRect();
+    document.body.style.overflow = 'hidden';
+    Object.assign(expandedImageRef.style, {
+        top: `${rect.top}px`,
+        pointerEvents: 'auto',
+        left: `${rect.left}px`,
+        transitionDuration: '0s',
+        width: `${rect.width}px`,
+        height: `${rect.height}px`,
+    });
+    setTimeout(() => {
+        const naturalWidth = target.naturalWidth;
+        const naturalHeight = target.naturalHeight;
+        const maxWidth = window.innerWidth - 160;
+        const maxHeight = window.innerHeight - 32;
+        const aspectRatio = naturalWidth / naturalHeight;
+        let width, height;
+        if (maxWidth / aspectRatio <= maxHeight) {
+            width = maxWidth;
+            height = maxWidth / aspectRatio;
+        }
+        else {
+            height = maxHeight;
+            width = maxHeight * aspectRatio;
+        }
+        expandedImageRef.style.transitionDuration = '0.3s';
+        Object.assign(expandedImageRef.style, {
+            opacity: '1',
+            width: `${width}px`,
+            height: `${height}px`,
+            top: `${(window.innerHeight - height) / 2}px`,
+            left: `${(window.innerWidth - width) / 2}px`,
+        });
+        context.expandedImage = imageSrc;
+    }, 200);
+}
+export function closeImageViewer(context, event) {
+    if (event && event.key !== 'Escape')
+        return;
+    document.removeEventListener('keydown', context.closeImageListener);
+    const expandedImageRef = context.el.shadowRoot.getElementById('expanded-image');
+    const rect = context.originalImage.getBoundingClientRect();
+    Object.assign(expandedImageRef.style, {
+        top: `${rect.top}px`,
+        pointerEvents: 'none',
+        left: `${rect.left}px`,
+        width: `${rect.width}px`,
+        height: `${rect.height}px`,
+        transitionDuration: '0.3s',
+    });
+    setTimeout(() => {
+        expandedImageRef.src = '';
+        expandedImageRef.style.opacity = '0';
+        expandedImageRef.style.transitionDuration = '0s';
+    }, 300);
+    document.body.style.overflow = '';
+    context.expandedImage = null;
+}

package/dist/collection/global/lib/utils.js

@@ -0,0 +1,7 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}

package/dist/collection/global/types/components.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/global/types/part-information.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/global/types/vehicle-information.js

@@ -0,0 +1,5 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+export const dev = false;

package/dist/collection/index.js

@@ -0,0 +1 @@
+export {};