@aiconomy/aico-components 0.0.149 → 0.0.158

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.
Files changed (57) hide show
  1. package/README.md +46 -19
  2. package/dist/aico-components/aico-components.esm.js +1 -1
  3. package/dist/aico-components/aico-components.esm.js.map +1 -1
  4. package/dist/aico-components/{p-01932a11.entry.js → p-076c2ca2.entry.js} +4 -4
  5. package/dist/aico-components/p-076c2ca2.entry.js.map +1 -0
  6. package/dist/cjs/{aico-album-content_26.cjs.entry.js → aico-album-content_27.cjs.entry.js} +88 -9
  7. package/dist/cjs/aico-album-content_27.cjs.entry.js.map +1 -0
  8. package/dist/cjs/aico-components.cjs.js +1 -1
  9. package/dist/cjs/loader.cjs.js +1 -1
  10. package/dist/collection/collection-manifest.json +1 -0
  11. package/dist/collection/components/aico-news-list/aico-news-list.css +2 -4
  12. package/dist/collection/components/aico-news-list/aico-news-list.js +2 -21
  13. package/dist/collection/components/aico-news-list/aico-news-list.js.map +1 -1
  14. package/dist/collection/components/aico-news-list-item/aico-news-list-item.js +2 -21
  15. package/dist/collection/components/aico-news-list-item/aico-news-list-item.js.map +1 -1
  16. package/dist/collection/components/aico-news-list-item/aico-news-list-item.stories.js +1 -0
  17. package/dist/collection/components/aico-news-list-item/aico-news-list-item.stories.js.map +1 -1
  18. package/dist/collection/components/aico-special-news-carousel/aico-special-news-carousel.js +2 -2
  19. package/dist/collection/components/aico-special-news-carousel/aico-special-news-carousel.js.map +1 -1
  20. package/dist/collection/components/aico-top-news-carousel/aico-top-news-carousel.css +12088 -0
  21. package/dist/collection/components/aico-top-news-carousel/aico-top-news-carousel.js +253 -0
  22. package/dist/collection/components/aico-top-news-carousel/aico-top-news-carousel.js.map +1 -0
  23. package/dist/collection/components/aico-top-news-carousel/aico-top-news-carousel.stories.js +30 -0
  24. package/dist/collection/components/aico-top-news-carousel/aico-top-news-carousel.stories.js.map +1 -0
  25. package/dist/collection/components/aico-top-news-carousel/test/aico-top-news-carousel.e2e.js +6 -0
  26. package/dist/collection/components/aico-top-news-carousel/test/aico-top-news-carousel.e2e.js.map +1 -0
  27. package/dist/collection/components/aico-top-news-carousel/test/aico-top-news-carousel.spec.js +6 -0
  28. package/dist/collection/components/aico-top-news-carousel/test/aico-top-news-carousel.spec.js.map +1 -0
  29. package/dist/collection/model/Article.js.map +1 -1
  30. package/dist/collection/utils/utils.js +17 -0
  31. package/dist/collection/utils/utils.js.map +1 -1
  32. package/dist/components/aico-news-list-item2.js +2 -4
  33. package/dist/components/aico-news-list-item2.js.map +1 -1
  34. package/dist/components/aico-news-list.js +2 -4
  35. package/dist/components/aico-news-list.js.map +1 -1
  36. package/dist/components/aico-special-news-carousel.js +2 -2
  37. package/dist/components/aico-special-news-carousel.js.map +1 -1
  38. package/dist/components/aico-top-news-carousel.d.ts +11 -0
  39. package/dist/components/aico-top-news-carousel.js +101 -0
  40. package/dist/components/aico-top-news-carousel.js.map +1 -0
  41. package/dist/components/utils.js +18 -1
  42. package/dist/components/utils.js.map +1 -1
  43. package/dist/esm/{aico-album-content_26.entry.js → aico-album-content_27.entry.js} +88 -10
  44. package/dist/esm/aico-album-content_27.entry.js.map +1 -0
  45. package/dist/esm/aico-components.js +1 -1
  46. package/dist/esm/loader.js +1 -1
  47. package/dist/types/components/aico-news-list/aico-news-list.d.ts +0 -4
  48. package/dist/types/components/aico-news-list-item/aico-news-list-item.d.ts +0 -1
  49. package/dist/types/components/aico-top-news-carousel/aico-top-news-carousel.d.ts +59 -0
  50. package/dist/types/components/aico-top-news-carousel/aico-top-news-carousel.stories.d.ts +7 -0
  51. package/dist/types/components.d.ts +96 -10
  52. package/dist/types/model/Article.d.ts +1 -0
  53. package/dist/types/utils/utils.d.ts +1 -0
  54. package/package.json +1 -1
  55. package/dist/aico-components/p-01932a11.entry.js.map +0 -1
  56. package/dist/cjs/aico-album-content_26.cjs.entry.js.map +0 -1
  57. package/dist/esm/aico-album-content_26.entry.js.map +0 -1
