@coveo/atomic 3.33.2-pre.f51bdbb034 → 3.33.2

package/dist/esm/atomic-search-layout.entry.js

@@ -1,53 +0,0 @@
-import { r as registerInstance, g as getElement } from './index-3f35faca.js';
-import { I as InitializeBindings } from './initialization-utils-ffbc4136.js';
-import { D as DEFAULT_MOBILE_BREAKPOINT } from './replace-breakpoint-213367f8.js';
-import { r as randomID } from './utils-7ac76ba7.js';
-import { b as buildSearchLayout } from './search-layout-fdd7a917.js';
-import './dom-utils-f6086cd3.js';
-import './event-utils-8de63ec3.js';
-import './init-queue-fbe942c3.js';
-import './initialization-lit-stencil-common-utils-804fe146.js';
-import './purify-c7ebd240.js';
-import './_commonjsHelpers-1789f0cf.js';
-import './sections-ae00b53a.js';
-
-const atomicSearchLayoutCss = ".atomic-modal-opened{overflow-y:hidden}atomic-layout-section[section='search']{grid-area:atomic-section-search}atomic-layout-section[section='facets']{grid-area:atomic-section-facets}atomic-layout-section[section='main']{grid-area:atomic-section-main}atomic-layout-section[section='status']{grid-area:atomic-section-status}atomic-layout-section[section='pagination']{grid-area:atomic-section-pagination}atomic-search-layout{width:100%;height:100%;display:none;grid-template-areas:'. atomic-section-search .'\n    '. atomic-section-main .';grid-template-columns:var(--atomic-layout-spacing-x) minmax(0, 1fr) var(--atomic-layout-spacing-x)}atomic-search-layout atomic-layout-section[section='search']{margin:var(--atomic-layout-spacing-y) 0;max-width:var(--atomic-layout-max-search-box-input-width, 678px);width:100%;justify-self:center}atomic-search-layout atomic-layout-section[section='search'] atomic-search-box::part(suggestions-double-list){width:125%;max-width:var(--atomic-layout-max-search-box-double-suggestions-width, 800px)}atomic-search-layout atomic-layout-section[section='search'] atomic-search-box::part(suggestions-left){flex-basis:var(--atomic-layout-search-box-left-suggestions-width, 30%)}atomic-search-layout atomic-layout-section[section='search'] atomic-search-box::part(suggestions-right){flex-basis:calc(100% - var(--atomic-layout-search-box-left-suggestions-width, 30%))}atomic-search-layout atomic-layout-section[section='facets']{display:none}atomic-search-layout atomic-layout-section[section='facets'] *{margin-bottom:var(--atomic-layout-spacing-y)}atomic-search-layout atomic-layout-section[section='main']{margin-bottom:var(--atomic-layout-spacing-y)}atomic-search-layout atomic-layout-section[section='horizontal-facets']{display:flex;flex-wrap:wrap;margin-bottom:var(--atomic-layout-spacing-y);row-gap:0.5rem}atomic-search-layout atomic-layout-section[section='horizontal-facets']>*{max-width:100%}atomic-search-layout atomic-layout-section[section='horizontal-facets']>atomic-segmented-facet,atomic-search-layout atomic-layout-section[section='horizontal-facets']>atomic-popover{margin-right:0.5rem}atomic-search-layout atomic-layout-section[section='horizontal-facets']>atomic-popover{display:none}atomic-search-layout atomic-layout-section[section='status']{display:grid;justify-content:space-between;grid-template-areas:'atomic-breadbox       atomic-breadbox'\n      'atomic-query-summary  atomic-sort'\n      'atomic-did-you-mean   atomic-did-you-mean'\n      'atomic-notifications  atomic-notifications'}atomic-search-layout atomic-layout-section[section='status']>*{margin-bottom:var(--atomic-layout-spacing-y)}atomic-search-layout atomic-layout-section[section='status'] atomic-breadbox{grid-area:atomic-breadbox}atomic-search-layout atomic-layout-section[section='status'] atomic-query-summary{grid-area:atomic-query-summary;align-self:center;overflow:hidden}atomic-search-layout atomic-layout-section[section='status'] atomic-sort-dropdown{grid-area:atomic-sort;justify-self:end}atomic-search-layout atomic-layout-section[section='status'] atomic-refine-toggle{grid-area:atomic-sort}atomic-search-layout atomic-layout-section[section='status'] atomic-did-you-mean{grid-area:atomic-did-you-mean}atomic-search-layout atomic-layout-section[section='status'] atomic-notifications{grid-area:atomic-notifications}atomic-search-layout atomic-layout-section[section='results'] atomic-smart-snippet{margin-bottom:1.5rem}atomic-search-layout atomic-layout-section[section='results'] atomic-smart-snippet-suggestions{margin-bottom:1.5rem}atomic-search-layout atomic-layout-section[section='pagination']{display:flex;flex-direction:column;justify-content:space-between;align-items:center}atomic-search-layout atomic-layout-section[section='pagination'] atomic-load-more-results{width:100%}atomic-search-layout atomic-layout-section[section='pagination']:has(:only-child){justify-content:center}atomic-search-layout atomic-layout-section[section='pagination']>*{margin-top:var(--atomic-layout-spacing-y)}@media only screen and (min-width: 50rem){atomic-search-layout atomic-layout-section[section='pagination']{flex-direction:row}}";
-const AtomicSearchLayoutStyle0 = atomicSearchLayoutCss;
-
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const AtomicSearchLayout = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        /**
-         * CSS value that defines where the layout goes from mobile to desktop.
-         * e.g., 800px, 65rem.
-         */
-        this.mobileBreakpoint = DEFAULT_MOBILE_BREAKPOINT;
-        this.mobileBreakpoint = DEFAULT_MOBILE_BREAKPOINT;
-    }
-    componentDidLoad() {
-        const id = this.host.id || randomID('atomic-search-layout-');
-        this.host.id = id;
-        const styleTag = this.bindings.createStyleElement();
-        styleTag.innerHTML = buildSearchLayout(this.host, this.mobileBreakpoint);
-        this.host.appendChild(styleTag);
-    }
-    get host() { return getElement(this); }
-};
-__decorate([
-    InitializeBindings()
-], AtomicSearchLayout.prototype, "bindings", void 0);
-AtomicSearchLayout.style = AtomicSearchLayoutStyle0;
-
-export { AtomicSearchLayout as atomic_search_layout };
-
-//# sourceMappingURL=atomic-search-layout.entry.js.map

