@coveo/atomic 3.31.2-pre.6818cf8f76 → 3.31.2-pre.bd810aa426

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 (107) hide show
  1. package/dist/atomic/_atomic.esm.js +1 -1
  2. package/dist/atomic/atomic.esm.js.map +1 -1
  3. package/dist/atomic/components/_index.d.ts +0 -2
  4. package/dist/atomic/components/_index.js +0 -1
  5. package/dist/atomic/components/analytics-config.js +1 -1
  6. package/dist/atomic/components/components/commerce/atomic-product-description/atomic-product-description.js +149 -0
  7. package/dist/atomic/components/components/commerce/atomic-product-description/atomic-product-description.tw.css.js +3 -0
  8. package/dist/atomic/components/components/commerce/atomic-product-template/atomic-product-template.js +1 -0
  9. package/dist/atomic/components/components/commerce/index.js +1 -0
  10. package/dist/atomic/components/components/commerce/lazy-index.js +1 -0
  11. package/dist/atomic/components/global/environment.js +1 -1
  12. package/dist/atomic/components/index.js.map +1 -1
  13. package/dist/atomic/components/stencil-facet-show-more-less.js +7 -1
  14. package/dist/atomic/components/stencil-facet-show-more-less.js.map +1 -1
  15. package/dist/atomic/{p-3d224a05.entry.js → p-00c7c8bc.entry.js} +2 -2
  16. package/dist/atomic/p-1e0f2e91.entry.js +2 -0
  17. package/dist/atomic/{p-8bb323e8.entry.js.map → p-1e0f2e91.entry.js.map} +1 -1
  18. package/dist/atomic/{p-a7eb687d.js → p-1e118dbf.js} +2 -2
  19. package/dist/atomic/p-29c272bb.entry.js +2 -0
  20. package/dist/atomic/{p-4e77fe24.entry.js.map → p-29c272bb.entry.js.map} +1 -1
  21. package/dist/atomic/p-417b1b64.js +2 -0
  22. package/dist/atomic/{p-c100197d.js.map → p-417b1b64.js.map} +1 -1
  23. package/dist/atomic/p-44a3c052.entry.js +2 -0
  24. package/dist/atomic/{p-e215ba76.entry.js.map → p-44a3c052.entry.js.map} +1 -1
  25. package/dist/atomic/{p-0dde1772.entry.js → p-773dcc60.entry.js} +2 -2
  26. package/dist/atomic/{p-9eac6c89.entry.js → p-8b3df33c.entry.js} +2 -2
  27. package/dist/atomic/p-91477908.entry.js +2 -0
  28. package/dist/atomic/{p-3f881919.entry.js.map → p-91477908.entry.js.map} +1 -1
  29. package/dist/atomic/p-e8ba8acd.entry.js +2 -0
  30. package/dist/atomic/{p-0873c1b8.entry.js.map → p-e8ba8acd.entry.js.map} +1 -1
  31. package/dist/cjs/_loader.cjs.js +1 -1
  32. package/dist/cjs/{analytics-config-58aee61e.js → analytics-config-edaf0d1e.js} +2 -2
  33. package/dist/cjs/{analytics-config-58aee61e.js.map → analytics-config-edaf0d1e.js.map} +1 -1
  34. package/dist/cjs/atomic-category-facet.cjs.entry.js +1 -2
  35. package/dist/cjs/atomic-category-facet.cjs.entry.js.map +1 -1
  36. package/dist/cjs/atomic-color-facet.cjs.entry.js +1 -2
  37. package/dist/cjs/atomic-color-facet.cjs.entry.js.map +1 -1
  38. package/dist/cjs/atomic-commerce-category-facet_4.cjs.entry.js +1 -2
  39. package/dist/cjs/atomic-commerce-category-facet_4.cjs.entry.js.map +1 -1
  40. package/dist/cjs/atomic-facet.cjs.entry.js +1 -2
  41. package/dist/cjs/atomic-facet.cjs.entry.js.map +1 -1
  42. package/dist/cjs/atomic-insight-facet.cjs.entry.js +1 -2
  43. package/dist/cjs/atomic-insight-facet.cjs.entry.js.map +1 -1
  44. package/dist/cjs/atomic-insight-interface.cjs.entry.js +1 -1
  45. package/dist/cjs/atomic-recs-interface.cjs.entry.js +1 -1
  46. package/dist/cjs/atomic-search-interface.cjs.entry.js +1 -1
  47. package/dist/cjs/atomic.cjs.js +1 -1
  48. package/dist/cjs/index-757bc886.js +0 -4
  49. package/dist/cjs/{stencil-facet-show-more-less-21d22973.js → stencil-facet-show-more-less-541e1544.js} +10 -4
  50. package/dist/cjs/stencil-facet-show-more-less-541e1544.js.map +1 -0
  51. package/dist/cjs/version.cjs.js +2 -2
  52. package/dist/esm/_loader.js +1 -1
  53. package/dist/esm/{analytics-config-06a872d6.js → analytics-config-1fab55eb.js} +2 -2
  54. package/dist/esm/{analytics-config-06a872d6.js.map → analytics-config-1fab55eb.js.map} +1 -1
  55. package/dist/esm/atomic-category-facet.entry.js +1 -2
  56. package/dist/esm/atomic-category-facet.entry.js.map +1 -1
  57. package/dist/esm/atomic-color-facet.entry.js +1 -2
  58. package/dist/esm/atomic-color-facet.entry.js.map +1 -1
  59. package/dist/esm/atomic-commerce-category-facet_4.entry.js +1 -2
  60. package/dist/esm/atomic-commerce-category-facet_4.entry.js.map +1 -1
  61. package/dist/esm/atomic-facet.entry.js +1 -2
  62. package/dist/esm/atomic-facet.entry.js.map +1 -1
  63. package/dist/esm/atomic-insight-facet.entry.js +1 -2
  64. package/dist/esm/atomic-insight-facet.entry.js.map +1 -1
  65. package/dist/esm/atomic-insight-interface.entry.js +1 -1
  66. package/dist/esm/atomic-recs-interface.entry.js +1 -1
  67. package/dist/esm/atomic-search-interface.entry.js +1 -1
  68. package/dist/esm/atomic.js +1 -1
  69. package/dist/esm/index-3f35faca.js +0 -4
  70. package/dist/esm/{stencil-facet-show-more-less-4b023ee3.js → stencil-facet-show-more-less-1198472f.js} +8 -2
  71. package/dist/esm/stencil-facet-show-more-less-1198472f.js.map +1 -0
  72. package/dist/esm/version.js +2 -2
  73. package/dist/types/components/commerce/atomic-product-description/atomic-product-description.d.ts +21 -10
  74. package/dist/types/components/commerce/atomic-product-template/atomic-product-template.d.ts +1 -0
  75. package/dist/types/components/commerce/index.d.ts +1 -0
  76. package/dist/types/components.d.ts +0 -51
  77. package/docs/atomic-docs.json +1 -124
  78. package/package.json +3 -3
  79. package/dist/atomic/components/atomic-product-description.d.ts +0 -11
  80. package/dist/atomic/components/atomic-product-description.js +0 -153
  81. package/dist/atomic/components/atomic-product-description.js.map +0 -1
  82. package/dist/atomic/components/plus.js +0 -10
  83. package/dist/atomic/components/plus.js.map +0 -1
  84. package/dist/atomic/p-0873c1b8.entry.js +0 -2
  85. package/dist/atomic/p-3f881919.entry.js +0 -2
  86. package/dist/atomic/p-4e77fe24.entry.js +0 -2
  87. package/dist/atomic/p-8bb323e8.entry.js +0 -2
  88. package/dist/atomic/p-8f20d930.js +0 -2
  89. package/dist/atomic/p-8f20d930.js.map +0 -1
  90. package/dist/atomic/p-c100197d.js +0 -2
  91. package/dist/atomic/p-e215ba76.entry.js +0 -2
  92. package/dist/atomic/p-f2d31b97.entry.js +0 -2
  93. package/dist/atomic/p-f2d31b97.entry.js.map +0 -1
  94. package/dist/cjs/atomic-product-description.cjs.entry.js +0 -141
  95. package/dist/cjs/atomic-product-description.cjs.entry.js.map +0 -1
  96. package/dist/cjs/plus-07843914.js +0 -13
  97. package/dist/cjs/plus-07843914.js.map +0 -1
  98. package/dist/cjs/stencil-facet-show-more-less-21d22973.js.map +0 -1
  99. package/dist/esm/atomic-product-description.entry.js +0 -137
  100. package/dist/esm/atomic-product-description.entry.js.map +0 -1
  101. package/dist/esm/plus-00840ff6.js +0 -10
  102. package/dist/esm/plus-00840ff6.js.map +0 -1
  103. package/dist/esm/stencil-facet-show-more-less-4b023ee3.js.map +0 -1
  104. /package/dist/atomic/{p-3d224a05.entry.js.map → p-00c7c8bc.entry.js.map} +0 -0
  105. /package/dist/atomic/{p-a7eb687d.js.map → p-1e118dbf.js.map} +0 -0
  106. /package/dist/atomic/{p-0dde1772.entry.js.map → p-773dcc60.entry.js.map} +0 -0
  107. /package/dist/atomic/{p-9eac6c89.entry.js.map → p-8b3df33c.entry.js.map} +0 -0
