@coveo/atomic 3.35.0-pre.5bebe1af22 → 3.35.0-pre.836ecb81ea

package/dist/cjs/facet-placeholder-5beb1e14.js

@@ -0,0 +1,56 @@
+'use strict';
+
+const index = require('./index-757bc886.js');
+const arrowBottomRounded = require('./arrow-bottom-rounded-705a1b2c.js');
+const arrowTopRounded = require('./arrow-top-rounded-e7a05d2f.js');
+const close = require('./close-20739950.js');
+const stencilButton = require('./stencil-button-62b500e4.js');
+const stencilHeading = require('./stencil-heading-7e57d2eb.js');
+
+/**
+ * @deprecated should only be used for Stencil components.
+ */
+const FacetContainer = (_, children) => (index.h("div", { class: "bg-background border-neutral rounded-lg border p-4", part: "facet" }, children));
+
+/**
+ * @deprecated should only be used for Stencil components.
+ */
+const FacetHeader = (props) => {
+    const label = props.i18n.t(props.label);
+    const expandFacet = props.i18n.t('expand-facet', { label });
+    const collapseFacet = props.i18n.t('collapse-facet', { label });
+    const clearFilters = props.i18n.t('clear-filters', {
+        count: props.numberOfActiveValues,
+    });
+    const clearFiltersForFacet = props.i18n.t('clear-filters-for-facet', {
+        count: props.numberOfActiveValues,
+        label,
+    });
+    return [
+        index.h(stencilButton.Button, { style: "text-transparent", part: "label-button", class: "flex w-full justify-between rounded-none px-2 py-1 text-lg font-bold", ariaLabel: props.isCollapsed ? expandFacet : collapseFacet, onClick: () => props.onToggleCollapse(), ariaExpanded: (!props.isCollapsed).toString(), ref: props.headerRef },
+            index.h(stencilHeading.Heading, { level: props.headingLevel, class: "truncate" }, label),
+            index.h("atomic-icon", { part: "label-button-icon", class: "ml-4 w-3 shrink-0 self-center", icon: props.isCollapsed ? arrowBottomRounded.ArrowBottomIcon : arrowTopRounded.ArrowUp })),
+        props.onClearFilters && props.numberOfActiveValues > 0 && (index.h(stencilButton.Button, { style: "text-primary", part: "clear-button", class: "flex max-w-full items-baseline p-2 text-sm", ariaLabel: clearFiltersForFacet, onClick: () => props.onClearFilters() },
+            index.h("atomic-icon", { part: "clear-button-icon", class: "mr-1 h-2 w-2", icon: close.CloseIcon }),
+            index.h("span", null, clearFilters))),
+    ];
+};
+
+/**
+ * @deprecated should only be used for Stencil components.
+ */
+const FacetPlaceholder = ({ numberOfValues, isCollapsed, }) => {
+    const facetValues = [];
+    for (let i = 0; i < numberOfValues; i++) {
+        facetValues.push(index.h("div", { class: "bg-neutral mt-4 flex h-5", style: { width: '100%', opacity: '0.5' } }));
+    }
+    return (index.h("div", { part: "placeholder", class: "bg-background border-neutral mb-4 animate-pulse rounded-lg border p-7", "aria-hidden": "true" },
+        index.h("div", { class: "bg-neutral h-8 rounded", style: { width: '75%' } }),
+        !isCollapsed && index.h("div", { class: "mt-7" }, facetValues)));
+};
+
+exports.FacetContainer = FacetContainer;
+exports.FacetHeader = FacetHeader;
+exports.FacetPlaceholder = FacetPlaceholder;
+
+//# sourceMappingURL=facet-placeholder-5beb1e14.js.map

package/dist/cjs/facet-placeholder-5beb1e14.js.map

