@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.
- package/dist/atomic/_atomic.esm.js +1 -1
- package/dist/atomic/atomic.esm.js.map +1 -1
- package/dist/atomic/components/_index.d.ts +0 -2
- package/dist/atomic/components/_index.js +0 -1
- package/dist/atomic/components/analytics-config.js +1 -1
- package/dist/atomic/components/components/commerce/atomic-product-description/atomic-product-description.js +149 -0
- package/dist/atomic/components/components/commerce/atomic-product-description/atomic-product-description.tw.css.js +3 -0
- package/dist/atomic/components/components/commerce/atomic-product-template/atomic-product-template.js +1 -0
- package/dist/atomic/components/components/commerce/index.js +1 -0
- package/dist/atomic/components/components/commerce/lazy-index.js +1 -0
- package/dist/atomic/components/global/environment.js +1 -1
- package/dist/atomic/components/index.js.map +1 -1
- package/dist/atomic/components/stencil-facet-show-more-less.js +7 -1
- package/dist/atomic/components/stencil-facet-show-more-less.js.map +1 -1
- package/dist/atomic/{p-3d224a05.entry.js → p-00c7c8bc.entry.js} +2 -2
- package/dist/atomic/p-1e0f2e91.entry.js +2 -0
- package/dist/atomic/{p-8bb323e8.entry.js.map → p-1e0f2e91.entry.js.map} +1 -1
- package/dist/atomic/{p-a7eb687d.js → p-1e118dbf.js} +2 -2
- package/dist/atomic/p-29c272bb.entry.js +2 -0
- package/dist/atomic/{p-4e77fe24.entry.js.map → p-29c272bb.entry.js.map} +1 -1
- package/dist/atomic/p-417b1b64.js +2 -0
- package/dist/atomic/{p-c100197d.js.map → p-417b1b64.js.map} +1 -1
- package/dist/atomic/p-44a3c052.entry.js +2 -0
- package/dist/atomic/{p-e215ba76.entry.js.map → p-44a3c052.entry.js.map} +1 -1
- package/dist/atomic/{p-0dde1772.entry.js → p-773dcc60.entry.js} +2 -2
- package/dist/atomic/{p-9eac6c89.entry.js → p-8b3df33c.entry.js} +2 -2
- package/dist/atomic/p-91477908.entry.js +2 -0
- package/dist/atomic/{p-3f881919.entry.js.map → p-91477908.entry.js.map} +1 -1
- package/dist/atomic/p-e8ba8acd.entry.js +2 -0
- package/dist/atomic/{p-0873c1b8.entry.js.map → p-e8ba8acd.entry.js.map} +1 -1
- package/dist/cjs/_loader.cjs.js +1 -1
- package/dist/cjs/{analytics-config-58aee61e.js → analytics-config-edaf0d1e.js} +2 -2
- package/dist/cjs/{analytics-config-58aee61e.js.map → analytics-config-edaf0d1e.js.map} +1 -1
- package/dist/cjs/atomic-category-facet.cjs.entry.js +1 -2
- package/dist/cjs/atomic-category-facet.cjs.entry.js.map +1 -1
- package/dist/cjs/atomic-color-facet.cjs.entry.js +1 -2
- package/dist/cjs/atomic-color-facet.cjs.entry.js.map +1 -1
- package/dist/cjs/atomic-commerce-category-facet_4.cjs.entry.js +1 -2
- package/dist/cjs/atomic-commerce-category-facet_4.cjs.entry.js.map +1 -1
- package/dist/cjs/atomic-facet.cjs.entry.js +1 -2
- package/dist/cjs/atomic-facet.cjs.entry.js.map +1 -1
- package/dist/cjs/atomic-insight-facet.cjs.entry.js +1 -2
- package/dist/cjs/atomic-insight-facet.cjs.entry.js.map +1 -1
- package/dist/cjs/atomic-insight-interface.cjs.entry.js +1 -1
- package/dist/cjs/atomic-recs-interface.cjs.entry.js +1 -1
- package/dist/cjs/atomic-search-interface.cjs.entry.js +1 -1
- package/dist/cjs/atomic.cjs.js +1 -1
- package/dist/cjs/index-757bc886.js +0 -4
- package/dist/cjs/{stencil-facet-show-more-less-21d22973.js → stencil-facet-show-more-less-541e1544.js} +10 -4
- package/dist/cjs/stencil-facet-show-more-less-541e1544.js.map +1 -0
- package/dist/cjs/version.cjs.js +2 -2
- package/dist/esm/_loader.js +1 -1
- package/dist/esm/{analytics-config-06a872d6.js → analytics-config-1fab55eb.js} +2 -2
- package/dist/esm/{analytics-config-06a872d6.js.map → analytics-config-1fab55eb.js.map} +1 -1
- package/dist/esm/atomic-category-facet.entry.js +1 -2
- package/dist/esm/atomic-category-facet.entry.js.map +1 -1
- package/dist/esm/atomic-color-facet.entry.js +1 -2
- package/dist/esm/atomic-color-facet.entry.js.map +1 -1
- package/dist/esm/atomic-commerce-category-facet_4.entry.js +1 -2
- package/dist/esm/atomic-commerce-category-facet_4.entry.js.map +1 -1
- package/dist/esm/atomic-facet.entry.js +1 -2
- package/dist/esm/atomic-facet.entry.js.map +1 -1
- package/dist/esm/atomic-insight-facet.entry.js +1 -2
- package/dist/esm/atomic-insight-facet.entry.js.map +1 -1
- package/dist/esm/atomic-insight-interface.entry.js +1 -1
- package/dist/esm/atomic-recs-interface.entry.js +1 -1
- package/dist/esm/atomic-search-interface.entry.js +1 -1
- package/dist/esm/atomic.js +1 -1
- package/dist/esm/index-3f35faca.js +0 -4
- package/dist/esm/{stencil-facet-show-more-less-4b023ee3.js → stencil-facet-show-more-less-1198472f.js} +8 -2
- package/dist/esm/stencil-facet-show-more-less-1198472f.js.map +1 -0
- package/dist/esm/version.js +2 -2
- package/dist/types/components/commerce/atomic-product-description/atomic-product-description.d.ts +21 -10
- package/dist/types/components/commerce/atomic-product-template/atomic-product-template.d.ts +1 -0
- package/dist/types/components/commerce/index.d.ts +1 -0
- package/dist/types/components.d.ts +0 -51
- package/docs/atomic-docs.json +1 -124
- package/package.json +3 -3
- package/dist/atomic/components/atomic-product-description.d.ts +0 -11
- package/dist/atomic/components/atomic-product-description.js +0 -153
- package/dist/atomic/components/atomic-product-description.js.map +0 -1
- package/dist/atomic/components/plus.js +0 -10
- package/dist/atomic/components/plus.js.map +0 -1
- package/dist/atomic/p-0873c1b8.entry.js +0 -2
- package/dist/atomic/p-3f881919.entry.js +0 -2
- package/dist/atomic/p-4e77fe24.entry.js +0 -2
- package/dist/atomic/p-8bb323e8.entry.js +0 -2
- package/dist/atomic/p-8f20d930.js +0 -2
- package/dist/atomic/p-8f20d930.js.map +0 -1
- package/dist/atomic/p-c100197d.js +0 -2
- package/dist/atomic/p-e215ba76.entry.js +0 -2
- package/dist/atomic/p-f2d31b97.entry.js +0 -2
- package/dist/atomic/p-f2d31b97.entry.js.map +0 -1
- package/dist/cjs/atomic-product-description.cjs.entry.js +0 -141
- package/dist/cjs/atomic-product-description.cjs.entry.js.map +0 -1
- package/dist/cjs/plus-07843914.js +0 -13
- package/dist/cjs/plus-07843914.js.map +0 -1
- package/dist/cjs/stencil-facet-show-more-less-21d22973.js.map +0 -1
- package/dist/esm/atomic-product-description.entry.js +0 -137
- package/dist/esm/atomic-product-description.entry.js.map +0 -1
- package/dist/esm/plus-00840ff6.js +0 -10
- package/dist/esm/plus-00840ff6.js.map +0 -1
- package/dist/esm/stencil-facet-show-more-less-4b023ee3.js.map +0 -1
- /package/dist/atomic/{p-3d224a05.entry.js.map → p-00c7c8bc.entry.js.map} +0 -0
- /package/dist/atomic/{p-a7eb687d.js.map → p-1e118dbf.js.map} +0 -0
- /package/dist/atomic/{p-0dde1772.entry.js.map → p-773dcc60.entry.js.map} +0 -0
- /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":";;;;;;;;;;;;;;AAiBA,MAAM,iBAAiB,GAAG,CAAC,aAA4B;IACrD,MAAM,YAAY,GAAkC;QAClD,IAAI,EAAE,iBAAiB;QACvB,CAAC,EAAE,cAAc;QACjB,CAAC,EAAE,cAAc;QACjB,CAAC,EAAE,cAAc;QACjB,CAAC,EAAE,cAAc;KAClB,CAAC;IACF,OAAO,YAAY,CAAC,aAAa,CAAC,IAAI,cAAc,CAAC;AACvD,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAC3B,UAAmB,EACnB,WAAoB,EACpB,aAAsB,EACtB,cAAwC,EACxC,aAAqB,EACrB,aAAqB;IAErB,IAAI,WAAW,GAAG,0DAA0D,CAAC;IAC7E,IAAI,CAAC,WAAW,IAAI,CAAC,UAAU,EAAE;QAC/B,WAAW,IAAI,YAAY,CAAC;KAC7B;SAAM,IAAI,CAAC,aAAa,IAAI,CAAC,WAAW,IAAI,UAAU,EAAE;QACvD,WAAW,IAAI,SAAS,CAAC;KAC1B;IAED,MAAM,KAAK,GAAG,UAAU,GAAG,aAAa,GAAG,aAAa,CAAC;IAEzD,QACE,EAAC,MAAM,IACL,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE,WAAW,EAClB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,cAAc;QAEvB,mBACE,IAAI,EAAE,UAAU,GAAG,SAAS,GAAG,QAAQ,EACvC,KAAK,EAAC,yBAAyB,GAClB;QACd,KAAK,CACC,EACT;AACJ,CAAC,CAAC;AAEK,MAAM,cAAc,GAA6C,CACtE,EACE,UAAU,EACV,WAAW,EACX,aAAa,EACb,cAAc,EACd,aAAa,EACb,aAAa,EACb,aAAa,GAAG,KAAK,GACtB,EACD,QAAQ;IAER,QACE,WAAK,KAAK,EAAC,2BAA2B;QACpC,WACE,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,mBAAmB,CAAC,UAAU,GAAG,iBAAiB,CAAC,aAAa,CAAC,GAAG,EAAE,cAAc,aAAa,EAAE,IAEzG,QAAQ,CACL;QACL,oBAAoB,CACnB,UAAU,EACV,WAAW,EACX,aAAa,EACb,cAAc,EACd,aAAa,EACb,aAAa,CACd,CACG,EACN;AACJ,CAAC;;AC3FD,MAAM,2BAA2B,GAAG,wUAAwU,CAAC;AAC7W,uCAAe,2BAA2B;;;;;;;;;;;;MCuB7B,wBAAwB;IA+BnC;;QArBiB,eAAU,GAAG,KAAK,CAAC;QACnB,gBAAW,GAAG,KAAK,CAAC;;;;QAQtB,kBAAa,GAAkB,GAAG,CAAC;;;;QAKnC,UAAK,GAAsC,cAAc,CAAC;;;;QAK1D,kBAAa,GAAG,IAAI,CAAC;0BAnBN,KAAK;2BACJ,KAAK;6BAQU,GAAG;qBAKS,cAAc;6BAKzC,IAAI;QAGjC,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC;YACvC,IACE,IAAI,CAAC,eAAe;gBACpB,IAAI,CAAC,eAAe,CAAC,YAAY,GAAG,IAAI,CAAC,eAAe,CAAC,YAAY,EACrE;gBACA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;aACzB;iBAAM;gBACL,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;aAC1B;SACF,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAEO,aAAa;QACnB,IAAI,MAAM,CAAC;YACT,aAAa,EAAE,IAAI,WAAW,CAAC;gBAC7B,WAAW,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;aAC1C,CAAC;YACF,KAAK,EAAE,IAAI,WAAW,CAAC;gBACrB,WAAW,EAAE,CAAC,cAAc,EAAE,gBAAgB,CAAC;aAChD,CAAC;SACH,CAAC,CAAC,QAAQ,CAAC;YACV,aAAa,EAAE,IAAI,CAAC,aAAa;YACjC,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC;KACJ;IAED,gBAAgB;QACd,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CACnD,kBAAkB,CACD,CAAC;QACpB,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SACnD;KACF;IAEO,cAAc,CAAC,CAAc;QACnC,IAAI,CAAC,EAAE;YACL,CAAC,CAAC,eAAe,EAAE,CAAC;SACrB;QAED,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;KACpC;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;KAClC;IAEM,MAAM;QACX,MAAM,kBAAkB,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC;QAE5D,IAAI,CAAC,kBAAkB,EAAE;YACvB,OAAO,EAAC,MAAM,OAAG,CAAC;SACnB;QAED,QACE,EAAC,cAAc,IACb,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,cAAc,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAC7C,aAAa,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,EAChD,aAAa,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,EAChD,aAAa,EAAE,IAAI,CAAC,aAAa,IAEjC,2BAAqB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAwB,CAC/C,EACjB;KACH;;;AAjG4B;IAA5B,kBAAkB,EAAE;0DAAoC;AAC/B;IAAzB,cAAc,EAAE;yDAA2B;;;;;","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}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|