@ppg_pl/tinting 0.0.0

package/dist/types/components/colorinfo/index.d.ts

@@ -0,0 +1,19 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Color, Product } from '../../types';
+export declare class MyColorInfo {
+  currentColor: Color;
+  shop: string;
+  product: string;
+  baselink: string;
+  data: Product | null;
+  isMobile: boolean;
+  infoBoxWidth: number | null;
+  closeImage: string;
+  onCurrentColor: EventEmitter<Color>;
+  closeInfoBox: EventEmitter;
+  goToProduct: () => void;
+  onCloseButtonClick: () => void;
+  renderSliderOrImage: () => any;
+  capitalizeFirstLetter: (string: string) => string;
+  render(): any;
+}

package/dist/types/components/component/index.d.ts

@@ -0,0 +1,18 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Color } from '../../types';
+export declare class MyModalBundle {
+  modalEl: HTMLElement;
+  onSelectedColor: EventEmitter<Color>;
+  shop: string;
+  product: string;
+  baselink: string;
+  colorname: string | null;
+  show: boolean;
+  readyToClose: boolean;
+  open(): Promise<void>;
+  close(): Promise<void>;
+  setReadyToCloseHandler(value: CustomEvent): void;
+  closeModalHandler(): void;
+  handleSelectedColor(event: CustomEvent<Color>): void;
+  render(): any;
+}

package/dist/types/components/header/index.d.ts

@@ -0,0 +1,35 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class ModalHeader {
+  modalName: string | null;
+  modalLogo: string | null;
+  modalDescription: string;
+  selectedColorFamily: string | null;
+  shop: string;
+  productName: string;
+  isMobile: boolean;
+  sampleSelected: EventEmitter<number>;
+  colorFamilySelected: EventEmitter<string>;
+  closeImage: string;
+  productSamples: any[];
+  closeModal: EventEmitter;
+  onLogoClick: EventEmitter<void>;
+  onResetCategory: EventEmitter<void>;
+  colorFamilies: any[];
+  handleClose: () => void;
+  handleLogoClick: () => void;
+  handleReset: () => void;
+  private handleSampleSelect;
+  private sortColorFamiliesByHex;
+  private fetchColorFamilies;
+  /**
+   * Adjusts the brightness of a hexadecimal color
+   * @param hex The hexadecimal color code
+   * @param percent The percentage to adjust brightness by
+   * @returns RGB color string
+   */
+  private adjustBrightness;
+  private getGradientFromHex;
+  private selectColorFamily;
+  componentWillLoad(): void;
+  render(): any;
+}

package/dist/types/components/loader/index.d.ts

@@ -0,0 +1,3 @@
+export declare class MyLoader {
+  render(): any;
+}

package/dist/types/components/modal/__mocks__/index.d.ts