@@ -0,0 +1 @@
+{"file":"facet-placeholder-5beb1e14.js","mappings":";;;;;;;;;AAEA;;;MAGa,cAAc,GAAwB,CAAC,CAAC,EAAE,QAAQ,MAC7DA,iBAAK,KAAK,EAAC,oDAAoD,EAAC,IAAI,EAAC,OAAO,IACzE,QAAQ,CACL;;ACWR;;;MAGa,WAAW,GAA0C,CAAC,KAAK;IACtE,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,EAAE,EAAC,KAAK,EAAC,CAAC,CAAC;IAC1D,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,gBAAgB,EAAE,EAAC,KAAK,EAAC,CAAC,CAAC;IAC9D,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,EAAE;QACjD,KAAK,EAAE,KAAK,CAAC,oBAAoB;KAClC,CAAC,CAAC;IACH,MAAM,oBAAoB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,yBAAyB,EAAE;QACnE,KAAK,EAAE,KAAK,CAAC,oBAAoB;QACjC,KAAK;KACN,CAAC,CAAC;IAEH,OAAO;QACLA,QAACC,oBAAM,IACL,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,sEAAsE,EAC5E,SAAS,EAAE,KAAK,CAAC,WAAW,GAAG,WAAW,GAAG,aAAa,EAC1D,OAAO,EAAE,MAAM,KAAK,CAAC,gBAAgB,EAAE,EACvC,YAAY,EAAE,CAAC,CAAC,KAAK,CAAC,WAAW,EAAE,QAAQ,EAAE,EAC7C,GAAG,EAAE,KAAK,CAAC,SAAS;YAEpBD,QAACE,sBAAO,IAAC,KAAK,EAAE,KAAK,CAAC,YAAY,EAAE,KAAK,EAAC,UAAU,IACjD,KAAK,CACE;YACVF,yBACE,IAAI,EAAC,mBAAmB,EACxB,KAAK,EAAC,+BAA+B,EACrC,IAAI,EAAE,KAAK,CAAC,WAAW,GAAGG,kCAAe,GAAGC,uBAAY,GAC3C,CACR;QACT,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,oBAAoB,GAAG,CAAC,KACpDJ,QAACC,oBAAM,IACL,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,4CAA4C,EAClD,SAAS,EAAE,oBAAoB,EAC/B,OAAO,EAAE,MAAM,KAAK,CAAC,cAAe,EAAE;YAEtCD,yBACE,IAAI,EAAC,mBAAmB,EACxB,KAAK,EAAC,cAAc,EACpB,IAAI,EAAEK,eAAS,GACF;YACfL,sBAAO,YAAY,CAAQ,CACpB,CACV;KACF,CAAC;AACJ;;AC/DA;;;MAGa,gBAAgB,GAA+C,CAAC,EAC3E,cAAc,EACd,WAAW,GACZ;IACC,MAAM,WAAW,GAAG,EAAE,CAAC;IACvB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,cAAc,EAAE,CAAC,EAAE,EAAE;QACvC,WAAW,CAAC,IAAI,CACdA,iBACE,KAAK,EAAC,0BAA0B,EAChC,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAC,GACjC,CACR,CAAC;KACH;IAED,QACEA,iBACE,IAAI,EAAC,aAAa,EAClB,KAAK,EAAC,uEAAuE,iBACjE,MAAM;QAElBA,iBAAK,KAAK,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAC,KAAK,EAAE,KAAK,EAAC,GAAQ;QAChE,CAAC,WAAW,IAAIA,iBAAK,KAAK,EAAC,MAAM,IAAE,WAAW,CAAO,CAClD,EACN;AACJ;;;;;;","names":["h","Button","Heading","ArrowBottomIcon","ArrowTopIcon","CloseIcon"],"sources":["src/components/common/facets/facet-container/stencil-facet-container.tsx","src/components/common/facets/facet-header/stencil-facet-header.tsx","src/components/common/facets/facet-placeholder/facet-placeholder.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const FacetContainer: FunctionalComponent = (_, children) => (\n  <div class=\"bg-background border-neutral rounded-lg border p-4\" part=\"facet\">\n    {children}\n  </div>\n);\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {i18n} from 'i18next';\nimport ArrowBottomIcon from '../../../../images/arrow-bottom-rounded.svg';\nimport ArrowTopIcon from '../../../../images/arrow-top-rounded.svg';\nimport CloseIcon from '../../../../images/close.svg';\nimport {Button} from '../../stencil-button';\nimport {Heading} from '../../stencil-heading';\n\ninterface FacetHeaderProps {\n  i18n: i18n;\n  label: string;\n  numberOfActiveValues: number;\n  isCollapsed: boolean;\n  headingLevel: number;\n  onToggleCollapse(): void;\n  onClearFilters?(): void;\n  headerRef?: (element?: HTMLButtonElement) => void;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const FacetHeader: FunctionalComponent<FacetHeaderProps> = (props) => {\n  const label = props.i18n.t(props.label);\n  const expandFacet = props.i18n.t('expand-facet', {label});\n  const collapseFacet = props.i18n.t('collapse-facet', {label});\n  const clearFilters = props.i18n.t('clear-filters', {\n    count: props.numberOfActiveValues,\n  });\n  const clearFiltersForFacet = props.i18n.t('clear-filters-for-facet', {\n    count: props.numberOfActiveValues,\n    label,\n  });\n\n  return [\n    <Button\n      style=\"text-transparent\"\n      part=\"label-button\"\n      class=\"flex w-full justify-between rounded-none px-2 py-1 text-lg font-bold\"\n      ariaLabel={props.isCollapsed ? expandFacet : collapseFacet}\n      onClick={() => props.onToggleCollapse()}\n      ariaExpanded={(!props.isCollapsed).toString()}\n      ref={props.headerRef}\n    >\n      <Heading level={props.headingLevel} class=\"truncate\">\n        {label}\n      </Heading>\n      <atomic-icon\n        part=\"label-button-icon\"\n        class=\"ml-4 w-3 shrink-0 self-center\"\n        icon={props.isCollapsed ? ArrowBottomIcon : ArrowTopIcon}\n      ></atomic-icon>\n    </Button>,\n    props.onClearFilters && props.numberOfActiveValues > 0 && (\n      <Button\n        style=\"text-primary\"\n        part=\"clear-button\"\n        class=\"flex max-w-full items-baseline p-2 text-sm\"\n        ariaLabel={clearFiltersForFacet}\n        onClick={() => props.onClearFilters!()}\n      >\n        <atomic-icon\n          part=\"clear-button-icon\"\n          class=\"mr-1 h-2 w-2\"\n          icon={CloseIcon}\n        ></atomic-icon>\n        <span>{clearFilters}</span>\n      </Button>\n    ),\n  ];\n};\n","import {FunctionalComponent, h} from '@stencil/core';\n\ninterface FacetPlaceholderProps {\n  numberOfValues: number;\n  isCollapsed: boolean;\n}\n\n/**\n * @deprecated should only be used for Stencil components.\n */\nexport const FacetPlaceholder: FunctionalComponent<FacetPlaceholderProps> = ({\n  numberOfValues,\n  isCollapsed,\n}) => {\n  const facetValues = [];\n  for (let i = 0; i < numberOfValues; i++) {\n    facetValues.push(\n      <div\n        class=\"bg-neutral mt-4 flex h-5\"\n        style={{width: '100%', opacity: '0.5'}}\n      ></div>\n    );\n  }\n\n  return (\n    <div\n      part=\"placeholder\"\n      class=\"bg-background border-neutral mb-4 animate-pulse rounded-lg border p-7\"\n      aria-hidden=\"true\"\n    >\n      <div class=\"bg-neutral h-8 rounded\" style={{width: '75%'}}></div>\n      {!isCollapsed && <div class=\"mt-7\">{facetValues}</div>}\n    </div>\n  );\n};\n"],"version":3}