@@ -1 +0,0 @@
1
- {"version":3,"names":["getLineClampClass","truncateAfter","lineClampMap","none","renderShowHideButton","isExpanded","isTruncated","isCollapsible","onToggleExpand","showMoreLabel","showLessLabel","buttonClass","label","h","Button","style","class","title","onClick","icon","MinusIcon","PlusIcon","ExpandableText","children","part","atomicProductDescriptionCss","AtomicProductDescriptionStyle0","AtomicProductDescription","constructor","hostRef","this","field","resizeObserver","ResizeObserver","descriptionText","scrollHeight","clientHeight","validateProps","Schema","StringValue","constrainTo","validate","componentDidLoad","hostElement","querySelector","observe","e","stopPropagation","disconnectedCallback","disconnect","render","productDescription","product","Hidden","bindings","i18n","t","__decorate","InitializeBindings","ProductContext"],"sources":["src/components/common/expandable-text/stencil-expandable-text.tsx","src/components/commerce/atomic-product-description/atomic-product-description.pcss?tag=atomic-product-description","src/components/commerce/atomic-product-description/atomic-product-description.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport MinusIcon from '../../../images/minus.svg';\nimport PlusIcon from '../../../images/plus.svg';\nimport {Button} from '../stencil-button';\n\nexport type TruncateAfter = 'none' | '1' | '2' | '3' | '4';\n\ninterface ExpandableTextProps {\n isExpanded: boolean;\n isTruncated: boolean;\n isCollapsible?: boolean;\n truncateAfter: TruncateAfter;\n onToggleExpand: (e: MouseEvent | undefined) => void;\n showMoreLabel: string;\n showLessLabel: string;\n}\n\nconst getLineClampClass = (truncateAfter: TruncateAfter) => {\n const lineClampMap: Record<TruncateAfter, string> = {\n none: 'line-clamp-none',\n 1: 'line-clamp-1',\n 2: 'line-clamp-2',\n 3: 'line-clamp-3',\n 4: 'line-clamp-4',\n };\n return lineClampMap[truncateAfter] || 'line-clamp-2';\n};\n\nconst renderShowHideButton = (\n isExpanded: boolean,\n isTruncated: boolean,\n isCollapsible: boolean,\n onToggleExpand: (e?: MouseEvent) => void,\n showMoreLabel: string,\n showLessLabel: string\n) => {\n let buttonClass = 'expandable-text-button p-1 text-xs leading-[calc(1/.75)]';\n if (!isTruncated && !isExpanded) {\n buttonClass += ' invisible';\n } else if (!isCollapsible && !isTruncated && isExpanded) {\n buttonClass += ' hidden';\n }\n\n const label = isExpanded ? showLessLabel : showMoreLabel;\n\n return (\n <Button\n style=\"text-primary\"\n class={buttonClass}\n title={label}\n onClick={onToggleExpand}\n >\n <atomic-icon\n icon={isExpanded ? MinusIcon : PlusIcon}\n class=\"mx-1 w-2 align-baseline\"\n ></atomic-icon>\n {label}\n </Button>\n );\n};\n\nexport const ExpandableText: FunctionalComponent<ExpandableTextProps> = (\n {\n isExpanded,\n isTruncated,\n truncateAfter,\n onToggleExpand,\n showMoreLabel,\n showLessLabel,\n isCollapsible = false,\n },\n children\n) => {\n return (\n <div class=\"flex flex-col items-start\">\n <div\n part=\"expandable-text\"\n class={`expandable-text ${!isExpanded ? getLineClampClass(truncateAfter) : ''} min-lines-${truncateAfter}`}\n >\n {children}\n </div>\n {renderShowHideButton(\n isExpanded,\n isTruncated,\n isCollapsible,\n onToggleExpand,\n showMoreLabel,\n showLessLabel\n )}\n </div>\n );\n};\n","@import '../../common/expandable-text/expandable-text.pcss';\n","import {Schema, StringValue} from '@coveo/bueno';\nimport {Product} from '@coveo/headless/commerce';\nimport {Component, State, h, Element, Prop} from '@stencil/core';\nimport {\n InitializableComponent,\n InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {\n ExpandableText,\n TruncateAfter,\n} from '../../common/expandable-text/stencil-expandable-text';\nimport {Hidden} from '../../common/stencil-hidden';\nimport {CommerceBindings} from '../atomic-commerce-interface/atomic-commerce-interface';\nimport {ProductContext} from '../product-template-component-utils/stencil-product-template-decorators';\n\n/**\n * @alpha\n * The `atomic-product-description` component renders the description of a product.\n */\n@Component({\n tag: 'atomic-product-description',\n styleUrl: 'atomic-product-description.pcss',\n shadow: false,\n})\nexport class AtomicProductDescription\n implements InitializableComponent<CommerceBindings>\n{\n @InitializeBindings() public bindings!: CommerceBindings;\n @ProductContext() private product!: Product;\n\n @Element() hostElement!: HTMLElement;\n\n public error!: Error;\n\n @State() private isExpanded = false;\n @State() private isTruncated = false;\n\n private descriptionText!: HTMLDivElement;\n private resizeObserver: ResizeObserver;\n\n /**\n * The number of lines after which the product description should be truncated. A value of \"none\" will disable truncation.\n */\n @Prop() public truncateAfter: TruncateAfter = '2';\n\n /**\n * The name of the description field to use.\n */\n @Prop() public field: 'ec_description' | 'ec_shortdesc' = 'ec_shortdesc';\n\n /**\n * Whether the description should be collapsible after being expanded.\n */\n @Prop() public isCollapsible = true;\n\n constructor() {\n this.resizeObserver = new ResizeObserver(() => {\n if (\n this.descriptionText &&\n this.descriptionText.scrollHeight > this.descriptionText.clientHeight\n ) {\n this.isTruncated = true;\n } else {\n this.isTruncated = false;\n }\n });\n this.validateProps();\n }\n\n private validateProps() {\n new Schema({\n truncateAfter: new StringValue({\n constrainTo: ['none', '1', '2', '3', '4'],\n }),\n field: new StringValue({\n constrainTo: ['ec_shortdesc', 'ec_description'],\n }),\n }).validate({\n truncateAfter: this.truncateAfter,\n field: this.field,\n });\n }\n\n componentDidLoad() {\n this.descriptionText = this.hostElement.querySelector(\n '.expandable-text'\n ) as HTMLDivElement;\n if (this.descriptionText) {\n this.resizeObserver.observe(this.descriptionText);\n }\n }\n\n private onToggleExpand(e?: MouseEvent) {\n if (e) {\n e.stopPropagation();\n }\n\n this.isExpanded = !this.isExpanded;\n }\n\n disconnectedCallback() {\n this.resizeObserver.disconnect();\n }\n\n public render() {\n const productDescription = this.product[this.field] ?? null;\n\n if (!productDescription) {\n return <Hidden />;\n }\n\n return (\n <ExpandableText\n isExpanded={this.isExpanded}\n isTruncated={this.isTruncated}\n truncateAfter={this.truncateAfter}\n onToggleExpand={(e) => this.onToggleExpand(e)}\n showMoreLabel={this.bindings.i18n.t('show-more')}\n showLessLabel={this.bindings.i18n.t('show-less')}\n isCollapsible={this.isCollapsible}\n >\n <atomic-product-text field={this.field}></atomic-product-text>\n </ExpandableText>\n );\n }\n}\n"],"mappings":"+aAiBA,MAAMA,EAAqBC,IACzB,MAAMC,EAA8C,CAClDC,KAAM,kBACN,EAAG,eACH,EAAG,eACH,EAAG,eACH,EAAG,gBAEL,OAAOD,EAAaD,IAAkB,cAAc,EAGtD,MAAMG,EAAuB,CAC3BC,EACAC,EACAC,EACAC,EACAC,EACAC,KAEA,IAAIC,EAAc,2DAClB,IAAKL,IAAgBD,EAAY,CAC/BM,GAAe,Y,MACV,IAAKJ,IAAkBD,GAAeD,EAAY,CACvDM,GAAe,S,CAGjB,MAAMC,EAAQP,EAAaK,EAAgBD,EAE3C,OACEI,EAACC,EAAM,CACLC,MAAM,eACNC,MAAOL,EACPM,MAAOL,EACPM,QAASV,GAETK,EAAA,eACEM,KAAMd,EAAae,EAAYC,EAC/BL,MAAM,4BAEPJ,EACM,EAIN,MAAMU,EAA2D,EAEpEjB,aACAC,cACAL,gBACAO,iBACAC,gBACAC,gBACAH,gBAAgB,OAElBgB,IAGEV,EAAA,OAAKG,MAAM,6BACTH,EAAA,OACEW,KAAK,kBACLR,MAAO,oBAAoBX,EAAaL,EAAkBC,GAAiB,gBAAgBA,KAE1FsB,GAEFnB,EACCC,EACAC,EACAC,EACAC,EACAC,EACAC,ICvFR,MAAMe,EAA8B,yUACpC,MAAAC,EAAeD,E,iXCuBFE,EAAwB,MA+BnC,WAAAC,CAAAC,G,UArBiBC,KAAAzB,WAAa,MACbyB,KAAAxB,YAAc,MAQhBwB,KAAA7B,cAA+B,IAK/B6B,KAAAC,MAA2C,eAK3CD,KAAAvB,cAAgB,K,gBAnBD,M,iBACC,M,mBAQe,I,WAKY,e,mBAK3B,KAG7BuB,KAAKE,eAAiB,IAAIC,gBAAe,KACvC,GACEH,KAAKI,iBACLJ,KAAKI,gBAAgBC,aAAeL,KAAKI,gBAAgBE,aACzD,CACAN,KAAKxB,YAAc,I,KACd,CACLwB,KAAKxB,YAAc,K,KAGvBwB,KAAKO,e,CAGC,aAAAA,GACN,IAAIC,EAAO,CACTrC,cAAe,IAAIsC,EAAY,CAC7BC,YAAa,CAAC,OAAQ,IAAK,IAAK,IAAK,OAEvCT,MAAO,IAAIQ,EAAY,CACrBC,YAAa,CAAC,eAAgB,sBAE/BC,SAAS,CACVxC,cAAe6B,KAAK7B,cACpB8B,MAAOD,KAAKC,O,CAIhB,gBAAAW,GACEZ,KAAKI,gBAAkBJ,KAAKa,YAAYC,cACtC,oBAEF,GAAId,KAAKI,gBAAiB,CACxBJ,KAAKE,eAAea,QAAQf,KAAKI,gB,EAI7B,cAAA1B,CAAesC,GACrB,GAAIA,EAAG,CACLA,EAAEC,iB,CAGJjB,KAAKzB,YAAcyB,KAAKzB,U,CAG1B,oBAAA2C,GACElB,KAAKE,eAAeiB,Y,CAGf,MAAAC,GACL,MAAMC,EAAqBrB,KAAKsB,QAAQtB,KAAKC,QAAU,KAEvD,IAAKoB,EAAoB,CACvB,OAAOtC,EAACwC,EAAM,K,CAGhB,OACExC,EAACS,EAAc,CACbjB,WAAYyB,KAAKzB,WACjBC,YAAawB,KAAKxB,YAClBL,cAAe6B,KAAK7B,cACpBO,eAAiBsC,GAAMhB,KAAKtB,eAAesC,GAC3CrC,cAAeqB,KAAKwB,SAASC,KAAKC,EAAE,aACpC9C,cAAeoB,KAAKwB,SAASC,KAAKC,EAAE,aACpCjD,cAAeuB,KAAKvB,eAEpBM,EAAA,uBAAqBkB,MAAOD,KAAKC,Q,oCA9FV0B,EAAA,CAA5BC,K,+BACyBD,EAAA,CAAzBE,K","ignoreList":[]}
@@ -1,141 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-757bc886.js');
6
- const bueno = require('@coveo/bueno');
7
- const initializationUtils = require('./initialization-utils-62dc9852.js');
8
- const plus = require('./plus-07843914.js');
9
- const stencilButton = require('./stencil-button-aa4c0879.js');
10
- const stencilProductTemplateDecorators = require('./stencil-product-template-decorators-1edee0eb.js');
11
- require('./dom-utils-d4790328.js');
12
- require('./event-utils-9bfcf3c5.js');
13
- require('./init-queue-a18aa323.js');
14
- require('./initialization-lit-stencil-common-utils-24279cfa.js');
15
- require('./ripple-4070d750.js');
16
- require('./stencil-button-style-ba779fe2.js');
17
- require('./stencil-item-decorators-43a96f33.js');
18
-
19
- const getLineClampClass = (truncateAfter) => {
20
- const lineClampMap = {
21
- none: 'line-clamp-none',
22
- 1: 'line-clamp-1',
23
- 2: 'line-clamp-2',
24
- 3: 'line-clamp-3',
25
- 4: 'line-clamp-4',
26
- };
27
- return lineClampMap[truncateAfter] || 'line-clamp-2';
28
- };
29
- const renderShowHideButton = (isExpanded, isTruncated, isCollapsible, onToggleExpand, showMoreLabel, showLessLabel) => {
30
- let buttonClass = 'expandable-text-button p-1 text-xs leading-[calc(1/.75)]';
31
- if (!isTruncated && !isExpanded) {
32
- buttonClass += ' invisible';
33
- }
34
- else if (!isCollapsible && !isTruncated && isExpanded) {
35
- buttonClass += ' hidden';
36
- }
37
- const label = isExpanded ? showLessLabel : showMoreLabel;
38
- return (index.h(stencilButton.Button, { style: "text-primary", class: buttonClass, title: label, onClick: onToggleExpand },
39
- index.h("atomic-icon", { icon: isExpanded ? plus.MinusIcon : plus.PlusIcon, class: "mx-1 w-2 align-baseline" }),
40
- label));
41
- };
42
- const ExpandableText = ({ isExpanded, isTruncated, truncateAfter, onToggleExpand, showMoreLabel, showLessLabel, isCollapsible = false, }, children) => {
43
- return (index.h("div", { class: "flex flex-col items-start" },
44
- index.h("div", { part: "expandable-text", class: `expandable-text ${!isExpanded ? getLineClampClass(truncateAfter) : ''} min-lines-${truncateAfter}` }, children),
45
- renderShowHideButton(isExpanded, isTruncated, isCollapsible, onToggleExpand, showMoreLabel, showLessLabel)));
46
- };
47
-
48
- const atomicProductDescriptionCss = "/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */.expandable-text{line-height:var(--line-height)}.min-lines-1{min-height:calc(var(--line-height) * 1)}.min-lines-2{min-height:calc(var(--line-height) * 2)}.min-lines-3{min-height:calc(var(--line-height) * 3)}.min-lines-4{min-height:calc(var(--line-height) * 4)}";
49
- const AtomicProductDescriptionStyle0 = atomicProductDescriptionCss;
50
-
51
- var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
52
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
53
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
54
- r = Reflect.decorate(decorators, target, key, desc);
55
- else
56
- for (var i = decorators.length - 1; i >= 0; i--)
57
- if (d = decorators[i])
58
- r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
59
- return c > 3 && r && Object.defineProperty(target, key, r), r;
60
- };
61
- const AtomicProductDescription = class {
62
- constructor(hostRef) {
63
- index.registerInstance(this, hostRef);
64
- this.isExpanded = false;
65
- this.isTruncated = false;
66
- /**
67
- * The number of lines after which the product description should be truncated. A value of "none" will disable truncation.
68
- */
69
- this.truncateAfter = '2';
70
- /**
71
- * The name of the description field to use.
72
- */
73
- this.field = 'ec_shortdesc';
74
- /**
75
- * Whether the description should be collapsible after being expanded.
76
- */
77
- this.isCollapsible = true;
78
- this.isExpanded = false;
79
- this.isTruncated = false;
80
- this.truncateAfter = '2';
81
- this.field = 'ec_shortdesc';
82
- this.isCollapsible = true;
83
- this.resizeObserver = new ResizeObserver(() => {
84
- if (this.descriptionText &&
85
- this.descriptionText.scrollHeight > this.descriptionText.clientHeight) {
86
- this.isTruncated = true;
87
- }
88
- else {
89
- this.isTruncated = false;
90
- }
91
- });
92
- this.validateProps();
93
- }
94
- validateProps() {
95
- new bueno.Schema({
96
- truncateAfter: new bueno.StringValue({
97
- constrainTo: ['none', '1', '2', '3', '4'],
98
- }),
99
- field: new bueno.StringValue({
100
- constrainTo: ['ec_shortdesc', 'ec_description'],
101
- }),
102
- }).validate({
103
- truncateAfter: this.truncateAfter,
104
- field: this.field,
105
- });
106
- }
107
- componentDidLoad() {
108
- this.descriptionText = this.hostElement.querySelector('.expandable-text');
109
- if (this.descriptionText) {
110
- this.resizeObserver.observe(this.descriptionText);
111
- }
112
- }
113
- onToggleExpand(e) {
114
- if (e) {
115
- e.stopPropagation();
116
- }
117
- this.isExpanded = !this.isExpanded;
118
- }
119
- disconnectedCallback() {
120
- this.resizeObserver.disconnect();
121
- }
122
- render() {
123
- const productDescription = this.product[this.field] ?? null;
124
- if (!productDescription) {
125
- return index.h(initializationUtils.Hidden, null);
126
- }
127
- return (index.h(ExpandableText, { isExpanded: this.isExpanded, isTruncated: this.isTruncated, truncateAfter: this.truncateAfter, onToggleExpand: (e) => this.onToggleExpand(e), showMoreLabel: this.bindings.i18n.t('show-more'), showLessLabel: this.bindings.i18n.t('show-less'), isCollapsible: this.isCollapsible }, index.h("atomic-product-text", { field: this.field })));
128
- }
129
- get hostElement() { return index.getElement(this); }
130
- };
131
- __decorate([
132
- initializationUtils.InitializeBindings()
133
- ], AtomicProductDescription.prototype, "bindings", void 0);
134
- __decorate([
135
- stencilProductTemplateDecorators.ProductContext()
136
- ], AtomicProductDescription.prototype, "product", void 0);
137
- AtomicProductDescription.style = AtomicProductDescriptionStyle0;
138
-
139
- exports.atomic_product_description = AtomicProductDescription;
140
-
141
- //# sourceMappingURL=atomic-product-description.cjs.entry.js.map
@@ -1 +0,0 @@
1
- {"file":"atomic-product-description.entry.cjs.js","mappings":"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","names":["h","Button","MinusIcon","PlusIcon","Schema","StringValue","Hidden","InitializeBindings","ProductContext"],"sources":["src/components/common/expandable-text/stencil-expandable-text.tsx","src/components/commerce/atomic-product-description/atomic-product-description.pcss?tag=atomic-product-description","src/components/commerce/atomic-product-description/atomic-product-description.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport MinusIcon from '../../../images/minus.svg';\nimport PlusIcon from '../../../images/plus.svg';\nimport {Button} from '../stencil-button';\n\nexport type TruncateAfter = 'none' | '1' | '2' | '3' | '4';\n\ninterface ExpandableTextProps {\n isExpanded: boolean;\n isTruncated: boolean;\n isCollapsible?: boolean;\n truncateAfter: TruncateAfter;\n onToggleExpand: (e: MouseEvent | undefined) => void;\n showMoreLabel: string;\n showLessLabel: string;\n}\n\nconst getLineClampClass = (truncateAfter: TruncateAfter) => {\n const lineClampMap: Record<TruncateAfter, string> = {\n none: 'line-clamp-none',\n 1: 'line-clamp-1',\n 2: 'line-clamp-2',\n 3: 'line-clamp-3',\n 4: 'line-clamp-4',\n };\n return lineClampMap[truncateAfter] || 'line-clamp-2';\n};\n\nconst renderShowHideButton = (\n isExpanded: boolean,\n isTruncated: boolean,\n isCollapsible: boolean,\n onToggleExpand: (e?: MouseEvent) => void,\n showMoreLabel: string,\n showLessLabel: string\n) => {\n let buttonClass = 'expandable-text-button p-1 text-xs leading-[calc(1/.75)]';\n if (!isTruncated && !isExpanded) {\n buttonClass += ' invisible';\n } else if (!isCollapsible && !isTruncated && isExpanded) {\n buttonClass += ' hidden';\n }\n\n const label = isExpanded ? showLessLabel : showMoreLabel;\n\n return (\n <Button\n style=\"text-primary\"\n class={buttonClass}\n title={label}\n onClick={onToggleExpand}\n >\n <atomic-icon\n icon={isExpanded ? MinusIcon : PlusIcon}\n class=\"mx-1 w-2 align-baseline\"\n ></atomic-icon>\n {label}\n </Button>\n );\n};\n\nexport const ExpandableText: FunctionalComponent<ExpandableTextProps> = (\n {\n isExpanded,\n isTruncated,\n truncateAfter,\n onToggleExpand,\n showMoreLabel,\n showLessLabel,\n isCollapsible = false,\n },\n children\n) => {\n return (\n <div class=\"flex flex-col items-start\">\n <div\n part=\"expandable-text\"\n class={`expandable-text ${!isExpanded ? getLineClampClass(truncateAfter) : ''} min-lines-${truncateAfter}`}\n >\n {children}\n </div>\n {renderShowHideButton(\n isExpanded,\n isTruncated,\n isCollapsible,\n onToggleExpand,\n showMoreLabel,\n showLessLabel\n )}\n </div>\n );\n};\n","@import '../../common/expandable-text/expandable-text.pcss';\n","import {Schema, StringValue} from '@coveo/bueno';\nimport {Product} from '@coveo/headless/commerce';\nimport {Component, State, h, Element, Prop} from '@stencil/core';\nimport {\n InitializableComponent,\n InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {\n ExpandableText,\n TruncateAfter,\n} from '../../common/expandable-text/stencil-expandable-text';\nimport {Hidden} from '../../common/stencil-hidden';\nimport {CommerceBindings} from '../atomic-commerce-interface/atomic-commerce-interface';\nimport {ProductContext} from '../product-template-component-utils/stencil-product-template-decorators';\n\n/**\n * @alpha\n * The `atomic-product-description` component renders the description of a product.\n */\n@Component({\n tag: 'atomic-product-description',\n styleUrl: 'atomic-product-description.pcss',\n shadow: false,\n})\nexport class AtomicProductDescription\n implements InitializableComponent<CommerceBindings>\n{\n @InitializeBindings() public bindings!: CommerceBindings;\n @ProductContext() private product!: Product;\n\n @Element() hostElement!: HTMLElement;\n\n public error!: Error;\n\n @State() private isExpanded = false;\n @State() private isTruncated = false;\n\n private descriptionText!: HTMLDivElement;\n private resizeObserver: ResizeObserver;\n\n /**\n * The number of lines after which the product description should be truncated. A value of \"none\" will disable truncation.\n */\n @Prop() public truncateAfter: TruncateAfter = '2';\n\n /**\n * The name of the description field to use.\n */\n @Prop() public field: 'ec_description' | 'ec_shortdesc' = 'ec_shortdesc';\n\n /**\n * Whether the description should be collapsible after being expanded.\n */\n @Prop() public isCollapsible = true;\n\n constructor() {\n this.resizeObserver = new ResizeObserver(() => {\n if (\n this.descriptionText &&\n this.descriptionText.scrollHeight > this.descriptionText.clientHeight\n ) {\n this.isTruncated = true;\n } else {\n this.isTruncated = false;\n }\n });\n this.validateProps();\n }\n\n private validateProps() {\n new Schema({\n truncateAfter: new StringValue({\n constrainTo: ['none', '1', '2', '3', '4'],\n }),\n field: new StringValue({\n constrainTo: ['ec_shortdesc', 'ec_description'],\n }),\n }).validate({\n truncateAfter: this.truncateAfter,\n field: this.field,\n });\n }\n\n componentDidLoad() {\n this.descriptionText = this.hostElement.querySelector(\n '.expandable-text'\n ) as HTMLDivElement;\n if (this.descriptionText) {\n this.resizeObserver.observe(this.descriptionText);\n }\n }\n\n private onToggleExpand(e?: MouseEvent) {\n if (e) {\n e.stopPropagation();\n }\n\n this.isExpanded = !this.isExpanded;\n }\n\n disconnectedCallback() {\n this.resizeObserver.disconnect();\n }\n\n public render() {\n const productDescription = this.product[this.field] ?? null;\n\n if (!productDescription) {\n return <Hidden />;\n }\n\n return (\n <ExpandableText\n isExpanded={this.isExpanded}\n isTruncated={this.isTruncated}\n truncateAfter={this.truncateAfter}\n onToggleExpand={(e) => this.onToggleExpand(e)}\n showMoreLabel={this.bindings.i18n.t('show-more')}\n showLessLabel={this.bindings.i18n.t('show-less')}\n isCollapsible={this.isCollapsible}\n >\n <atomic-product-text field={this.field}></atomic-product-text>\n </ExpandableText>\n );\n }\n}\n"],"version":3}
@@ -1,13 +0,0 @@
1
- 'use strict';
2
-
3
- const MinusIcon = `<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m64 208h384v96h-384z"/></svg>`;
4
-
5
- const PlusIcon = `<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
6
- <path d="M496 208H304V16h-96v192H16v96h192v192h96V304h192"/>
7
- </svg>
8
- `;
9
-
10
- exports.MinusIcon = MinusIcon;
11
- exports.PlusIcon = PlusIcon;
12
-
13
- //# sourceMappingURL=plus-07843914.js.map
@@ -1 +0,0 @@
1
- {"file":"plus-07843914.js","mappings":";;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
@@ -1 +0,0 @@
1
- {"file":"stencil-facet-show-more-less-21d22973.js","mappings":";;;;;;;SAIgB,sCAAsC,CACpD,KAA0E,EAC1E,KAAa,EACb,WAAkC,EAClC,IAAU;IAEV,IAAI,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;IACxC,KAAK,CAAC,SAAS,CAAC;QACd,IACEA,gEAAgC,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,SAAS,CAAC;YACpE,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,EAC7B;YACA,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;YAEpC,WAAW,CACT,IAAI,CAAC,CAAC,CAAC,4BAA4B,EAAE;gBACnC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,MAAM;gBAC5C,KAAK;aACN,CAAC,CACH,CAAC;SACH;KACF,CAAC,CAAC;AACL;;MCTa,iBAAiB,GAA4C,CACxE,KAAK;IAEL,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IAC3C,MAAM,mBAAmB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,wBAAwB,EAAE;QACjE,KAAK;KACN,CAAC,CAAC;IACH,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IAC3C,MAAM,mBAAmB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,wBAAwB,EAAE;QACjE,KAAK;KACN,CAAC,CAAC;IACH,MAAM,UAAU,GAAG,sDAAsD,CAAC;IAC1E,MAAM,WAAW,GAAG,cAAc,CAAC;IACnC,IAAI,CAAC,KAAK,CAAC,iBAAiB,IAAI,CAAC,KAAK,CAAC,iBAAiB,EAAE;QACxD,OAAO;KACR;IAED,QACEC,iBAAK,KAAK,EAAC,MAAM;QACfA,QAACC,oBAAM,IACL,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,GAAG,UAAU,IAAI,KAAK,CAAC,iBAAiB,GAAG,EAAE,GAAG,QAAQ,EAAE,EACjE,SAAS,EAAE,mBAAmB,EAC9B,OAAO,EAAE,MAAM,KAAK,CAAC,UAAU,EAAE,EACjC,GAAG,EAAE,KAAK,CAAC,WAAW;YAEtBD,yBACE,IAAI,EAAC,qBAAqB,EAC1B,KAAK,EAAE,WAAW,EAClB,IAAI,EAAEE,cAAS,GACF;YACfF,kBAAM,KAAK,EAAC,UAAU,IAAE,QAAQ,CAAQ,CACjC;QACTA,QAACC,oBAAM,IACL,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,GAAG,UAAU,IAAI,KAAK,CAAC,iBAAiB,GAAG,EAAE,GAAG,QAAQ,EAAE,EACjE,SAAS,EAAE,mBAAmB,EAC9B,OAAO,EAAE,MAAM,KAAK,CAAC,UAAU,EAAE,EACjC,GAAG,EAAE,KAAK,CAAC,WAAW;YAEtBD,yBACE,IAAI,EAAC,qBAAqB,EAC1B,KAAK,EAAE,WAAW,EAClB,IAAI,EAAEG,aAAQ,GACD;YACfH,kBAAM,KAAK,EAAC,UAAU,IAAE,QAAQ,CAAQ,CACjC,CACL,EACN;AACJ;;;;;","names":["shouldUpdateFacetSearchComponent","h","Button","MinusIcon","PlusIcon"],"sources":["src/components/common/facets/facet-search/facet-search-aria-live.ts","src/components/common/facets/facet-show-more-less/stencil-facet-show-more-less.tsx"],"sourcesContent":["import type {Facet, FacetSearchState} from '@coveo/headless';\nimport type {i18n} from 'i18next';\nimport {shouldUpdateFacetSearchComponent} from './facet-search-utils';\n\nexport function announceFacetSearchResultsWithAriaLive(\n facet: Pick<Facet, 'subscribe'> & {state: {facetSearch: FacetSearchState}},\n label: string,\n setAriaLive: (msg: string) => void,\n i18n: i18n\n) {\n let prevState = facet.state.facetSearch;\n facet.subscribe(() => {\n if (\n shouldUpdateFacetSearchComponent(facet.state.facetSearch, prevState) &&\n facet.state.facetSearch.query\n ) {\n prevState = facet.state.facetSearch;\n\n setAriaLive(\n i18n.t('facet-search-results-count', {\n count: facet.state.facetSearch.values.length,\n label,\n })\n );\n }\n });\n}\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport MinusIcon from '../../../../images/minus.svg';\nimport PlusIcon from '../../../../images/plus.svg';\nimport {Button} from '../../stencil-button';\n\ninterface FacetShowMoreProps {\n label: string;\n i18n: i18n;\n canShowLessValues: boolean;\n canShowMoreValues: boolean;\n onShowMore(): void;\n onShowLess(): void;\n showMoreRef?: (element?: HTMLButtonElement) => void;\n showLessRef?: (element?: HTMLButtonElement) => void;\n}\n\nexport const FacetShowMoreLess: FunctionalComponent<FacetShowMoreProps> = (\n props\n) => {\n const label = props.i18n.t(props.label);\n const showMore = props.i18n.t('show-more');\n const showMoreFacetValues = props.i18n.t('show-more-facet-values', {\n label,\n });\n const showLess = props.i18n.t('show-less');\n const showLessFacetValues = props.i18n.t('show-less-facet-values', {\n label,\n });\n const btnClasses = 'flex items-baseline text-left p-2 text-sm max-w-full';\n const iconClasses = 'w-2 h-2 mr-1';\n if (!props.canShowLessValues && !props.canShowMoreValues) {\n return;\n }\n\n return (\n <div class=\"mt-2\">\n <Button\n style=\"text-primary\"\n part=\"show-less\"\n class={`${btnClasses} ${props.canShowLessValues ? '' : 'hidden'}`}\n ariaLabel={showLessFacetValues}\n onClick={() => props.onShowLess()}\n ref={props.showLessRef}\n >\n <atomic-icon\n part=\"show-more-less-icon\"\n class={iconClasses}\n icon={MinusIcon}\n ></atomic-icon>\n <span class=\"truncate\">{showLess}</span>\n </Button>\n <Button\n style=\"text-primary\"\n part=\"show-more\"\n class={`${btnClasses} ${props.canShowMoreValues ? '' : 'hidden'}`}\n ariaLabel={showMoreFacetValues}\n onClick={() => props.onShowMore()}\n ref={props.showMoreRef}\n >\n <atomic-icon\n part=\"show-more-less-icon\"\n class={iconClasses}\n icon={PlusIcon}\n ></atomic-icon>\n <span class=\"truncate\">{showMore}</span>\n </Button>\n </div>\n );\n};\n"],"version":3}
@@ -1,137 +0,0 @@
1
- import { h, r as registerInstance, g as getElement } from './index-3f35faca.js';
2
- import { Schema, StringValue } from '@coveo/bueno';
3
- import { I as InitializeBindings, H as Hidden } from './initialization-utils-ff3edf9a.js';
4
- import { M as MinusIcon, P as PlusIcon } from './plus-00840ff6.js';
5
- import { B as Button } from './stencil-button-2a8cc429.js';
6
- import { P as ProductContext } from './stencil-product-template-decorators-58cfc116.js';
7
- import './dom-utils-f6086cd3.js';
8
- import './event-utils-8de63ec3.js';
9
- import './init-queue-fbe942c3.js';
10
- import './initialization-lit-stencil-common-utils-9e0c895f.js';
11
- import './ripple-b1f0b09d.js';
12
- import './stencil-button-style-0bc80040.js';
13
- import './stencil-item-decorators-6c453c11.js';
14
-
15
- const getLineClampClass = (truncateAfter) => {
16
- const lineClampMap = {
17
- none: 'line-clamp-none',
18
- 1: 'line-clamp-1',
19
- 2: 'line-clamp-2',
20
- 3: 'line-clamp-3',
21
- 4: 'line-clamp-4',
22
- };
23
- return lineClampMap[truncateAfter] || 'line-clamp-2';
24
- };
25
- const renderShowHideButton = (isExpanded, isTruncated, isCollapsible, onToggleExpand, showMoreLabel, showLessLabel) => {
26
- let buttonClass = 'expandable-text-button p-1 text-xs leading-[calc(1/.75)]';
27
- if (!isTruncated && !isExpanded) {
28
- buttonClass += ' invisible';
29
- }
30
- else if (!isCollapsible && !isTruncated && isExpanded) {
31
- buttonClass += ' hidden';
32
- }
33
- const label = isExpanded ? showLessLabel : showMoreLabel;
34
- return (h(Button, { style: "text-primary", class: buttonClass, title: label, onClick: onToggleExpand },
35
- h("atomic-icon", { icon: isExpanded ? MinusIcon : PlusIcon, class: "mx-1 w-2 align-baseline" }),
36
- label));
37
- };
38
- const ExpandableText = ({ isExpanded, isTruncated, truncateAfter, onToggleExpand, showMoreLabel, showLessLabel, isCollapsible = false, }, children) => {
39
- return (h("div", { class: "flex flex-col items-start" },
40
- h("div", { part: "expandable-text", class: `expandable-text ${!isExpanded ? getLineClampClass(truncateAfter) : ''} min-lines-${truncateAfter}` }, children),
41
- renderShowHideButton(isExpanded, isTruncated, isCollapsible, onToggleExpand, showMoreLabel, showLessLabel)));
42
- };
43
-
44
- const atomicProductDescriptionCss = "/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */.expandable-text{line-height:var(--line-height)}.min-lines-1{min-height:calc(var(--line-height) * 1)}.min-lines-2{min-height:calc(var(--line-height) * 2)}.min-lines-3{min-height:calc(var(--line-height) * 3)}.min-lines-4{min-height:calc(var(--line-height) * 4)}";
45
- const AtomicProductDescriptionStyle0 = atomicProductDescriptionCss;
46
-
47
- var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
48
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
49
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
50
- r = Reflect.decorate(decorators, target, key, desc);
51
- else
52
- for (var i = decorators.length - 1; i >= 0; i--)
53
- if (d = decorators[i])
54
- r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
55
- return c > 3 && r && Object.defineProperty(target, key, r), r;
56
- };
57
- const AtomicProductDescription = class {
58
- constructor(hostRef) {
59
- registerInstance(this, hostRef);
60
- this.isExpanded = false;
61
- this.isTruncated = false;
62
- /**
63
- * The number of lines after which the product description should be truncated. A value of "none" will disable truncation.
64
- */
65
- this.truncateAfter = '2';
66
- /**
67
- * The name of the description field to use.
68
- */
69
- this.field = 'ec_shortdesc';
70
- /**
71
- * Whether the description should be collapsible after being expanded.
72
- */
73
- this.isCollapsible = true;
74
- this.isExpanded = false;
75
- this.isTruncated = false;
76
- this.truncateAfter = '2';
77
- this.field = 'ec_shortdesc';
78
- this.isCollapsible = true;
79
- this.resizeObserver = new ResizeObserver(() => {
80
- if (this.descriptionText &&
81
- this.descriptionText.scrollHeight > this.descriptionText.clientHeight) {
82
- this.isTruncated = true;
83
- }
84
- else {
85
- this.isTruncated = false;
86
- }
87
- });
88
- this.validateProps();
89
- }
90
- validateProps() {
91
- new Schema({
92
- truncateAfter: new StringValue({
93
- constrainTo: ['none', '1', '2', '3', '4'],
94
- }),
95
- field: new StringValue({
96
- constrainTo: ['ec_shortdesc', 'ec_description'],
97
- }),
98
- }).validate({
99
- truncateAfter: this.truncateAfter,
100
- field: this.field,
101
- });
102
- }
103
- componentDidLoad() {
104
- this.descriptionText = this.hostElement.querySelector('.expandable-text');
105
- if (this.descriptionText) {
106
- this.resizeObserver.observe(this.descriptionText);
107
- }
108
- }
109
- onToggleExpand(e) {
110
- if (e) {
111
- e.stopPropagation();
112
- }
113
- this.isExpanded = !this.isExpanded;
114
- }
115
- disconnectedCallback() {
116
- this.resizeObserver.disconnect();
117
- }
118
- render() {
119
- const productDescription = this.product[this.field] ?? null;
120
- if (!productDescription) {
121
- return h(Hidden, null);
122
- }
123
- return (h(ExpandableText, { isExpanded: this.isExpanded, isTruncated: this.isTruncated, truncateAfter: this.truncateAfter, onToggleExpand: (e) => this.onToggleExpand(e), showMoreLabel: this.bindings.i18n.t('show-more'), showLessLabel: this.bindings.i18n.t('show-less'), isCollapsible: this.isCollapsible }, h("atomic-product-text", { field: this.field })));
124
- }
125
- get hostElement() { return getElement(this); }
126
- };
127
- __decorate([
128
- InitializeBindings()
129
- ], AtomicProductDescription.prototype, "bindings", void 0);
130
- __decorate([
131
- ProductContext()
132
- ], AtomicProductDescription.prototype, "product", void 0);
133
- AtomicProductDescription.style = AtomicProductDescriptionStyle0;
134
-
135
- export { AtomicProductDescription as atomic_product_description };
136
-
137
- //# sourceMappingURL=atomic-product-description.entry.js.map
@@ -1 +0,0 @@
1
- {"file":"atomic-product-description.entry.js","mappings":"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","names":[],"sources":["src/components/common/expandable-text/stencil-expandable-text.tsx","src/components/commerce/atomic-product-description/atomic-product-description.pcss?tag=atomic-product-description","src/components/commerce/atomic-product-description/atomic-product-description.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport MinusIcon from '../../../images/minus.svg';\nimport PlusIcon from '../../../images/plus.svg';\nimport {Button} from '../stencil-button';\n\nexport type TruncateAfter = 'none' | '1' | '2' | '3' | '4';\n\ninterface ExpandableTextProps {\n isExpanded: boolean;\n isTruncated: boolean;\n isCollapsible?: boolean;\n truncateAfter: TruncateAfter;\n onToggleExpand: (e: MouseEvent | undefined) => void;\n showMoreLabel: string;\n showLessLabel: string;\n}\n\nconst getLineClampClass = (truncateAfter: TruncateAfter) => {\n const lineClampMap: Record<TruncateAfter, string> = {\n none: 'line-clamp-none',\n 1: 'line-clamp-1',\n 2: 'line-clamp-2',\n 3: 'line-clamp-3',\n 4: 'line-clamp-4',\n };\n return lineClampMap[truncateAfter] || 'line-clamp-2';\n};\n\nconst renderShowHideButton = (\n isExpanded: boolean,\n isTruncated: boolean,\n isCollapsible: boolean,\n onToggleExpand: (e?: MouseEvent) => void,\n showMoreLabel: string,\n showLessLabel: string\n) => {\n let buttonClass = 'expandable-text-button p-1 text-xs leading-[calc(1/.75)]';\n if (!isTruncated && !isExpanded) {\n buttonClass += ' invisible';\n } else if (!isCollapsible && !isTruncated && isExpanded) {\n buttonClass += ' hidden';\n }\n\n const label = isExpanded ? showLessLabel : showMoreLabel;\n\n return (\n <Button\n style=\"text-primary\"\n class={buttonClass}\n title={label}\n onClick={onToggleExpand}\n >\n <atomic-icon\n icon={isExpanded ? MinusIcon : PlusIcon}\n class=\"mx-1 w-2 align-baseline\"\n ></atomic-icon>\n {label}\n </Button>\n );\n};\n\nexport const ExpandableText: FunctionalComponent<ExpandableTextProps> = (\n {\n isExpanded,\n isTruncated,\n truncateAfter,\n onToggleExpand,\n showMoreLabel,\n showLessLabel,\n isCollapsible = false,\n },\n children\n) => {\n return (\n <div class=\"flex flex-col items-start\">\n <div\n part=\"expandable-text\"\n class={`expandable-text ${!isExpanded ? getLineClampClass(truncateAfter) : ''} min-lines-${truncateAfter}`}\n >\n {children}\n </div>\n {renderShowHideButton(\n isExpanded,\n isTruncated,\n isCollapsible,\n onToggleExpand,\n showMoreLabel,\n showLessLabel\n )}\n </div>\n );\n};\n","@import '../../common/expandable-text/expandable-text.pcss';\n","import {Schema, StringValue} from '@coveo/bueno';\nimport {Product} from '@coveo/headless/commerce';\nimport {Component, State, h, Element, Prop} from '@stencil/core';\nimport {\n InitializableComponent,\n InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {\n ExpandableText,\n TruncateAfter,\n} from '../../common/expandable-text/stencil-expandable-text';\nimport {Hidden} from '../../common/stencil-hidden';\nimport {CommerceBindings} from '../atomic-commerce-interface/atomic-commerce-interface';\nimport {ProductContext} from '../product-template-component-utils/stencil-product-template-decorators';\n\n/**\n * @alpha\n * The `atomic-product-description` component renders the description of a product.\n */\n@Component({\n tag: 'atomic-product-description',\n styleUrl: 'atomic-product-description.pcss',\n shadow: false,\n})\nexport class AtomicProductDescription\n implements InitializableComponent<CommerceBindings>\n{\n @InitializeBindings() public bindings!: CommerceBindings;\n @ProductContext() private product!: Product;\n\n @Element() hostElement!: HTMLElement;\n\n public error!: Error;\n\n @State() private isExpanded = false;\n @State() private isTruncated = false;\n\n private descriptionText!: HTMLDivElement;\n private resizeObserver: ResizeObserver;\n\n /**\n * The number of lines after which the product description should be truncated. A value of \"none\" will disable truncation.\n */\n @Prop() public truncateAfter: TruncateAfter = '2';\n\n /**\n * The name of the description field to use.\n */\n @Prop() public field: 'ec_description' | 'ec_shortdesc' = 'ec_shortdesc';\n\n /**\n * Whether the description should be collapsible after being expanded.\n */\n @Prop() public isCollapsible = true;\n\n constructor() {\n this.resizeObserver = new ResizeObserver(() => {\n if (\n this.descriptionText &&\n this.descriptionText.scrollHeight > this.descriptionText.clientHeight\n ) {\n this.isTruncated = true;\n } else {\n this.isTruncated = false;\n }\n });\n this.validateProps();\n }\n\n private validateProps() {\n new Schema({\n truncateAfter: new StringValue({\n constrainTo: ['none', '1', '2', '3', '4'],\n }),\n field: new StringValue({\n constrainTo: ['ec_shortdesc', 'ec_description'],\n }),\n }).validate({\n truncateAfter: this.truncateAfter,\n field: this.field,\n });\n }\n\n componentDidLoad() {\n this.descriptionText = this.hostElement.querySelector(\n '.expandable-text'\n ) as HTMLDivElement;\n if (this.descriptionText) {\n this.resizeObserver.observe(this.descriptionText);\n }\n }\n\n private onToggleExpand(e?: MouseEvent) {\n if (e) {\n e.stopPropagation();\n }\n\n this.isExpanded = !this.isExpanded;\n }\n\n disconnectedCallback() {\n this.resizeObserver.disconnect();\n }\n\n public render() {\n const productDescription = this.product[this.field] ?? null;\n\n if (!productDescription) {\n return <Hidden />;\n }\n\n return (\n <ExpandableText\n isExpanded={this.isExpanded}\n isTruncated={this.isTruncated}\n truncateAfter={this.truncateAfter}\n onToggleExpand={(e) => this.onToggleExpand(e)}\n showMoreLabel={this.bindings.i18n.t('show-more')}\n showLessLabel={this.bindings.i18n.t('show-less')}\n isCollapsible={this.isCollapsible}\n >\n <atomic-product-text field={this.field}></atomic-product-text>\n </ExpandableText>\n );\n }\n}\n"],"version":3}
@@ -1,10 +0,0 @@
1
- const MinusIcon = `<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m64 208h384v96h-384z"/></svg>`;
2
-
3
- const PlusIcon = `<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
4
- <path d="M496 208H304V16h-96v192H16v96h192v192h96V304h192"/>
5
- </svg>
6
- `;
7
-
8
- export { MinusIcon as M, PlusIcon as P };
9
-
10
- //# sourceMappingURL=plus-00840ff6.js.map
@@ -1 +0,0 @@
1
- {"file":"plus-00840ff6.js","mappings":";;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
@@ -1 +0,0 @@
1
- {"file":"stencil-facet-show-more-less-4b023ee3.js","mappings":";;;;;SAIgB,sCAAsC,CACpD,KAA0E,EAC1E,KAAa,EACb,WAAkC,EAClC,IAAU;IAEV,IAAI,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;IACxC,KAAK,CAAC,SAAS,CAAC;QACd,IACE,gCAAgC,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,SAAS,CAAC;YACpE,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,EAC7B;YACA,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC;YAEpC,WAAW,CACT,IAAI,CAAC,CAAC,CAAC,4BAA4B,EAAE;gBACnC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,MAAM;gBAC5C,KAAK;aACN,CAAC,CACH,CAAC;SACH;KACF,CAAC,CAAC;AACL;;MCTa,iBAAiB,GAA4C,CACxE,KAAK;IAEL,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IAC3C,MAAM,mBAAmB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,wBAAwB,EAAE;QACjE,KAAK;KACN,CAAC,CAAC;IACH,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IAC3C,MAAM,mBAAmB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,wBAAwB,EAAE;QACjE,KAAK;KACN,CAAC,CAAC;IACH,MAAM,UAAU,GAAG,sDAAsD,CAAC;IAC1E,MAAM,WAAW,GAAG,cAAc,CAAC;IACnC,IAAI,CAAC,KAAK,CAAC,iBAAiB,IAAI,CAAC,KAAK,CAAC,iBAAiB,EAAE;QACxD,OAAO;KACR;IAED,QACE,WAAK,KAAK,EAAC,MAAM;QACf,EAAC,MAAM,IACL,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,GAAG,UAAU,IAAI,KAAK,CAAC,iBAAiB,GAAG,EAAE,GAAG,QAAQ,EAAE,EACjE,SAAS,EAAE,mBAAmB,EAC9B,OAAO,EAAE,MAAM,KAAK,CAAC,UAAU,EAAE,EACjC,GAAG,EAAE,KAAK,CAAC,WAAW;YAEtB,mBACE,IAAI,EAAC,qBAAqB,EAC1B,KAAK,EAAE,WAAW,EAClB,IAAI,EAAE,SAAS,GACF;YACf,YAAM,KAAK,EAAC,UAAU,IAAE,QAAQ,CAAQ,CACjC;QACT,EAAC,MAAM,IACL,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,GAAG,UAAU,IAAI,KAAK,CAAC,iBAAiB,GAAG,EAAE,GAAG,QAAQ,EAAE,EACjE,SAAS,EAAE,mBAAmB,EAC9B,OAAO,EAAE,MAAM,KAAK,CAAC,UAAU,EAAE,EACjC,GAAG,EAAE,KAAK,CAAC,WAAW;YAEtB,mBACE,IAAI,EAAC,qBAAqB,EAC1B,KAAK,EAAE,WAAW,EAClB,IAAI,EAAE,QAAQ,GACD;YACf,YAAM,KAAK,EAAC,UAAU,IAAE,QAAQ,CAAQ,CACjC,CACL,EACN;AACJ;;;;","names":[],"sources":["src/components/common/facets/facet-search/facet-search-aria-live.ts","src/components/common/facets/facet-show-more-less/stencil-facet-show-more-less.tsx"],"sourcesContent":["import type {Facet, FacetSearchState} from '@coveo/headless';\nimport type {i18n} from 'i18next';\nimport {shouldUpdateFacetSearchComponent} from './facet-search-utils';\n\nexport function announceFacetSearchResultsWithAriaLive(\n facet: Pick<Facet, 'subscribe'> & {state: {facetSearch: FacetSearchState}},\n label: string,\n setAriaLive: (msg: string) => void,\n i18n: i18n\n) {\n let prevState = facet.state.facetSearch;\n facet.subscribe(() => {\n if (\n shouldUpdateFacetSearchComponent(facet.state.facetSearch, prevState) &&\n facet.state.facetSearch.query\n ) {\n prevState = facet.state.facetSearch;\n\n setAriaLive(\n i18n.t('facet-search-results-count', {\n count: facet.state.facetSearch.values.length,\n label,\n })\n );\n }\n });\n}\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport MinusIcon from '../../../../images/minus.svg';\nimport PlusIcon from '../../../../images/plus.svg';\nimport {Button} from '../../stencil-button';\n\ninterface FacetShowMoreProps {\n label: string;\n i18n: i18n;\n canShowLessValues: boolean;\n canShowMoreValues: boolean;\n onShowMore(): void;\n onShowLess(): void;\n showMoreRef?: (element?: HTMLButtonElement) => void;\n showLessRef?: (element?: HTMLButtonElement) => void;\n}\n\nexport const FacetShowMoreLess: FunctionalComponent<FacetShowMoreProps> = (\n props\n) => {\n const label = props.i18n.t(props.label);\n const showMore = props.i18n.t('show-more');\n const showMoreFacetValues = props.i18n.t('show-more-facet-values', {\n label,\n });\n const showLess = props.i18n.t('show-less');\n const showLessFacetValues = props.i18n.t('show-less-facet-values', {\n label,\n });\n const btnClasses = 'flex items-baseline text-left p-2 text-sm max-w-full';\n const iconClasses = 'w-2 h-2 mr-1';\n if (!props.canShowLessValues && !props.canShowMoreValues) {\n return;\n }\n\n return (\n <div class=\"mt-2\">\n <Button\n style=\"text-primary\"\n part=\"show-less\"\n class={`${btnClasses} ${props.canShowLessValues ? '' : 'hidden'}`}\n ariaLabel={showLessFacetValues}\n onClick={() => props.onShowLess()}\n ref={props.showLessRef}\n >\n <atomic-icon\n part=\"show-more-less-icon\"\n class={iconClasses}\n icon={MinusIcon}\n ></atomic-icon>\n <span class=\"truncate\">{showLess}</span>\n </Button>\n <Button\n style=\"text-primary\"\n part=\"show-more\"\n class={`${btnClasses} ${props.canShowMoreValues ? '' : 'hidden'}`}\n ariaLabel={showMoreFacetValues}\n onClick={() => props.onShowMore()}\n ref={props.showMoreRef}\n >\n <atomic-icon\n part=\"show-more-less-icon\"\n class={iconClasses}\n icon={PlusIcon}\n ></atomic-icon>\n <span class=\"truncate\">{showMore}</span>\n </Button>\n </div>\n );\n};\n"],"version":3}