@@ -1 +1 @@
1
- {"file":"aico-special-news-carousel.js","mappings":"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","names":["AicoSpecialNewsCarousel","$"],"sources":["src/components/aico-special-news-carousel/aico-special-news-carousel.css?tag=aico-special-news-carousel&encapsulation=scoped","src/components/aico-special-news-carousel/aico-special-news-carousel.tsx"],"sourcesContent":["@import '../../../node_modules/bootstrap/dist/css/bootstrap.css';\n\n:host,\n:host::before,\n:host::after {\n box-sizing: border-box;\n}\n\n:host {\n font-family: var(--bs-body-font-family);\n font-size: var(--bs-body-font-size);\n font-weight: var(--bs-body-font-weight);\n line-height: var(--bs-body-line-height);\n color: var(--bs-body-color);\n text-align: var(--bs-body-text-align);\n -webkit-text-size-adjust: 100%;\n}\n\n.slick-slide > div {\n height: 100% !important;\n}\n","import { Component, Event, EventEmitter, Prop, State, h } from '@stencil/core';\nimport type { NewsResponse } from '../../model/NewsResponse';\nimport type { AicoApiRequestInfo } from '../../model/AicoApiRequestInfo';\nimport type { Article } from '../../model/Article';\nimport { fetchSpecialNewsArticles, splitByComma } from '../../utils/utils';\n\nimport $ from 'jquery';\nimport 'slick-carousel';\n\n@Component({\n tag: 'aico-special-news-carousel',\n styleUrl: 'aico-special-news-carousel.css',\n scoped: true,\n})\nexport class AicoSpecialNewsCarousel {\n @State() newsResponse!: NewsResponse;\n\n @State() newsChannelsArr: string[] = [];\n\n @State() newsSellerIdsArr: string[] = [];\n\n @State() newsBrandIdsArr: string[] = [];\n\n @State() newsLanguageLocalesArr: string[] = [];\n\n /**\n * The url of the Aico Api that will be used to retrieve the article.\n */\n @Prop() aicoUrl!: string;\n\n /**\n * The token used to authenticate against he Aico Api.\n */\n @Prop() aicoBearerToken!: string;\n\n /**\n * Channel names as a comma separated list used to filter the results.\n */\n @Prop() newsChannels: string = '';\n\n /**\n * Seller ids as a comma separated list used to filter the results.\n */\n @Prop() newsSellerIds: string = '';\n\n /**\n * Brand ids as a comma separated list used to filter the results.\n */\n @Prop() newsBrandIds: string = '';\n\n /**\n * Language locales as a comma separated list used to filter the results.\n */\n @Prop() newsLanguageLocales: string = '';\n\n /**\n * The number of articles shown in the carousel. Prefer this number to be small.\n */\n @Prop() numberOfArticles: number = 6;\n\n /**\n * The article translation that will be used to render the content.\n *\n * If the locale specified is not present in the article's translations, most content will not be shown.\n */\n @Prop() locale: string = 'de';\n\n /**\n * Event emitted when a user clicks an article title.\n *\n * The handler receives the entire Article entity.\n */\n @Event() articleClicked?: EventEmitter<Article>;\n\n private api?: AicoApiRequestInfo;\n private newsListFetchController?: AbortController;\n\n connectedCallback() {\n this.newsListFetchController = new AbortController();\n this.api = { baseApi: this.aicoUrl, bearerToken: this.aicoBearerToken };\n\n this.newsChannelsArr = splitByComma(this.newsChannels);\n this.newsSellerIdsArr = splitByComma(this.newsSellerIds);\n this.newsBrandIdsArr = splitByComma(this.newsBrandIds);\n this.newsLanguageLocalesArr = splitByComma(this.newsLanguageLocales);\n }\n\n disconnectedCallback() {\n this.newsListFetchController!.abort('disconnected');\n }\n\n async componentWillLoad(): Promise<void> {\n this.newsResponse = await fetchSpecialNewsArticles(\n this.api!,\n 1,\n this.numberOfArticles,\n this.newsListFetchController!.signal,\n this.newsChannelsArr,\n this.newsSellerIdsArr,\n this.newsBrandIdsArr,\n this.newsLanguageLocalesArr,\n );\n }\n\n async componentWillUpdate(): Promise<void> {\n this.newsListFetchController = new AbortController();\n this.newsResponse = await fetchSpecialNewsArticles(\n this.api!,\n 1,\n this.numberOfArticles,\n this.newsListFetchController.signal,\n this.newsChannelsArr,\n this.newsSellerIdsArr,\n this.newsBrandIdsArr,\n this.newsLanguageLocalesArr,\n );\n }\n\n componentDidLoad() {\n $('.carousel').slick({\n autoplay: true,\n autoplaySpeed: 6000,\n dots: true,\n arrows: false,\n pauseOnDotsHover: true,\n });\n }\n\n render() {\n return (\n <div class=\"carousel\">\n {this.newsResponse.data.map(article => {\n const focusX = article.attributes.focusXPercentage ? `${article.attributes.focusXPercentage}%` : 'center';\n const focusY = article.attributes.focusYPercentage ? `${article.attributes.focusYPercentage}%` : 'center';\n const translation = article.attributes.translations.find(t => t.locale === this.locale);\n return (\n <div class=\"carousel-item card border-0\">\n <div class=\"card-body\">\n <h5 class=\"card-title text-center text-uppercase\">\n <a\n class=\"text-reset text-decoration-none\"\n href=\"#\"\n onClick={e => {\n e.preventDefault();\n this.articleClicked?.emit(article);\n }}\n >\n {translation?.name ?? article.attributes.name}\n </a>\n </h5>\n </div>\n <div class=\"ratio ratio-16x9 mx-auto\" style={{ 'max-width': '50%' }}>\n <img\n class=\"card-img-bottom object-fit-cover\"\n style={{ 'object-position': `${focusX} ${focusY}`, 'min-height': '15rem' }}\n alt=\"News Picture\"\n data-lazy={translation?.optimizedImage ?? translation?.image ?? article.attributes.optimizedImage ?? article.attributes.image}\n />\n </div>\n </div>\n );\n })}\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"aico-special-news-carousel.js","mappings":"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","names":["AicoSpecialNewsCarousel","$"],"sources":["src/components/aico-special-news-carousel/aico-special-news-carousel.css?tag=aico-special-news-carousel&encapsulation=scoped","src/components/aico-special-news-carousel/aico-special-news-carousel.tsx"],"sourcesContent":["@import '../../../node_modules/bootstrap/dist/css/bootstrap.css';\n\n:host,\n:host::before,\n:host::after {\n box-sizing: border-box;\n}\n\n:host {\n font-family: var(--bs-body-font-family);\n font-size: var(--bs-body-font-size);\n font-weight: var(--bs-body-font-weight);\n line-height: var(--bs-body-line-height);\n color: var(--bs-body-color);\n text-align: var(--bs-body-text-align);\n -webkit-text-size-adjust: 100%;\n}\n\n.slick-slide > div {\n height: 100% !important;\n}\n","import { Component, Event, EventEmitter, Prop, State, h } from '@stencil/core';\nimport type { NewsResponse } from '../../model/NewsResponse';\nimport type { AicoApiRequestInfo } from '../../model/AicoApiRequestInfo';\nimport type { Article } from '../../model/Article';\nimport { fetchSpecialNewsArticles, splitByComma } from '../../utils/utils';\n\nimport $ from 'jquery';\nimport 'slick-carousel';\n\n@Component({\n tag: 'aico-special-news-carousel',\n styleUrl: 'aico-special-news-carousel.css',\n scoped: true,\n})\nexport class AicoSpecialNewsCarousel {\n @State() newsResponse!: NewsResponse;\n\n @State() newsChannelsArr: string[] = [];\n\n @State() newsSellerIdsArr: string[] = [];\n\n @State() newsBrandIdsArr: string[] = [];\n\n @State() newsLanguageLocalesArr: string[] = [];\n\n /**\n * The url of the Aico Api that will be used to retrieve the article.\n */\n @Prop() aicoUrl!: string;\n\n /**\n * The token used to authenticate against he Aico Api.\n */\n @Prop() aicoBearerToken!: string;\n\n /**\n * Channel names as a comma separated list used to filter the results.\n */\n @Prop() newsChannels: string = '';\n\n /**\n * Seller ids as a comma separated list used to filter the results.\n */\n @Prop() newsSellerIds: string = '';\n\n /**\n * Brand ids as a comma separated list used to filter the results.\n */\n @Prop() newsBrandIds: string = '';\n\n /**\n * Language locales as a comma separated list used to filter the results.\n */\n @Prop() newsLanguageLocales: string = '';\n\n /**\n * The number of articles shown in the carousel. Prefer this number to be small.\n */\n @Prop() numberOfArticles: number = 6;\n\n /**\n * The article translation that will be used to render the content.\n *\n * If the locale specified is not present in the article's translations, most content will not be shown.\n */\n @Prop() locale: string = 'de';\n\n /**\n * Event emitted when a user clicks an article title.\n *\n * The handler receives the entire Article entity.\n */\n @Event() articleClicked?: EventEmitter<Article>;\n\n private api?: AicoApiRequestInfo;\n private newsListFetchController?: AbortController;\n\n connectedCallback() {\n this.newsListFetchController = new AbortController();\n this.api = { baseApi: this.aicoUrl, bearerToken: this.aicoBearerToken };\n\n this.newsChannelsArr = splitByComma(this.newsChannels);\n this.newsSellerIdsArr = splitByComma(this.newsSellerIds);\n this.newsBrandIdsArr = splitByComma(this.newsBrandIds);\n this.newsLanguageLocalesArr = splitByComma(this.newsLanguageLocales);\n }\n\n disconnectedCallback() {\n this.newsListFetchController!.abort('disconnected');\n }\n\n async componentWillLoad(): Promise<void> {\n this.newsResponse = await fetchSpecialNewsArticles(\n this.api!,\n 1,\n this.numberOfArticles,\n this.newsListFetchController!.signal,\n this.newsChannelsArr,\n this.newsSellerIdsArr,\n this.newsBrandIdsArr,\n this.newsLanguageLocalesArr,\n );\n }\n\n async componentWillUpdate(): Promise<void> {\n this.newsListFetchController = new AbortController();\n this.newsResponse = await fetchSpecialNewsArticles(\n this.api!,\n 1,\n this.numberOfArticles,\n this.newsListFetchController.signal,\n this.newsChannelsArr,\n this.newsSellerIdsArr,\n this.newsBrandIdsArr,\n this.newsLanguageLocalesArr,\n );\n }\n\n componentDidLoad() {\n $('.carousel').slick({\n autoplay: true,\n autoplaySpeed: 6000,\n dots: true,\n arrows: false,\n pauseOnDotsHover: true,\n });\n }\n\n render() {\n return (\n <div class=\"carousel\">\n {this.newsResponse.data.map(article => {\n const focusX = article.attributes.focusXPercentage ? `${article.attributes.focusXPercentage}%` : 'center';\n const focusY = article.attributes.focusYPercentage ? `${article.attributes.focusYPercentage}%` : 'center';\n const translation = article.attributes.translations.find(t => t.locale === this.locale);\n return (\n <div class=\"carousel-item card border-0\">\n <div class=\"card-body\">\n <h5 class=\"card-title text-center text-uppercase\">\n <a\n class=\"text-reset text-decoration-none\"\n href=\"#\"\n onClick={e => {\n e.preventDefault();\n this.articleClicked?.emit(article);\n }}\n >\n {translation?.name ?? article.attributes.name}\n </a>\n </h5>\n </div>\n <div class=\"ratio ratio-16x9 mx-auto\" style={{ 'max-width': '50%' }}>\n <img\n class=\"card-img-bottom object-fit-cover\"\n style={{ 'object-position': `${focusX} ${focusY}`, 'min-height': '15rem' }}\n alt=\"News Picture\"\n data-lazy={\n translation?.image ??\n translation?.optimizedListImage ??\n translation?.optimizedImage ??\n article.attributes.image ??\n article.attributes.optimizedListImage ??\n article.attributes.optimizedImage\n }\n />\n </div>\n </div>\n );\n })}\n </div>\n );\n }\n}\n"],"version":3}
@@ -0,0 +1,11 @@
1
+ import type { Components, JSX } from "../types/components";
2
+
3
+ interface AicoTopNewsCarousel extends Components.AicoTopNewsCarousel, HTMLElement {}
4
+ export const AicoTopNewsCarousel: {
5
+ prototype: AicoTopNewsCarousel;
6
+ new (): AicoTopNewsCarousel;
7
+ };
8
+ /**
9
+ * Used to define this component and all nested components recursively.
10
+ */
11
+ export const defineCustomElement: () => void;