package/dist/esm/atomic-search-layout.entry.js.map

@@ -1 +0,0 @@
-{"file":"atomic-search-layout.entry.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,qBAAqB,GAAG,mkIAAmkI,CAAC;AAClmI,iCAAe,qBAAqB;;;;;;;;;;;;MCiBvB,kBAAkB;;;;;;;QAQC,qBAAgB,GAAG,yBAAyB,CAAC;gCAA1B,yBAAyB;;IAGnE,gBAAgB;QACrB,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,QAAQ,CAAC,uBAAuB,CAAC,CAAC;QAC7D,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QAClB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,kBAAkB,EAAE,CAAC;QACpD,QAAQ,CAAC,SAAS,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACzE,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;KACjC;;;AAR4B;IAA5B,kBAAkB,EAAE;oDAA4B;;;;;","names":[],"sources":["src/components/search/atomic-layout/atomic-search-layout.pcss?tag=atomic-search-layout","src/components/search/atomic-layout/atomic-search-layout.tsx"],"sourcesContent":[".atomic-modal-opened {\n  overflow-y: hidden;\n}\n\natomic-layout-section[section='search'] {\n  grid-area: atomic-section-search;\n}\n\natomic-layout-section[section='facets'] {\n  grid-area: atomic-section-facets;\n}\n\natomic-layout-section[section='main'] {\n  grid-area: atomic-section-main;\n}\n\natomic-layout-section[section='status'] {\n  grid-area: atomic-section-status;\n}\n\natomic-layout-section[section='pagination'] {\n  grid-area: atomic-section-pagination;\n}\n\n/**\n * @prop --atomic-layout-max-search-box-input-width: The maximum width that the search box input will take.\n * @prop --atomic-layout-max-search-box-double-suggestions-width: The maximum width that the search box suggestions will take when displaying a double list.\n * @prop --atomic-layout-search-box-left-suggestions-width: When displaying a double list, the width of the left list.\n */\natomic-search-layout {\n  width: 100%;\n  height: 100%;\n  display: none;\n  grid-template-areas:\n    '. atomic-section-search .'\n    '. atomic-section-main .';\n  grid-template-columns: var(--atomic-layout-spacing-x) minmax(0, 1fr) var(--atomic-layout-spacing-x);\n\n  atomic-layout-section[section='search'] {\n    margin: var(--atomic-layout-spacing-y) 0;\n    max-width: var(--atomic-layout-max-search-box-input-width, 678px);\n    width: 100%;\n    justify-self: center;\n\n    /* Only affects desktop */\n    atomic-search-box {\n      &::part(suggestions-double-list) {\n        width: 125%;\n        max-width: var(--atomic-layout-max-search-box-double-suggestions-width, 800px);\n      }\n\n      &::part(suggestions-left) {\n        flex-basis: var(--atomic-layout-search-box-left-suggestions-width, 30%);\n      }\n\n      &::part(suggestions-right) {\n        flex-basis: calc(100% - var(--atomic-layout-search-box-left-suggestions-width, 30%));\n      }\n    }\n  }\n\n  atomic-layout-section[section='facets'] {\n    display: none;\n\n    & * {\n      margin-bottom: var(--atomic-layout-spacing-y);\n    }\n  }\n\n  atomic-layout-section[section='main'] {\n    margin-bottom: var(--atomic-layout-spacing-y);\n  }\n\n  atomic-layout-section[section='horizontal-facets'] {\n    display: flex;\n    flex-wrap: wrap;\n    margin-bottom: var(--atomic-layout-spacing-y);\n    row-gap: 0.5rem;\n\n    & > * {\n      max-width: 100%;\n    }\n\n    & > atomic-segmented-facet,\n    & > atomic-popover {\n      margin-right: 0.5rem;\n    }\n\n    & > atomic-popover {\n      display: none;\n    }\n  }\n\n  atomic-layout-section[section='status'] {\n    display: grid;\n    justify-content: space-between;\n    grid-template-areas:\n      'atomic-breadbox       atomic-breadbox'\n      'atomic-query-summary  atomic-sort'\n      'atomic-did-you-mean   atomic-did-you-mean'\n      'atomic-notifications  atomic-notifications';\n\n    & > * {\n      margin-bottom: var(--atomic-layout-spacing-y);\n    }\n\n    atomic-breadbox {\n      grid-area: atomic-breadbox;\n    }\n\n    atomic-query-summary {\n      grid-area: atomic-query-summary;\n      align-self: center;\n      overflow: hidden;\n    }\n\n    atomic-sort-dropdown {\n      grid-area: atomic-sort;\n      justify-self: end;\n    }\n\n    atomic-refine-toggle {\n      grid-area: atomic-sort;\n    }\n\n    atomic-did-you-mean {\n      grid-area: atomic-did-you-mean;\n    }\n\n    atomic-notifications {\n      grid-area: atomic-notifications;\n    }\n  }\n\n  atomic-layout-section[section='results'] {\n    atomic-smart-snippet {\n      margin-bottom: 1.5rem;\n    }\n\n    atomic-smart-snippet-suggestions {\n      margin-bottom: 1.5rem;\n    }\n  }\n\n  atomic-layout-section[section='pagination'] {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\n\n    atomic-load-more-results {\n      width: 100%;\n    }\n\n    &:has(:only-child) {\n      justify-content: center;\n    }\n\n    & > * {\n      margin-top: var(--atomic-layout-spacing-y);\n    }\n\n    /* Approx. width of pager & results per page */\n    @media only screen and (min-width: 50rem) {\n      flex-direction: row;\n    }\n  }\n}\n","import {Component, Element, Prop} from '@stencil/core';\nimport {\n  InitializableComponent,\n  InitializeBindings,\n} from '../../../utils/initialization-utils';\nimport {DEFAULT_MOBILE_BREAKPOINT} from '../../../utils/replace-breakpoint';\nimport {randomID} from '../../../utils/utils';\nimport {Bindings} from '../atomic-search-interface/atomic-search-interface';\nimport {buildSearchLayout} from './search-layout';\n\n/**\n * The `atomic-search-layout` helps organize elements in the page.\n */\n@Component({\n  tag: 'atomic-search-layout',\n  styleUrl: 'atomic-search-layout.pcss',\n  shadow: false,\n})\nexport class AtomicSearchLayout implements InitializableComponent<Bindings> {\n  public error!: Error;\n\n  @Element() private host!: HTMLElement;\n  /**\n   * CSS value that defines where the layout goes from mobile to desktop.\n   * e.g., 800px, 65rem.\n   */\n  @Prop({reflect: true}) public mobileBreakpoint = DEFAULT_MOBILE_BREAKPOINT;\n  @InitializeBindings() public bindings!: Bindings;\n\n  public componentDidLoad() {\n    const id = this.host.id || randomID('atomic-search-layout-');\n    this.host.id = id;\n    const styleTag = this.bindings.createStyleElement();\n    styleTag.innerHTML = buildSearchLayout(this.host, this.mobileBreakpoint);\n    this.host.appendChild(styleTag);\n  }\n}\n"],"version":3}