@@ -0,0 +1,415 @@
+export declare const fetchProductResponse: {
+  data: ({
+    id: number;
+    attributes: {
+      name: string;
+      modalName: string;
+      modalDescription: string;
+      slug: string;
+      useColorImage: boolean;
+      createdAt: string;
+      updatedAt: string;
+      publishedAt: string;
+      modalLogo: {
+        data: {
+          id: number;
+          attributes: {
+            name: string;
+            alternativeText: string;
+            caption: string;
+            width: number;
+            height: number;
+            formats: {
+              small: {
+                ext: string;
+                url: string;
+                hash: string;
+                mime: string;
+                name: string;
+                path: null;
+                size: number;
+                width: number;
+                height: number;
+                provider_metadata: {
+                  public_id: string;
+                  resource_type: string;
+                };
+              };
+              thumbnail: {
+                ext: string;
+                url: string;
+                hash: string;
+                mime: string;
+                name: string;
+                path: null;
+                size: number;
+                width: number;
+                height: number;
+                provider_metadata: {
+                  public_id: string;
+                  resource_type: string;
+                };
+              };
+            };
+            hash: string;
+            ext: string;
+            mime: string;
+            size: number;
+            url: string;
+            previewUrl: null;
+            provider: string;
+            provider_metadata: {
+              public_id: string;
+              resource_type: string;
+            };
+            createdAt: string;
+            updatedAt: string;
+          };
+        };
+      };
+      images: {
+        data: null;
+      };
+      shops: {
+        data: {
+          id: number;
+          attributes: {
+            name: string;
+            createdAt: string;
+            updatedAt: string;
+            publishedAt: string;
+          };
+        }[];
+      };
+      categories: {
+        data: never[];
+      };
+    };
+  } | {
+    id: number;
+    attributes: {
+      name: string;
+      modalName: string;
+      modalDescription: string;
+      slug: string;
+      useColorImage: boolean;
+      createdAt: string;
+      updatedAt: string;
+      publishedAt: string;
+      modalLogo: {
+        data: {
+          id: number;
+          attributes: {
+            name: string;
+            alternativeText: string;
+            caption: string;
+            width: number;
+            height: number;
+            formats: {
+              small: {
+                ext: string;
+                url: string;
+                hash: string;
+                mime: string;
+                name: string;
+                path: null;
+                size: number;
+                width: number;
+                height: number;
+                provider_metadata: {
+                  public_id: string;
+                  resource_type: string;
+                };
+              };
+              thumbnail: {
+                ext: string;
+                url: string;
+                hash: string;
+                mime: string;
+                name: string;
+                path: null;
+                size: number;
+                width: number;
+                height: number;
+                provider_metadata: {
+                  public_id: string;
+                  resource_type: string;
+                };
+              };
+            };
+            hash: string;
+            ext: string;
+            mime: string;
+            size: number;
+            url: string;
+            previewUrl: null;
+            provider: string;
+            provider_metadata: {
+              public_id: string;
+              resource_type: string;
+            };
+            createdAt: string;
+            updatedAt: string;
+          };
+        };
+      };
+      images: {
+        data: {
+          id: number;
+          attributes: {
+            name: string;
+            alternativeText: string;
+            caption: string;
+            width: number;
+            height: number;
+            formats: {
+              small: {
+                ext: string;
+                url: string;
+                hash: string;
+                mime: string;
+                name: string;
+                path: null;
+                size: number;
+                width: number;
+                height: number;
+                provider_metadata: {
+                  public_id: string;
+                  resource_type: string;
+                };
+              };
+              medium: {
+                ext: string;
+                url: string;
+                hash: string;
+                mime: string;
+                name: string;
+                path: null;
+                size: number;
+                width: number;
+                height: number;
+                provider_metadata: {
+                  public_id: string;
+                  resource_type: string;
+                };
+              };
+              thumbnail: {
+                ext: string;
+                url: string;
+                hash: string;
+                mime: string;
+                name: string;
+                path: null;
+                size: number;
+                width: number;
+                height: number;
+                provider_metadata: {
+                  public_id: string;
+                  resource_type: string;
+                };
+              };
+            };
+            hash: string;
+            ext: string;
+            mime: string;
+            size: number;
+            url: string;
+            previewUrl: null;
+            provider: string;
+            provider_metadata: {
+              public_id: string;
+              resource_type: string;
+            };
+            createdAt: string;
+            updatedAt: string;
+          };
+        }[];
+      };
+      shops: {
+        data: {
+          id: number;
+          attributes: {
+            name: string;
+            createdAt: string;
+            updatedAt: string;
+            publishedAt: string;
+          };
+        }[];
+      };
+      categories: {
+        data: {
+          id: number;
+          attributes: {
+            name: string;
+            hex: string;
+            createdAt: string;
+            updatedAt: string;
+          };
+        }[];
+      };
+    };
+  } | {
+    id: number;
+    attributes: {
+      name: string;
+      modalName: string;
+      modalDescription: string;
+      slug: string;
+      useColorImage: boolean;
+      createdAt: string;
+      updatedAt: string;
+      publishedAt: string;
+      modalLogo: {
+        data: {
+          id: number;
+          attributes: {
+            name: string;
+            alternativeText: string;
+            caption: string;
+            width: number;
+            height: number;
+            formats: {
+              small: {
+                ext: string;
+                url: string;
+                hash: string;
+                mime: string;
+                name: string;
+                path: null;
+                size: number;
+                width: number;
+                height: number;
+                provider_metadata: {
+                  public_id: string;
+                  resource_type: string;
+                };
+              };
+              thumbnail: {
+                ext: string;
+                url: string;
+                hash: string;
+                mime: string;
+                name: string;
+                path: null;
+                size: number;
+                width: number;
+                height: number;
+                provider_metadata: {
+                  public_id: string;
+                  resource_type: string;
+                };
+              };
+            };
+            hash: string;
+            ext: string;
+            mime: string;
+            size: number;
+            url: string;
+            previewUrl: null;
+            provider: string;
+            provider_metadata: {
+              public_id: string;
+              resource_type: string;
+            };
+            createdAt: string;
+            updatedAt: string;
+          };
+        };
+      };
+      images: {
+        data: {
+          id: number;
+          attributes: {
+            name: string;
+            alternativeText: null;
+            caption: null;
+            width: number;
+            height: number;
+            formats: {
+              small: {
+                ext: string;
+                url: string;
+                hash: string;
+                mime: string;
+                name: string;
+                path: null;
+                size: number;
+                width: number;
+                height: number;
+                provider_metadata: {
+                  public_id: string;
+                  resource_type: string;
+                };
+              };
+              medium: {
+                ext: string;
+                url: string;
+                hash: string;
+                mime: string;
+                name: string;
+                path: null;
+                size: number;
+                width: number;
+                height: number;
+                provider_metadata: {
+                  public_id: string;
+                  resource_type: string;
+                };
+              };
+              thumbnail: {
+                ext: string;
+                url: string;
+                hash: string;
+                mime: string;
+                name: string;
+                path: null;
+                size: number;
+                width: number;
+                height: number;
+                provider_metadata: {
+                  public_id: string;
+                  resource_type: string;
+                };
+              };
+            };
+            hash: string;
+            ext: string;
+            mime: string;
+            size: number;
+            url: string;
+            previewUrl: null;
+            provider: string;
+            provider_metadata: {
+              public_id: string;
+              resource_type: string;
+            };
+            createdAt: string;
+            updatedAt: string;
+          };
+        }[];
+      };
+      shops: {
+        data: {
+          id: number;
+          attributes: {
+            name: string;
+            createdAt: string;
+            updatedAt: string;
+            publishedAt: string;
+          };
+        }[];
+      };
+      categories: {
+        data: never[];
+      };
+    };
+  })[];
+  meta: {
+    pagination: {
+      page: number;
+      pageSize: number;
+      pageCount: number;
+      total: number;
+    };
+  };
+};

