@ppg_pl/pallete 0.0.7 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -1
- package/dist/cjs/{index-160fcb6c.js → index-53e78fc8.js} +3 -1
- package/dist/cjs/index-53e78fc8.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/my-backdrop_8.cjs.entry.js +503 -253
- package/dist/cjs/my-backdrop_8.cjs.entry.js.map +1 -1
- package/dist/cjs/pallete.cjs.js +2 -2
- package/dist/collection/components/api/index.js +4 -2
- package/dist/collection/components/api/index.js.map +1 -1
- package/dist/collection/components/api/services.js +31 -64
- package/dist/collection/components/api/services.js.map +1 -1
- package/dist/collection/components/my-colorinfo/my-colorinfo.js +6 -4
- package/dist/collection/components/my-colorinfo/my-colorinfo.js.map +1 -1
- package/dist/collection/components/my-loader/my-loader.css +1 -1
- package/dist/collection/components/my-modal/my-modal.js +65 -47
- package/dist/collection/components/my-modal/my-modal.js.map +1 -1
- package/dist/collection/components/my-search/my-search.js +28 -2
- package/dist/collection/components/my-search/my-search.js.map +1 -1
- package/dist/collection/components/my-slider/index.js +5 -8
- package/dist/collection/components/my-slider/index.js.map +1 -1
- package/dist/collection/types.js.map +1 -1
- package/dist/components/index2.js +25 -3
- package/dist/components/index2.js.map +1 -1
- package/dist/components/my-colorinfo2.js +4 -3
- package/dist/components/my-colorinfo2.js.map +1 -1
- package/dist/components/my-loader2.js +1 -1
- package/dist/components/my-loader2.js.map +1 -1
- package/dist/components/my-modal2.js +458 -248
- package/dist/components/my-modal2.js.map +1 -1
- package/dist/components/my-search2.js +20 -3
- package/dist/components/my-search2.js.map +1 -1
- package/dist/esm/{index-943c259f.js → index-b0145abf.js} +3 -1
- package/dist/esm/index-b0145abf.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/my-backdrop_8.entry.js +503 -253
- package/dist/esm/my-backdrop_8.entry.js.map +1 -1
- package/dist/esm/pallete.js +3 -3
- package/dist/pallete/p-037cfde2.entry.js +2 -0
- package/dist/pallete/p-037cfde2.entry.js.map +1 -0
- package/dist/pallete/{p-c77aaa54.js → p-c6a049a2.js} +2 -2
- package/dist/pallete/p-c6a049a2.js.map +1 -0
- package/dist/pallete/pallete.esm.js +1 -1
- package/dist/pallete/pallete.esm.js.map +1 -1
- package/dist/types/components/api/index.d.ts +2 -1
- package/dist/types/components/api/services.d.ts +3 -3
- package/dist/types/components/my-modal/my-modal.d.ts +1 -0
- package/dist/types/components/my-search/my-search.d.ts +2 -0
- package/dist/types/components/my-slider/index.d.ts +2 -2
- package/dist/types/components.d.ts +5 -4
- package/dist/types/types.d.ts +35 -24
- package/package.json +4 -3
- package/www/build/p-037cfde2.entry.js +2 -0
- package/www/build/p-037cfde2.entry.js.map +1 -0
- package/www/build/{p-c77aaa54.js → p-c6a049a2.js} +2 -2
- package/www/build/p-c6a049a2.js.map +1 -0
- package/www/build/pallete.esm.js +1 -1
- package/www/build/pallete.esm.js.map +1 -1
- package/www/index.html +1 -1
- package/dist/cjs/index-160fcb6c.js.map +0 -1
- package/dist/esm/index-943c259f.js.map +0 -1
- package/dist/pallete/p-c77aaa54.js.map +0 -1
- package/dist/pallete/p-deffcd80.entry.js +0 -2
- package/dist/pallete/p-deffcd80.entry.js.map +0 -1
- package/www/build/p-825a7d1d.js +0 -163
- package/www/build/p-c77aaa54.js.map +0 -1
- package/www/build/p-deffcd80.entry.js +0 -2
- package/www/build/p-deffcd80.entry.js.map +0 -1
- package/www/build/p-fd390eef.css +0 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"my-modal.js","sourceRoot":"","sources":["../../../src/components/my-modal/my-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Method, Element, Prop, Event, EventEmitter, h, State, getAssetPath, Listen, Watch } from '@stencil/core';\nimport { ApiService } from '../api';\nimport { setDataLayer } from '../../gtmUtils';\nimport { Color, Data, PaginationData, Product, Shop } from '../../types';\nimport { fetchCategoryColorsQuery, fetchColorByNumber, fetchProductColorsQuery } from '../api/services';\n\ndeclare global {\n interface Window {\n dataLayer: Record<string, any>[];\n }\n}\n\n@Component({\n tag: 'my-modal',\n styleUrl: 'my-modal.scss',\n assetsDirs: ['assets'],\n})\nexport class MyModal {\n private boxDesktopWidth = 130;\n private boxMobileWidth = 85;\n private desktopPadding = 75;\n private mobilePadding = 35;\n private mediumBreakpoint = 1024;\n private colorTimerInterval: ReturnType<typeof setInterval> | undefined;\n // private observer: IntersectionObserver;\n\n @Element() modalEl: HTMLElement;\n\n @Prop() shop: string;\n @Prop() product: string;\n @Prop() closeImage = 'close.png';\n @Prop() arrowDown = 'arrow_down.png';\n\n @State() chunksNum = 12;\n @State() data: Product | null = null;\n @State() preloader = false;\n @State() loading = false;\n @State() colors: PaginationData<Color> | null = null;\n @State() currentColor: Color | null = null;\n @State() currentIndex: number | null = null;\n @State() infoBoxWidth: number | null = null;\n @State() boxWidth: number = this.boxDesktopWidth; // box width with gap\n @State() padding: number = this.desktopPadding;\n @State() isMobile: boolean = false;\n @State() showRange: boolean = false;\n @State() colorCategories: string[] | null = null;\n @State() selectedCategory: any = null;\n @State() page = 1;\n\n @Watch('chunksNum')\n setInfoBoxWidth(newValue: number) {\n this.infoBoxWidth = newValue * this.boxWidth;\n }\n\n @Watch('data')\n watchPropHandler(newValue: Product) {\n if (newValue.categories.data.length > 0) {\n this.showRange = true;\n this.handleCategoryClick(newValue.categories.data[0]);\n } else {\n this.fetchProductColors(String(newValue.id));\n }\n }\n\n private clearInterval = () => {\n this.colorTimerInterval && clearInterval(this.colorTimerInterval);\n this.colorTimerInterval = undefined;\n };\n\n private colorTimer = () => {\n if (this.currentColor && this.currentColor.id) {\n this.colorTimerInterval = setInterval(() => {\n this.currentColor?.name &&\n setDataLayer({\n event: 'ColorTimer',\n shop: this.shop,\n product: this.product,\n color: this.currentColor?.name,\n timer: '10',\n });\n }, 10000);\n } else {\n this.clearInterval();\n }\n };\n\n @Method()\n async open() {\n this.modalEl.style.display = 'block';\n }\n @Event() close: EventEmitter;\n closeModalHandler() {\n this.close.emit();\n }\n\n @Event() readyToCLose: EventEmitter;\n handleReadyToClose(value: boolean) {\n this.readyToCLose.emit({ observable: value });\n }\n\n @Listen('closeInfoBox')\n closeInfoBoxHandler() {\n this.currentColor = null;\n this.currentIndex = null;\n }\n\n private chunks = (xs: Color[], y: Color[][] = []): Color[][] => {\n return xs.length === 0 ? y : this.chunks(xs.slice(this.chunksNum), y.concat([xs.slice(0, this.chunksNum)]));\n };\n\n private calculateBoxCount = () => {\n const modalWidth = this.modalEl.children && this.modalEl.children[0] && this.modalEl.children[0]?.clientWidth - this.padding;\n const boxWidth = this.boxWidth;\n\n const calc = Math.floor(modalWidth / boxWidth);\n\n const boxesCount = calc;\n\n if (!this.preloader) this.chunksNum = boxesCount;\n };\n\n private displayForMobile = () => {\n if (window.innerWidth < this.mediumBreakpoint) {\n this.boxWidth = this.boxMobileWidth;\n this.padding = this.mobilePadding;\n this.isMobile = true;\n } else {\n this.isMobile = false;\n this.boxWidth = this.boxDesktopWidth;\n this.padding = this.desktopPadding;\n }\n };\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n this.calculateBoxCount();\n this.displayForMobile();\n }\n\n private fetchProductData = async () => {\n try {\n const response = await ApiService.getData(\n `products?populate[0]=modalLogo&populate[1]=images&populate[2]=shops&populate[3]=categories&filters[name][$contains]=${this.product}`,\n );\n\n if (response) {\n if (response.data[0].attributes.shops.data.find((shop: Data<Shop>) => shop.attributes.name === this.shop).id) {\n this.data = {\n ...response.data[0].attributes,\n id: response.data[0].id,\n };\n }\n }\n } catch (error) {\n console.error(error);\n } finally {\n this.preloader = false;\n }\n };\n\n // TODO:\n\n private fetchProductColors = async (id: string, page?: number) => {\n this.loading = true;\n\n try {\n const response = await ApiService.getData(`colors?${fetchProductColorsQuery(id, page)}`);\n if (response) {\n this.colors = {\n list:\n response &&\n response.data &&\n response.data.map((item: Data<Color>) => ({\n id: item.id,\n ...item.attributes,\n })),\n pagination: response.meta.pagination,\n };\n }\n } catch (error) {\n console.error(error);\n } finally {\n this.loading = false;\n }\n };\n\n private fetchCategoryColors = async (color: Color) => {\n this.loading = true;\n\n try {\n const response = await ApiService.getData(`colors?${fetchCategoryColorsQuery(color)}`);\n if (response) {\n this.colors = {\n list:\n response &&\n response.data &&\n response.data.map((item: Data<Color>) => ({\n id: item.id,\n ...item.attributes,\n })),\n pagination: response.meta.pagination,\n };\n }\n } catch (error) {\n console.error(error);\n } finally {\n this.loading = false;\n }\n };\n\n @Listen('searchColors')\n async searchColorsHandler(event: CustomEvent) {\n // if search is empty set to first category to not showing whole product colors\n if (event.detail === '') {\n this.handleCategoryClick(this.data?.categories.data[0]);\n }\n\n try {\n if (this.data && this.data.id && event.detail !== '') {\n this.selectedCategory = null;\n const response = await ApiService.getData(`colors?${fetchColorByNumber(Number(this.data.id), event.detail)}`);\n if (response) {\n this.colors = {\n list:\n response &&\n response.data &&\n response.data.map((item: Data<Color>) => ({\n id: item.id,\n ...item.attributes,\n })),\n pagination: response.meta.pagination,\n };\n }\n }\n } catch (error) {\n console.error(error);\n }\n }\n\n // private onIntersection = async (entries: any) => {\n // console.log(entries[0]);\n // if (entries[0].intersectionRatio === 0) {\n // console.log('d');\n // }\n // };\n\n // private handleObserve = () => {\n // console.log(this.modalEl.shadowRoot);\n // const boxesList: any = (this.modalEl as any).querySelector('.my-modal__wrapper');\n // console.log(boxesList);\n // if (boxesList) {\n // this.observer = new IntersectionObserver(this.onIntersection);\n // this.observer.observe(boxesList);\n // }\n // };\n\n private onPage = (page: number) => {\n this.data && this.fetchProductColors(String(this.data.id), page);\n this.page = page;\n this.currentColor = null;\n this.currentIndex = null;\n };\n\n componentWillLoad() {\n this.preloader = true;\n this.fetchProductData();\n }\n\n componentWillRender() {\n this.displayForMobile();\n this.calculateBoxCount();\n this.colorTimer();\n }\n\n private handleCategoryClick = (color?: Color) => {\n if (this.selectedCategory && color && this.selectedCategory.id === color.id && !this.showRange) {\n this.data && this.fetchProductColors(String(this.data.id));\n this.selectedCategory = null;\n } else {\n color && this.fetchCategoryColors(color);\n this.selectedCategory = color;\n }\n this.currentColor = null;\n };\n\n render() {\n return (\n <div class={`my-modal`} onMouseEnter={() => this.handleReadyToClose(false)} onMouseLeave={() => this.handleReadyToClose(true)}>\n {this.preloader && (\n <div class={'loader'}>\n <my-loader></my-loader>\n </div>\n )}\n {!this.preloader && (\n <button class=\"my-modal__close\" onClick={() => this.closeModalHandler()}>\n <img src={getAssetPath(`./assets/${this.closeImage}`)} alt=\"closebtn\" />\n </button>\n )}\n {!this.preloader && this.data && this.data.modalLogo && <img src={`${this.data?.modalLogo?.data?.attributes?.url}`} alt=\"modal-logo\" />}\n {!this.preloader && (\n <p class=\"my-modal__see-more\">\n {this.data?.modalDescription}\n {/* <img src={getAssetPath(`./assets/${this.arrowDown}`)} alt=\"arrow_down\" /> */}\n </p>\n )}\n {this.showRange && (\n <div class={'categories'}>\n {this.data && <my-search productId={Number(this.data?.id)} isMobile={this.isMobile}></my-search>}\n\n <div class={'categories__container'} style={{ maxWidth: `${this.infoBoxWidth}px` }}>\n {this.data?.categories.data.map((c: Color & { attributes: Color }) => (\n <my-colorbox\n key={c.id}\n onClick={() => this.handleCategoryClick(c)}\n color={c.attributes.hex}\n name={c.attributes.name}\n shop={this.shop}\n product={this.product}\n isCategoryActive={this.selectedCategory?.id === c.id}\n ></my-colorbox>\n ))}\n </div>\n {this.isMobile && (\n <div class={'categories__slide-information'} style={{ width: `${this.infoBoxWidth}px` }}>\n <span>Przewiń w lewo</span>\n <span>Przewiń w prawo</span>\n </div>\n )}\n </div>\n )}\n <div class={'my-modal__wrapper'}>\n {this.loading && <my-loader></my-loader>}\n {!this.loading && this.colors && (\n <div class={'container_boxes'}>\n {this.colors.list.length > 0 ? (\n this.chunks(this.colors.list).map((color: Color[], index: number) => {\n return (\n <div key={index} class=\"boxes\">\n <div class=\"boxes__list\">\n {color.map((c: Color) => (\n <my-colorbox\n key={c.id}\n onClick={() => [\n this.currentColor?.id ? (this.currentColor?.id === c.id ? (this.currentColor = null) : (this.currentColor = c)) : (this.currentColor = c),\n (this.currentIndex = index),\n setDataLayer({\n event: 'ColorClick',\n shop: this.shop,\n product: this.product,\n color: c.name,\n }),\n this.currentColor?.id && this.clearInterval(),\n ]}\n color={c.hex}\n name={c.name}\n isActive={this.currentColor?.id === c.id}\n shop={this.shop}\n product={this.product}\n ></my-colorbox>\n ))}\n </div>\n\n {this.currentColor?.id && index === this.currentIndex && (\n <my-colorinfo\n currentColor={this.currentColor}\n shop={this.shop}\n product={this.product}\n data={this.data}\n isMobile={this.isMobile}\n infoBoxWidth={this.infoBoxWidth}\n ></my-colorinfo>\n )}\n </div>\n );\n })\n ) : (\n <p>Brak wyników</p>\n )}\n {this.colors.pagination.pageCount > 1 && (\n <div class={'pagination'}>\n {Array.from({ length: this.colors.pagination.pageCount }).map((page: any, i) => (\n <span\n class={i + 1 === this.page ? 'current' : ''}\n onClick={e => {\n e.preventDefault();\n this.onPage(i + 1);\n }}\n key={`#${i + 1 + page}`}\n >\n {i + 1}\n </span>\n ))}\n </div>\n )}\n </div>\n )}\n </div>{' '}\n {!this.preloader && this.isMobile && (\n <button class=\"button\" onClick={() => this.closeModalHandler()}>\n Zamknij\n </button>\n )}\n </div>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"my-modal.js","sourceRoot":"","sources":["../../../src/components/my-modal/my-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Method, Element, Prop, Event, EventEmitter, h, State, getAssetPath, Listen, Watch } from '@stencil/core';\nimport { APIURL, ApiService, accessToken } from '../api';\nimport { setDataLayer } from '../../gtmUtils';\nimport { Color, PaginationData, Product, ProductCategoryRelation, ProductShopRelation } from '../../types';\nimport { fetchCategoryColorsQuery, fetchColorByNumber, fetchProductColorsQuery, limit } from '../api/services';\n\ndeclare global {\n interface Window {\n dataLayer: Record<string, any>[];\n }\n}\n\n@Component({\n tag: 'my-modal',\n styleUrl: 'my-modal.scss',\n assetsDirs: ['assets'],\n})\nexport class MyModal {\n private boxDesktopWidth = 130;\n private boxMobileWidth = 85;\n private desktopPadding = 75;\n private mobilePadding = 35;\n private mediumBreakpoint = 1024;\n private colorTimerInterval: ReturnType<typeof setInterval> | undefined;\n\n @Event({ bubbles: true, composed: true }) clearSearchText: EventEmitter;\n @Element() modalEl: HTMLElement;\n\n @Prop() shop: string;\n @Prop() product: string;\n @Prop() closeImage = 'close.png';\n @Prop() arrowDown = 'arrow_down.png';\n\n @State() chunksNum = 12;\n @State() data: Product | null = null;\n @State() preloader = false;\n @State() loading = false;\n @State() colors: PaginationData<Color> | null = null;\n @State() currentColor: Color | null = null;\n @State() currentIndex: number | null = null;\n @State() infoBoxWidth: number | null = null;\n @State() boxWidth: number = this.boxDesktopWidth; // box width with gap\n @State() padding: number = this.desktopPadding;\n @State() isMobile: boolean = false;\n @State() showRange: boolean = false;\n @State() colorCategories: string[] | null = null;\n @State() selectedCategory: any = null;\n @State() page = 1;\n\n @Watch('chunksNum')\n setInfoBoxWidth(newValue: number) {\n this.infoBoxWidth = newValue * this.boxWidth;\n }\n\n @Watch('data')\n watchPropHandler(newValue: Product) {\n if (newValue.Category.length > 0) {\n this.showRange = true;\n this.handleCategoryClick(newValue.Category[0].Category_id.id);\n } else {\n this.fetchProductColors(String(newValue.id));\n }\n }\n\n private clearInterval = () => {\n this.colorTimerInterval && clearInterval(this.colorTimerInterval);\n this.colorTimerInterval = undefined;\n };\n\n private colorTimer = () => {\n if (this.currentColor && this.currentColor.id) {\n this.colorTimerInterval = setInterval(() => {\n this.currentColor?.name &&\n setDataLayer({\n event: 'ColorTimer',\n shop: this.shop,\n product: this.product,\n color: this.currentColor?.name,\n timer: '10',\n });\n }, 10000);\n } else {\n this.clearInterval();\n }\n };\n\n @Method()\n async open() {\n this.modalEl.style.display = 'block';\n }\n @Event() close: EventEmitter;\n closeModalHandler() {\n this.close.emit();\n }\n\n @Event() readyToCLose: EventEmitter;\n handleReadyToClose(value: boolean) {\n this.readyToCLose.emit({ observable: value });\n }\n\n @Listen('closeInfoBox')\n closeInfoBoxHandler() {\n this.currentColor = null;\n this.currentIndex = null;\n }\n\n private chunks = (xs: Color[], y: Color[][] = []): Color[][] => {\n return xs.length === 0 ? y : this.chunks(xs.slice(this.chunksNum), y.concat([xs.slice(0, this.chunksNum)]));\n };\n\n private calculateBoxCount = () => {\n const modalWidth = this.modalEl.children && this.modalEl.children[0] && this.modalEl.children[0]?.clientWidth - this.padding;\n const boxWidth = this.boxWidth;\n\n const calc = Math.floor(modalWidth / boxWidth);\n\n const boxesCount = calc;\n\n if (!this.preloader) this.chunksNum = boxesCount;\n };\n\n private displayForMobile = () => {\n if (window.innerWidth < this.mediumBreakpoint) {\n this.boxWidth = this.boxMobileWidth;\n this.padding = this.mobilePadding;\n this.isMobile = true;\n } else {\n this.isMobile = false;\n this.boxWidth = this.boxDesktopWidth;\n this.padding = this.desktopPadding;\n }\n };\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n this.calculateBoxCount();\n this.displayForMobile();\n }\n\n private fetchProductData = async () => {\n try {\n const shopResponse = await ApiService.getData(`items/Shop?filter[name][_eq]=${this.shop}`);\n const shop = shopResponse?.data[0];\n if (shop.id) {\n const response = await ApiService.getData(`items/Product?filter[name][_eq]=${this.product}&fields=*,images.*,Shop.*,Category.*.*.*.*`);\n const product = response?.data[0];\n\n if (product) {\n if (product.Shop.find((s: ProductShopRelation) => s.Shop_id === shop.id)) {\n this.data = {\n ...response.data[0],\n id: response.data[0].id,\n };\n } else {\n return null;\n }\n }\n }\n } catch (error) {\n console.error(error);\n } finally {\n this.preloader = false;\n }\n };\n\n private fetchProductColors = async (id: string, page?: number) => {\n this.loading = true;\n\n try {\n const response = await ApiService.getData(`items/Color?${fetchProductColorsQuery(id, page)}`);\n\n if (response) {\n this.colors = {\n list:\n response &&\n response.data &&\n response.data.map((item: Color) => ({\n ...item,\n })),\n pagination: response.meta,\n };\n }\n } catch (error) {\n console.error(error);\n } finally {\n this.loading = false;\n }\n };\n\n private fetchCategoryColors = async (id: number, page?: number) => {\n this.loading = true;\n\n try {\n const response = await ApiService.getData(`items/Color?${fetchCategoryColorsQuery(id, page)}`);\n\n if (response) {\n this.colors = {\n list:\n response &&\n response.data &&\n response.data.map((item: Color) => ({\n ...item,\n })),\n pagination: response.meta,\n };\n }\n } catch (error) {\n console.error(error);\n } finally {\n this.loading = false;\n }\n };\n\n @Listen('searchColors')\n async searchColorsHandler(event: CustomEvent) {\n this.loading = true;\n this.currentColor = null;\n // if search is empty set to first category to not showing whole product colors\n if (event.detail === '') {\n this.handleCategoryClick(this.selectedCategory);\n this.loading = true;\n }\n\n try {\n if (this.data && this.data.id && event.detail !== '') {\n const response = await ApiService.getData(`items/Color?${fetchColorByNumber(Number(this.selectedCategory), event.detail)}`);\n if (response) {\n this.colors = {\n list:\n (response &&\n response.data &&\n response.data.map((item: Color) => ({\n ...item,\n }))) ||\n [],\n pagination: response.meta,\n };\n }\n }\n } catch (error) {\n console.error(error);\n } finally {\n this.loading = false;\n }\n }\n\n private onPage = (page: number) => {\n if (this.data) {\n if (this.selectedCategory) {\n this.fetchCategoryColors(this.selectedCategory, page);\n } else {\n this.fetchProductColors(String(this.data.id), page);\n }\n }\n\n this.page = page;\n this.currentColor = null;\n this.currentIndex = null;\n };\n\n componentWillLoad() {\n this.preloader = true;\n this.fetchProductData();\n }\n\n componentWillRender() {\n this.displayForMobile();\n this.calculateBoxCount();\n this.colorTimer();\n }\n\n private handleCategoryClick = (color?: number) => {\n if (this.selectedCategory && color && this.selectedCategory === color && !this.showRange) {\n this.data && this.fetchProductColors(String(this.data.id));\n this.selectedCategory = null;\n } else {\n color && this.fetchCategoryColors(color);\n this.selectedCategory = color;\n }\n this.currentColor = null;\n this.clearSearchText.emit();\n };\n\n render() {\n console.log(this.colors);\n return (\n <div class={`my-modal`} onMouseEnter={() => this.handleReadyToClose(false)} onMouseLeave={() => this.handleReadyToClose(true)}>\n {this.preloader && (\n <div class={'loader'}>\n <my-loader></my-loader>\n </div>\n )}\n {!this.preloader && (\n <button class=\"my-modal__close\" onClick={() => this.closeModalHandler()}>\n <img src={getAssetPath(`./assets/${this.closeImage}`)} alt=\"closebtn\" />\n </button>\n )}\n {!this.preloader && this.data && this.data.modalLogo && <img src={`${APIURL}/assets/${this.data?.modalLogo}?access_token=${accessToken}`} alt=\"modal-logo\" />}\n {!this.preloader && this.data && (\n <p class=\"my-modal__see-more\">\n {this.data?.modalDescription}\n {/* <img src={getAssetPath(`./assets/${this.arrowDown}`)} alt=\"arrow_down\" /> */}\n </p>\n )}\n {this.showRange && (\n <div class={'categories'}>\n {this.data && <my-search productId={Number(this.data?.id)} isMobile={this.isMobile}></my-search>}\n\n <div class={'categories__container'} style={{ maxWidth: `${this.infoBoxWidth}px` }}>\n {this.data?.Category.map((c: ProductCategoryRelation) => (\n <my-colorbox\n key={c.id}\n onClick={() => this.handleCategoryClick(c.Category_id.id)}\n color={c.Category_id.hex}\n name={c.Category_id.category_name}\n shop={this.shop}\n product={this.product}\n isCategoryActive={this.selectedCategory === c.Category_id.id}\n ></my-colorbox>\n ))}\n </div>\n {this.isMobile && (\n <div class={'categories__slide-information'} style={{ width: `${this.infoBoxWidth}px` }}>\n <span>Przewiń w lewo</span>\n <span>Przewiń w prawo</span>\n </div>\n )}\n </div>\n )}\n <div class={'my-modal__wrapper'}>\n {this.loading && <my-loader></my-loader>}\n {!this.loading && this.colors && (\n <div class={'container_boxes'}>\n {this.colors.list.length > 0 ? (\n this.chunks(this.colors.list).map((color: Color[], index: number) => {\n return (\n <div key={index} class=\"boxes\">\n <div class=\"boxes__list\">\n {color.map((c: Color) => (\n <my-colorbox\n key={c.id}\n onClick={() => [\n this.currentColor?.id ? (this.currentColor?.id === c.id ? (this.currentColor = null) : (this.currentColor = c)) : (this.currentColor = c),\n (this.currentIndex = index),\n setDataLayer({\n event: 'ColorClick',\n shop: this.shop,\n product: this.product,\n color: c.name,\n }),\n this.currentColor?.id && this.clearInterval(),\n ]}\n color={c.hex}\n name={c.name}\n isActive={this.currentColor?.id === c.id}\n shop={this.shop}\n product={this.product}\n ></my-colorbox>\n ))}\n </div>\n\n {this.currentColor?.id && index === this.currentIndex && (\n <my-colorinfo\n currentColor={this.currentColor}\n shop={this.shop}\n product={this.product}\n data={this.data}\n isMobile={this.isMobile}\n infoBoxWidth={this.infoBoxWidth}\n ></my-colorinfo>\n )}\n </div>\n );\n })\n ) : (\n <p>Brak wyników</p>\n )}\n {this.colors.pagination.filter_count > limit && (\n <div class={'pagination'}>\n {Array.from({ length: Math.ceil(this.colors.pagination.filter_count / limit) }).map((_, i) => (\n <span\n class={i + 1 === this.page ? 'current' : ''}\n onClick={e => {\n e.preventDefault();\n this.onPage(i + 1);\n }}\n key={`#${i + 1}`}\n >\n {i + 1}\n </span>\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n {!this.preloader && this.isMobile && (\n <button class=\"button\" onClick={() => this.closeModalHandler()}>\n Zamknij\n </button>\n )}\n </div>\n );\n }\n}\n"]}
|
|
@@ -1,9 +1,24 @@
|
|
|
1
1
|
import { h, getAssetPath } from '@stencil/core';
|
|
2
|
+
function debounce(func, wait) {
|
|
3
|
+
let timeout;
|
|
4
|
+
return function executedFunction(...args) {
|
|
5
|
+
const later = () => {
|
|
6
|
+
clearTimeout(timeout);
|
|
7
|
+
func(...args);
|
|
8
|
+
};
|
|
9
|
+
clearTimeout(timeout);
|
|
10
|
+
timeout = setTimeout(later, wait);
|
|
11
|
+
};
|
|
12
|
+
}
|
|
2
13
|
export class MySearch {
|
|
3
14
|
constructor() {
|
|
4
15
|
this.fetchColorsByName = (text) => {
|
|
5
16
|
this.searchColors.emit(text);
|
|
6
17
|
};
|
|
18
|
+
this.debouncedInputChangeValue = debounce((value) => {
|
|
19
|
+
this.fetchColorsByName(value);
|
|
20
|
+
this.searchText = value;
|
|
21
|
+
}, 300);
|
|
7
22
|
this.productId = undefined;
|
|
8
23
|
this.isMobile = undefined;
|
|
9
24
|
this.searchIcon = 'search.svg';
|
|
@@ -11,12 +26,14 @@ export class MySearch {
|
|
|
11
26
|
}
|
|
12
27
|
onInputChangeValue(event) {
|
|
13
28
|
const value = event.target.value;
|
|
14
|
-
this.
|
|
15
|
-
this.searchText = value;
|
|
29
|
+
this.debouncedInputChangeValue(value);
|
|
16
30
|
}
|
|
17
31
|
fetchColorsByNameHandle(newValue) {
|
|
18
32
|
this.fetchColorsByName(newValue);
|
|
19
33
|
}
|
|
34
|
+
clearSearchTextHandler() {
|
|
35
|
+
this.searchText = null;
|
|
36
|
+
}
|
|
20
37
|
render() {
|
|
21
38
|
return (h("div", { class: 'search' }, h("input", { placeholder: this.isMobile ? 'Wyszukaj kolor' : 'Wyszukaj kolor po nazwie bądź numerze', value: this.searchText || '', type: "text", onInput: this.onInputChangeValue.bind(this) }), h("button", { onClick: () => {
|
|
22
39
|
this.searchText && this.fetchColorsByName(this.searchText);
|
|
@@ -121,5 +138,14 @@ export class MySearch {
|
|
|
121
138
|
"methodName": "fetchColorsByNameHandle"
|
|
122
139
|
}];
|
|
123
140
|
}
|
|
141
|
+
static get listeners() {
|
|
142
|
+
return [{
|
|
143
|
+
"name": "clearSearchText",
|
|
144
|
+
"method": "clearSearchTextHandler",
|
|
145
|
+
"target": "document",
|
|
146
|
+
"capture": false,
|
|
147
|
+
"passive": false
|
|
148
|
+
}];
|
|
149
|
+
}
|
|
124
150
|
}
|
|
125
151
|
//# sourceMappingURL=my-search.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"my-search.js","sourceRoot":"","sources":["../../../src/components/my-search/my-search.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,YAAY,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"my-search.js","sourceRoot":"","sources":["../../../src/components/my-search/my-search.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE5G,SAAS,QAAQ,CAAC,IAAc,EAAE,IAAY;EAC5C,IAAI,OAAsC,CAAC;EAC3C,OAAO,SAAS,gBAAgB,CAAC,GAAG,IAAW;IAC7C,MAAM,KAAK,GAAG,GAAG,EAAE;MACjB,YAAY,CAAC,OAAO,CAAC,CAAC;MACtB,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;IAChB,CAAC,CAAC;IACF,YAAY,CAAC,OAAO,CAAC,CAAC;IACtB,OAAO,GAAG,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;EACpC,CAAC,CAAC;AACJ,CAAC;AAQD,MAAM,OAAO,QAAQ;;IAOnB,sBAAiB,GAAG,CAAC,IAAY,EAAE,EAAE;MACnC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEM,8BAAyB,GAAG,QAAQ,CAAC,CAAC,KAAa,EAAE,EAAE;MAC7D,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;MAC9B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC1B,CAAC,EAAE,GAAG,CAAC,CAAC;;;sBAXa,YAAY;sBACI,IAAI;;EAYjC,kBAAkB,CAAC,KAAY;IACrC,MAAM,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;IACvD,IAAI,CAAC,yBAAyB,CAAC,KAAK,CAAC,CAAC;EACxC,CAAC;EAGD,uBAAuB,CAAC,QAAgB;IACtC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;EACnC,CAAC;EAGD,sBAAsB;IACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;EACzB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAE,QAAQ;MAClB,aACE,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,uCAAuC,EACvF,KAAK,EAAE,IAAI,CAAC,UAAU,IAAI,EAAE,EAC5B,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC3C;MAEF,cACE,OAAO,EAAE,GAAG,EAAE;UACZ,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;UAE3D,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACvB,CAAC;QAED,WAAK,GAAG,EAAE,YAAY,CAAC,YAAY,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,GAAG,EAAC,YAAY,GAAG,CACnE,CACL,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, State, Listen, getAssetPath, EventEmitter, Event, Watch } from '@stencil/core';\n\nfunction debounce(func: Function, wait: number) {\n let timeout: ReturnType<typeof setTimeout>;\n return function executedFunction(...args: any[]) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n}\n\n@Component({\n tag: 'my-search',\n styleUrl: 'my-search.scss',\n assetsDirs: ['assets'],\n scoped: true,\n})\nexport class MySearch {\n @Prop() productId: number;\n @Prop() isMobile: boolean;\n @Prop() searchIcon = 'search.svg';\n @State() searchText: string | null = null;\n @Event() searchColors: EventEmitter;\n\n fetchColorsByName = (text: string) => {\n this.searchColors.emit(text);\n };\n\n private debouncedInputChangeValue = debounce((value: string) => {\n this.fetchColorsByName(value);\n this.searchText = value;\n }, 300);\n\n private onInputChangeValue(event: Event) {\n const value = (event.target as HTMLInputElement).value;\n this.debouncedInputChangeValue(value);\n }\n\n @Watch('searchText')\n fetchColorsByNameHandle(newValue: string) {\n this.fetchColorsByName(newValue);\n }\n\n @Listen('clearSearchText', { target: 'document' })\n clearSearchTextHandler() {\n this.searchText = null;\n }\n\n render() {\n return (\n <div class={'search'}>\n <input\n placeholder={this.isMobile ? 'Wyszukaj kolor' : 'Wyszukaj kolor po nazwie bądź numerze'}\n value={this.searchText || ''}\n type=\"text\"\n onInput={this.onInputChangeValue.bind(this)}\n />\n\n <button\n onClick={() => {\n this.searchText && this.fetchColorsByName(this.searchText);\n\n this.searchText = '';\n }}\n >\n <img src={getAssetPath(`./assets/${this.searchIcon}`)} alt=\"arrow_down\" />\n </button>\n </div>\n );\n }\n}\n"]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { h } from '@stencil/core';
|
|
2
2
|
import Swiper, { Navigation, Controller } from 'swiper';
|
|
3
3
|
import { setDataLayer } from '../../gtmUtils';
|
|
4
|
+
import { APIURL, accessToken } from '../api';
|
|
4
5
|
export class JcSwiper {
|
|
5
6
|
constructor() {
|
|
6
7
|
this.colorInteraction = () => {
|
|
@@ -49,9 +50,9 @@ export class JcSwiper {
|
|
|
49
50
|
render() {
|
|
50
51
|
return (h("div", { class: "slider-wrapper" }, h("div", { class: "swiper mySwiper2" }, h("div", { class: "swiper-wrapper" }, this.slides &&
|
|
51
52
|
this.slides.length > 0 &&
|
|
52
|
-
this.slides.map((slide) => (h("div", { key: slide.id, class: "swiper-slide" }, h("img", { src: slide.
|
|
53
|
+
this.slides.map((slide) => (h("div", { key: slide.id, class: "swiper-slide" }, h("img", { src: `${APIURL}/assets/${slide.directus_files_id}?access_token=${accessToken}`, alt: "room_image" }))))), h("div", { onClick: this.colorInteraction, class: "swiper-button-next" }), h("div", { onClick: this.colorInteraction, class: "swiper-button-prev" })), h("div", { class: "swiper mySwiper" }, h("div", { class: "swiper-wrapper" }, this.slides &&
|
|
53
54
|
this.slides.length > 0 &&
|
|
54
|
-
this.slides.map((slide) => (h("div", { key: slide.id, class: "swiper-slide" }, h("img", { src: slide.
|
|
55
|
+
this.slides.map((slide) => (h("div", { key: slide.id, class: "swiper-slide" }, h("img", { src: `${APIURL}/assets/${slide.directus_files_id}?access_token=${accessToken}`, alt: "room_image" }))))))));
|
|
55
56
|
}
|
|
56
57
|
static get is() { return "my-slider"; }
|
|
57
58
|
static get originalStyleUrls() {
|
|
@@ -70,13 +71,9 @@ export class JcSwiper {
|
|
|
70
71
|
"type": "unknown",
|
|
71
72
|
"mutable": false,
|
|
72
73
|
"complexType": {
|
|
73
|
-
"original": "
|
|
74
|
-
"resolved": "
|
|
74
|
+
"original": "Image[]",
|
|
75
|
+
"resolved": "Image[]",
|
|
75
76
|
"references": {
|
|
76
|
-
"Data": {
|
|
77
|
-
"location": "import",
|
|
78
|
-
"path": "../../types"
|
|
79
|
-
},
|
|
80
77
|
"Image": {
|
|
81
78
|
"location": "import",
|
|
82
79
|
"path": "../../types"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/my-slider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,MAAM,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/my-slider/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, h } from '@stencil/core';\nimport Swiper, { Navigation, Controller } from 'swiper';\nimport { setDataLayer } from '../../gtmUtils';\nimport { Image } from '../../types';\nimport { APIURL, accessToken } from '../api';\n\n@Component({\n tag: 'my-slider',\n styleUrl: 'my-slider.scss',\n})\nexport class JcSwiper {\n @Element() modalEl: HTMLElement;\n @Prop() slides: Image[];\n @Prop() shop: string;\n @Prop() product: string;\n @Prop() color: string;\n\n private thumbs: any;\n private swiper2: any;\n\n initSwiper() {\n this.thumbs = new Swiper('.mySwiper', {\n modules: [Navigation, Controller],\n slideToClickedSlide: true,\n loop: true,\n freeMode: true,\n spaceBetween: 5,\n slidesPerView: 3,\n direction: 'vertical',\n touchRatio: 0.2,\n });\n\n this.swiper2 = new Swiper('.mySwiper2', {\n modules: [Navigation, Controller],\n navigation: {\n nextEl: '.swiper-button-next',\n prevEl: '.swiper-button-prev',\n },\n loop: true,\n loopedSlides: 3,\n });\n\n this.swiper2.controller.control = this.thumbs;\n this.thumbs.controller.control = this.swiper2;\n }\n\n componentDidLoad() {\n this.initSwiper();\n }\n\n update() {\n this.thumbs.update();\n this.swiper2.update();\n }\n\n colorInteraction = () => {\n setDataLayer({\n event: 'ColorInteraction',\n shop: this.shop,\n product: this.product,\n color: this.color,\n });\n };\n\n render() {\n return (\n <div class=\"slider-wrapper\">\n <div class=\"swiper mySwiper2\">\n <div class=\"swiper-wrapper\">\n {this.slides &&\n this.slides.length > 0 &&\n this.slides.map((slide: Image) => (\n <div key={slide.id} class=\"swiper-slide\">\n <img src={`${APIURL}/assets/${slide.directus_files_id}?access_token=${accessToken}`} alt=\"room_image\" />\n </div>\n ))}\n </div>\n <div onClick={this.colorInteraction} class=\"swiper-button-next\"></div>\n <div onClick={this.colorInteraction} class=\"swiper-button-prev\"></div>\n </div>\n <div class=\"swiper mySwiper\">\n <div class=\"swiper-wrapper\">\n {this.slides &&\n this.slides.length > 0 &&\n this.slides.map((slide: Image) => (\n <div key={slide.id} class=\"swiper-slide\">\n <img src={`${APIURL}/assets/${slide.directus_files_id}?access_token=${accessToken}`} alt=\"room_image\" />\n </div>\n ))}\n </div>\n </div>\n </div>\n );\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"","sourcesContent":["export type Shop = {\n name: string;\n
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"","sourcesContent":["export type Shop = {\n name: string;\n date_created: string;\n date_updated: string;\n id: number;\n products: number[];\n sort: null;\n status: string;\n};\n\nexport type ProductShopRelation = {\n Product_id: number;\n Shop_id: number;\n id: number;\n};\n\nexport type ProductCategoryRelation = {\n Category_id: Category;\n Product_id: Product;\n id: number;\n};\n\nexport type Color = {\n hex: string;\n image: Record<string, Image>;\n links: Link[];\n name: string;\n position: number;\n buttonInverse: boolean;\n textWhite: boolean;\n id?: number;\n category?: Partial<Color>;\n number?: string;\n Category_id: Color;\n};\n\nexport type Category = {\n category_name: string;\n hex: string;\n id: number;\n name: string;\n};\n\nexport type Product = {\n colors?: Color[];\n modalDescription: string;\n modalLogo: string;\n modalName: string;\n name: string;\n Shop: ProductShopRelation[];\n useColorImage: boolean;\n images: any;\n id?: string;\n Category: ProductCategoryRelation[];\n};\n\nexport type Image = {\n id: number;\n directus_files_id: string;\n};\n\nexport type Link = {\n id: number;\n path: string;\n shop: string;\n};\n\nexport type PaginationData<Model> = {\n list: Model[];\n pagination: Pagination;\n};\n\nexport type Pagination = {\n total_count: number;\n filter_count: number;\n};\n"]}
|
|
@@ -1,6 +1,28 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement as HTMLElement$1, h } from '@stencil/core/internal/client';
|
|
2
2
|
import { s as setDataLayer } from './gtmUtils.js';
|
|
3
3
|
|
|
4
|
+
const APIURL = 'http://147.135.211.144:8055'; //'https://pallete-colors-backend.herokuapp.com';
|
|
5
|
+
const accessToken = 'uBKzhiNM4rkdZSe_PQvKJp9pE-DSTmtu';
|
|
6
|
+
class API {
|
|
7
|
+
async getData(ep) {
|
|
8
|
+
try {
|
|
9
|
+
const request = await fetch(`${APIURL}/${ep}`, {
|
|
10
|
+
method: 'GET',
|
|
11
|
+
headers: {
|
|
12
|
+
'Authorization': `Bearer ${accessToken}`,
|
|
13
|
+
'Content-Type': 'application/json',
|
|
14
|
+
},
|
|
15
|
+
});
|
|
16
|
+
const response = await request.json();
|
|
17
|
+
return response;
|
|
18
|
+
}
|
|
19
|
+
catch (error) {
|
|
20
|
+
console.error(error);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
const ApiService = new API();
|
|
25
|
+
|
|
4
26
|
/**
|
|
5
27
|
* SSR Window 4.0.2
|
|
6
28
|
* Better handling for window object in SSR environment
|
|
@@ -5274,9 +5296,9 @@ const JcSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
|
|
|
5274
5296
|
render() {
|
|
5275
5297
|
return (h("div", { class: "slider-wrapper" }, h("div", { class: "swiper mySwiper2" }, h("div", { class: "swiper-wrapper" }, this.slides &&
|
|
5276
5298
|
this.slides.length > 0 &&
|
|
5277
|
-
this.slides.map((slide) => (h("div", { key: slide.id, class: "swiper-slide" }, h("img", { src: slide.
|
|
5299
|
+
this.slides.map((slide) => (h("div", { key: slide.id, class: "swiper-slide" }, h("img", { src: `${APIURL}/assets/${slide.directus_files_id}?access_token=${accessToken}`, alt: "room_image" }))))), h("div", { onClick: this.colorInteraction, class: "swiper-button-next" }), h("div", { onClick: this.colorInteraction, class: "swiper-button-prev" })), h("div", { class: "swiper mySwiper" }, h("div", { class: "swiper-wrapper" }, this.slides &&
|
|
5278
5300
|
this.slides.length > 0 &&
|
|
5279
|
-
this.slides.map((slide) => (h("div", { key: slide.id, class: "swiper-slide" }, h("img", { src: slide.
|
|
5301
|
+
this.slides.map((slide) => (h("div", { key: slide.id, class: "swiper-slide" }, h("img", { src: `${APIURL}/assets/${slide.directus_files_id}?access_token=${accessToken}`, alt: "room_image" }))))))));
|
|
5280
5302
|
}
|
|
5281
5303
|
get modalEl() { return this; }
|
|
5282
5304
|
static get style() { return mySliderCss; }
|
|
@@ -5300,6 +5322,6 @@ function defineCustomElement() {
|
|
|
5300
5322
|
} });
|
|
5301
5323
|
}
|
|
5302
5324
|
|
|
5303
|
-
export { JcSwiper as J, defineCustomElement as d };
|
|
5325
|
+
export { APIURL as A, JcSwiper as J, accessToken as a, ApiService as b, defineCustomElement as d };
|
|
5304
5326
|
|
|
5305
5327
|
//# sourceMappingURL=index2.js.map
|