package/dist/esm/search-layout-fdd7a917.js

@@ -1,100 +0,0 @@
-import { s as sectionSelector, f as findSection } from './sections-ae00b53a.js';
-
-function makeDesktopQuery$1(mobileBreakpoint) {
-    return `only screen and (min-width: ${mobileBreakpoint})`;
-}
-function buildCommonLayout(element, mobileBreakpoint, layoutWebComponentTagName, containerWebComponentTagName, noItemsSelector, errorSelector, refineToggleSelector, sortDropdownSelector) {
-    const id = element.id;
-    const layoutSelector = `${layoutWebComponentTagName}#${id}`;
-    const cleanStatusSelector = `${containerWebComponentTagName}:not(.${noItemsSelector}, .${errorSelector})`;
-    const mediaQuerySelector = `@media ${makeDesktopQuery$1(mobileBreakpoint)}`;
-    const display = `${layoutSelector} { display: grid }`;
-    const search = `${mediaQuerySelector} {
-    ${layoutSelector} ${sectionSelector('search')} {
-      justify-self: start;
-      width: 80%;
-    }
-  }`;
-    const facets = () => {
-        const facetsSection = findSection(element, 'facets');
-        const mainSection = findSection(element, 'main');
-        if (!facetsSection || !mainSection) {
-            return '';
-        }
-        const facetsMin = facetsSection.minWidth || '17rem';
-        const facetsMax = facetsSection.maxWidth || '22rem';
-        const mainMin = mainSection.minWidth || '50%';
-        const mainMax = mainSection.maxWidth || '70rem';
-        return `${mediaQuerySelector} {
-      ${layoutSelector} {
-        grid-template-areas:
-        '. .                     atomic-section-search .'
-        '. atomic-section-main   atomic-section-main   .';
-        grid-template-columns:
-          1fr minmax(${facetsMin}, ${facetsMax}) minmax(${mainMin}, ${mainMax}) 1fr;
-        column-gap: var(--atomic-layout-spacing-x);
-      }
-
-      ${cleanStatusSelector} ${layoutSelector} {
-        grid-template-areas:
-          '. .                     atomic-section-search .'
-          '. atomic-section-facets atomic-section-main   .'
-          '. atomic-section-facets .                     .';
-      }
-
-      ${cleanStatusSelector} ${layoutSelector} ${sectionSelector('facets')} {
-        display: block;
-      }
-    }`;
-    };
-    const refine = () => {
-        const statusSection = findSection(element, 'status');
-        if (!statusSection) {
-            return '';
-        }
-        const refineToggle = statusSection.querySelector(refineToggleSelector);
-        if (!refineToggle) {
-            return '';
-        }
-        const statusSelector = `${layoutSelector} ${sectionSelector('status')}`;
-        return `${statusSelector} ${sortDropdownSelector} {
-      display: none;
-    }
-
-    ${mediaQuerySelector} {
-     ${statusSelector} ${sortDropdownSelector} {
-       display: block;
-      }
-
-      ${statusSelector} ${refineToggleSelector} {
-        display: none;
-       }
-    }`;
-    };
-    const horizontalFacets = () => {
-        return `${mediaQuerySelector} {
-      ${layoutSelector} ${sectionSelector('horizontal-facets')} > atomic-popover:not(.atomic-hidden) {
-        display: block;
-      }
-    }`;
-    };
-    return [display, search, facets(), refine(), horizontalFacets()]
-        .filter((declaration) => declaration !== '')
-        .join('\n\n');
-}
-
-const layoutWebComponentTagName = 'atomic-search-layout';
-const containerWebComponentTagName = 'atomic-search-interface';
-const noResultsSelector = `${containerWebComponentTagName}-no-results`;
-const errorSelector = `${containerWebComponentTagName}-error`;
-const firstSearchExecutedSelector = `${containerWebComponentTagName}-search-executed`;
-function makeDesktopQuery(mobileBreakpoint) {
-    return `only screen and (min-width: ${mobileBreakpoint})`;
-}
-function buildSearchLayout(element, mobileBreakpoint) {
-    return buildCommonLayout(element, mobileBreakpoint, layoutWebComponentTagName, containerWebComponentTagName, noResultsSelector, errorSelector, 'atomic-refine-toggle', 'atomic-sort-dropdown');
-}
-
-export { buildSearchLayout as b, errorSelector as e, firstSearchExecutedSelector as f, makeDesktopQuery as m, noResultsSelector as n };
-
-//# sourceMappingURL=search-layout-fdd7a917.js.map