package/dist/types/components/modal/index.d.ts

@@ -0,0 +1,77 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Color, Product } from '../../types';
+declare global {
+  interface Window {
+    dataLayer: Record<string, any>[];
+  }
+}
+export declare class Modal {
+  private boxDesktopWidth;
+  private boxMobileWidth;
+  private desktopPadding;
+  private mobilePadding;
+  private mediumBreakpoint;
+  private colorTimerInterval;
+  onSelectedColorEmit: EventEmitter<Color>;
+  clearSearchText: EventEmitter;
+  modalEl: HTMLElement;
+  shop: string;
+  product: string;
+  baselink: string;
+  selectedcolor: string | null;
+  arrowDown: string;
+  chunksNum: number;
+  data: Product | null;
+  preloader: boolean;
+  loading: boolean;
+  currentColor: Color | null;
+  currentIndex: number | null;
+  infoBoxWidth: number | null;
+  boxWidth: number;
+  padding: number;
+  isMobile: boolean;
+  showRange: boolean;
+  colorCategories: string[] | null;
+  selectedCategory: any;
+  page: number;
+  colorIsSelected: boolean;
+  colorsList: Color[];
+  hasMore: boolean;
+  filters: any;
+  debouncedSearchColorsHandler: (event: CustomEvent) => void;
+  constructor();
+  setInfoBoxWidth(newValue: number): void;
+  watchPropHandler(newValue: Product): void;
+  private clearInterval;
+  private colorTimer;
+  open(): Promise<void>;
+  close: EventEmitter;
+  closeModalHandler(): void;
+  readyToCLose: EventEmitter;
+  handleReadyToClose(value: boolean): void;
+  closeInfoBoxHandler(): void;
+  handleEmitColor(event: CustomEvent<Color>): void;
+  private chunks;
+  private calculateBoxCount;
+  private displayForMobile;
+  handleResize(): void;
+  private sortColorsBySimilarity;
+  private getColorHueGroup;
+  private sortColorsByHueAndSimilarity;
+  private fetchColorsData;
+  private loadProductData;
+  private loadMoreColors;
+  private updateFilterAndFetch;
+  searchColor(event: CustomEvent): Promise<void>;
+  handleColorFamilySelected(event: CustomEvent): void;
+  searchColorsHandler(event: CustomEvent): void;
+  private handleSampleSelect;
+  handleScroll(_event: Event, modalContent: HTMLElement): void;
+  private openSeletedColor;
+  componentWillLoad(): void;
+  componentWillRender(): void;
+  private resetColors;
+  private resetAllFilters;
+  private resetSelectedCategory;
+  render(): any;
+}

package/dist/types/components/search/index.d.ts

@@ -0,0 +1,15 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class MySearch {
+  productname: string;
+  shopname: string;
+  isMobile: boolean;
+  searchIcon: string;
+  searchText: string | null;
+  searchColors: EventEmitter;
+  fetchColorsByName: (text: string) => void;
+  private debouncedInputChangeValue;
+  private onInputChangeValue;
+  fetchColorsByNameHandle(newValue: string): void;
+  clearSearchTextHandler(): void;
+  render(): any;
+}

package/dist/types/components/select/index.d.ts

@@ -0,0 +1,31 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class MySelect {
+  el: HTMLElement;
+  options: any[];
+  placeholder: string;
+  isMobile: boolean;
+  searchIcon: string;
+  searchText: string;
+  filteredOptions: any[];
+  showDropdown: boolean;
+  selectedValue: string | null;
+  onReset: EventEmitter<void>;
+  selectValue: EventEmitter<{
+    key: string;
+    value: number | null;
+  }>;
+  inputValueChange: EventEmitter<string>;
+  private defaultOption;
+  private debouncedSearch;
+  private reset;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  private handleClickOutside;
+  private handleInput;
+  private selectOption;
+  private toggleDropdown;
+  updateOptions(newOptions: any[]): void;
+  clearSearchTextHandler(): void;
+  render(): any;
+}

package/dist/types/components/slider/index.d.ts

@@ -0,0 +1,15 @@
+import { Image } from '../../types';
+export declare class JcSwiper {
+  modalEl: HTMLElement;
+  slides: Image[];
+  shop: string;
+  product: string;
+  color: string;
+  private thumbs;
+  private swiper2;
+  initSwiper(): void;
+  componentDidLoad(): void;
+  update(): void;
+  colorInteraction: () => void;
+  render(): any;
+}