package/dist/esm/search-layout-fdd7a917.js.map

@@ -1 +0,0 @@
-{"file":"search-layout-fdd7a917.js","mappings":"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","names":["makeDesktopQuery"],"sources":["src/components/common/atomic-layout-section/layout.ts","src/components/search/atomic-layout/search-layout.ts"],"sourcesContent":["import {findSection, sectionSelector} from './sections';\n\nexport function makeDesktopQuery(mobileBreakpoint: string) {\n  return `only screen and (min-width: ${mobileBreakpoint})`;\n}\nexport function buildCommonLayout(\n  element: HTMLElement,\n  mobileBreakpoint: string,\n  layoutWebComponentTagName: string,\n  containerWebComponentTagName: string,\n  noItemsSelector: string,\n  errorSelector: string,\n  refineToggleSelector: string,\n  sortDropdownSelector: string\n) {\n  const id = element.id;\n  const layoutSelector = `${layoutWebComponentTagName}#${id}`;\n  const cleanStatusSelector = `${containerWebComponentTagName}:not(.${noItemsSelector}, .${errorSelector})`;\n  const mediaQuerySelector = `@media ${makeDesktopQuery(mobileBreakpoint)}`;\n\n  const display = `${layoutSelector} { display: grid }`;\n  const search = `${mediaQuerySelector} {\n    ${layoutSelector} ${sectionSelector('search')} {\n      justify-self: start;\n      width: 80%;\n    }\n  }`;\n\n  const facets = () => {\n    const facetsSection = findSection(element, 'facets');\n    const mainSection = findSection(element, 'main');\n    if (!facetsSection || !mainSection) {\n      return '';\n    }\n\n    const facetsMin = facetsSection.minWidth || '17rem';\n    const facetsMax = facetsSection.maxWidth || '22rem';\n    const mainMin = mainSection.minWidth || '50%';\n    const mainMax = mainSection.maxWidth || '70rem';\n\n    return `${mediaQuerySelector} {\n      ${layoutSelector} {\n        grid-template-areas:\n        '. .                     atomic-section-search .'\n        '. atomic-section-main   atomic-section-main   .';\n        grid-template-columns:\n          1fr minmax(${facetsMin}, ${facetsMax}) minmax(${mainMin}, ${mainMax}) 1fr;\n        column-gap: var(--atomic-layout-spacing-x);\n      }\n\n      ${cleanStatusSelector} ${layoutSelector} {\n        grid-template-areas:\n          '. .                     atomic-section-search .'\n          '. atomic-section-facets atomic-section-main   .'\n          '. atomic-section-facets .                     .';\n      }\n\n      ${cleanStatusSelector} ${layoutSelector} ${sectionSelector('facets')} {\n        display: block;\n      }\n    }`;\n  };\n\n  const refine = (): string => {\n    const statusSection = findSection(element, 'status');\n    if (!statusSection) {\n      return '';\n    }\n\n    const refineToggle = statusSection.querySelector(refineToggleSelector);\n    if (!refineToggle) {\n      return '';\n    }\n\n    const statusSelector = `${layoutSelector} ${sectionSelector('status')}`;\n    return `${statusSelector} ${sortDropdownSelector} {\n      display: none;\n    }\n\n    ${mediaQuerySelector} {\n     ${statusSelector} ${sortDropdownSelector} {\n       display: block;\n      }\n\n      ${statusSelector} ${refineToggleSelector} {\n        display: none;\n       }\n    }`;\n  };\n\n  const horizontalFacets = () => {\n    return `${mediaQuerySelector} {\n      ${layoutSelector} ${sectionSelector(\n        'horizontal-facets'\n      )} > atomic-popover:not(.atomic-hidden) {\n        display: block;\n      }\n    }`;\n  };\n\n  return [display, search, facets(), refine(), horizontalFacets()]\n    .filter((declaration) => declaration !== '')\n    .join('\\n\\n');\n}\n","import {buildCommonLayout} from '../../common/atomic-layout-section/layout';\n\nexport const layoutWebComponentTagName = 'atomic-search-layout';\nexport const containerWebComponentTagName = 'atomic-search-interface';\nexport const noResultsSelector = `${containerWebComponentTagName}-no-results`;\nexport const errorSelector = `${containerWebComponentTagName}-error`;\nexport const firstSearchExecutedSelector = `${containerWebComponentTagName}-search-executed`;\n\nexport function makeDesktopQuery(mobileBreakpoint: string) {\n  return `only screen and (min-width: ${mobileBreakpoint})`;\n}\nexport function buildSearchLayout(\n  element: HTMLElement,\n  mobileBreakpoint: string\n) {\n  return buildCommonLayout(\n    element,\n    mobileBreakpoint,\n    layoutWebComponentTagName,\n    containerWebComponentTagName,\n    noResultsSelector,\n    errorSelector,\n    'atomic-refine-toggle',\n    'atomic-sort-dropdown'\n  );\n}\n"],"version":3}

package/dist/types/components/search/atomic-layout/atomic-search-layout.d.ts

@@ -1,16 +0,0 @@
-import { InitializableComponent } from '../../../utils/initialization-utils';
-import { Bindings } from '../atomic-search-interface/atomic-search-interface';
-/**
- * The `atomic-search-layout` helps organize elements in the page.
- */
-export declare class AtomicSearchLayout implements InitializableComponent<Bindings> {
-    error: Error;
-    private host;
-    /**
-     * CSS value that defines where the layout goes from mobile to desktop.
-     * e.g., 800px, 65rem.
-     */
-    mobileBreakpoint: string;
-    bindings: Bindings;
-    componentDidLoad(): void;
-}