@internetarchive/collection-browser 2.7.12 → 2.7.13-alpha2

package/dist/src/collection-facets/toggle-switch.d.ts

@@ -1,41 +1,41 @@
-import { LitElement, CSSResultGroup } from 'lit';
-export declare type Side = 'left' | 'right';
-export declare class ToggleSwitch extends LitElement {
-    /**
-     * The value this switch should have when toggled to the left.
-     */
-    leftValue: string;
-    /**
-     * The human-readable label to display on the left side of this switch.
-     * If none is provided, `leftValue` is used.
-     */
-    leftLabel?: string;
-    /**
-     * The value this switch should have when toggled to the right.
-     */
-    rightValue: string;
-    /**
-     * The human-readable label to display on the right side of this switch.
-     * If none is provided, `rightValue` is used.
-     */
-    rightLabel?: string;
-    /**
-     * Which side of the switch is selected (`'left'` or `'right'`).
-     */
-    side: Side;
-    private leftRadio;
-    render(): import("lit-html").TemplateResult<1>;
-    /**
-     * The currently selected value of this switch.
-     */
-    get value(): string;
-    /**
-     * The label for the currently selected value of this switch.
-     * Falls back to the current value if its label is not defined.
-     */
-    get selectedLabel(): string;
-    private handleClick;
-    private handleRadioChange;
-    private emitChangeEvent;
-    static get styles(): CSSResultGroup;
-}
+import { LitElement, CSSResultGroup } from 'lit';
+export type Side = 'left' | 'right';
+export declare class ToggleSwitch extends LitElement {
+    /**
+     * The value this switch should have when toggled to the left.
+     */
+    leftValue: string;
+    /**
+     * The human-readable label to display on the left side of this switch.
+     * If none is provided, `leftValue` is used.
+     */
+    leftLabel?: string;
+    /**
+     * The value this switch should have when toggled to the right.
+     */
+    rightValue: string;
+    /**
+     * The human-readable label to display on the right side of this switch.
+     * If none is provided, `rightValue` is used.
+     */
+    rightLabel?: string;
+    /**
+     * Which side of the switch is selected (`'left'` or `'right'`).
+     */
+    side: Side;
+    private leftRadio;
+    render(): import("lit").TemplateResult<1>;
+    /**
+     * The currently selected value of this switch.
+     */
+    get value(): string;
+    /**
+     * The label for the currently selected value of this switch.
+     * Falls back to the current value if its label is not defined.
+     */
+    get selectedLabel(): string;
+    private handleClick;
+    private handleRadioChange;
+    private emitChangeEvent;
+    static get styles(): CSSResultGroup;
+}

package/dist/src/collection-facets/toggle-switch.js

@@ -1,25 +1,25 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { srOnlyStyle } from '../styles/sr-only';
-let ToggleSwitch = class ToggleSwitch extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The value this switch should have when toggled to the left.
-         */
-        this.leftValue = '';
-        /**
-         * The value this switch should have when toggled to the right.
-         */
-        this.rightValue = '';
-        /**
-         * Which side of the switch is selected (`'left'` or `'right'`).
-         */
-        this.side = 'left';
-    }
-    render() {
-        var _a, _b;
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { srOnlyStyle } from '../styles/sr-only';
+let ToggleSwitch = class ToggleSwitch extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The value this switch should have when toggled to the left.
+         */
+        this.leftValue = '';
+        /**
+         * The value this switch should have when toggled to the right.
+         */
+        this.rightValue = '';
+        /**
+         * Which side of the switch is selected (`'left'` or `'right'`).
+         */
+        this.side = 'left';
+    }
+    render() {
+        var _a, _b;
         return html `
       <div id="container">
         <label for="switch-left">${(_a = this.leftLabel) !== null && _a !== void 0 ? _a : this.leftValue}</label>
@@ -51,52 +51,52 @@ let ToggleSwitch = class ToggleSwitch extends LitElement {
         </button>
         <label for="switch-right">${(_b = this.rightLabel) !== null && _b !== void 0 ? _b : this.rightValue}</label>
       </div>
-    `;
-    }
-    /**
-     * The currently selected value of this switch.
-     */
-    get value() {
-        return this.side === 'left' ? this.leftValue : this.rightValue;
-    }
-    /**
-     * The label for the currently selected value of this switch.
-     * Falls back to the current value if its label is not defined.
-     */
-    get selectedLabel() {
-        var _a, _b;
-        return this.side === 'left'
-            ? (_a = this.leftLabel) !== null && _a !== void 0 ? _a : this.leftValue
-            : (_b = this.rightLabel) !== null && _b !== void 0 ? _b : this.rightValue;
-    }
-    handleClick() {
-        this.side = this.side === 'left' ? 'right' : 'left';
-        this.emitChangeEvent();
-    }
-    handleRadioChange() {
-        this.side = this.leftRadio.checked ? 'left' : 'right';
-        this.emitChangeEvent();
-    }
-    emitChangeEvent() {
-        const event = new CustomEvent('change', {
-            detail: this.value,
-        });
-        this.dispatchEvent(event);
-    }
-    static get styles() {
-        const switchWidth = css `var(--switchWidth, 30px)`;
-        const switchHeight = css `var(--switchHeight, 14px)`;
-        const switchMarginLeft = css `var(--switchMarginLeft, 5px)`;
-        const switchMarginRight = css `var(--switchMarginRight, 5px)`;
-        const switchBorderWidth = css `var(--switchBorderWidth, 3px)`;
-        const switchBgColor = css `var(--switchBgColor, #194880)`;
-        const switchBorderColor = css `var(--switchBorderColor, #194880)`;
-        const labelFontSize = css `var(--labelFontSize, 1.3rem)`;
-        const knobColor = css `var(--knobColor, white)`;
-        const knobTransitionDuration = css `var(--knobTransitionDuration, 0.25s)`;
-        const knobTransitionFn = css `var(--knobTransitionFn, ease)`;
-        return [
-            srOnlyStyle,
+    `;
+    }
+    /**
+     * The currently selected value of this switch.
+     */
+    get value() {
+        return this.side === 'left' ? this.leftValue : this.rightValue;
+    }
+    /**
+     * The label for the currently selected value of this switch.
+     * Falls back to the current value if its label is not defined.
+     */
+    get selectedLabel() {
+        var _a, _b;
+        return this.side === 'left'
+            ? ((_a = this.leftLabel) !== null && _a !== void 0 ? _a : this.leftValue)
+            : ((_b = this.rightLabel) !== null && _b !== void 0 ? _b : this.rightValue);
+    }
+    handleClick() {
+        this.side = this.side === 'left' ? 'right' : 'left';
+        this.emitChangeEvent();
+    }
+    handleRadioChange() {
+        this.side = this.leftRadio.checked ? 'left' : 'right';
+        this.emitChangeEvent();
+    }
+    emitChangeEvent() {
+        const event = new CustomEvent('change', {
+            detail: this.value,
+        });
+        this.dispatchEvent(event);
+    }
+    static get styles() {
+        const switchWidth = css `var(--switchWidth, 30px)`;
+        const switchHeight = css `var(--switchHeight, 14px)`;
+        const switchMarginLeft = css `var(--switchMarginLeft, 5px)`;
+        const switchMarginRight = css `var(--switchMarginRight, 5px)`;
+        const switchBorderWidth = css `var(--switchBorderWidth, 3px)`;
+        const switchBgColor = css `var(--switchBgColor, #194880)`;
+        const switchBorderColor = css `var(--switchBorderColor, #194880)`;
+        const labelFontSize = css `var(--labelFontSize, 1.3rem)`;
+        const knobColor = css `var(--knobColor, white)`;
+        const knobTransitionDuration = css `var(--knobTransitionDuration, 0.25s)`;
+        const knobTransitionFn = css `var(--knobTransitionFn, ease)`;
+        return [
+            srOnlyStyle,
             css `
         #container {
           display: inline-flex;
@@ -145,30 +145,30 @@ let ToggleSwitch = class ToggleSwitch extends LitElement {
             transition-duration: 0.001s !important; /* Imperceptibly fast */
           }
         }
-      `,
-        ];
-    }
-};
-__decorate([
-    property({ type: String, attribute: true })
-], ToggleSwitch.prototype, "leftValue", void 0);
-__decorate([
-    property({ type: String, attribute: true })
-], ToggleSwitch.prototype, "leftLabel", void 0);
-__decorate([
-    property({ type: String, attribute: true })
-], ToggleSwitch.prototype, "rightValue", void 0);
-__decorate([
-    property({ type: String, attribute: true })
-], ToggleSwitch.prototype, "rightLabel", void 0);
-__decorate([
-    property({ type: String, attribute: true })
-], ToggleSwitch.prototype, "side", void 0);
-__decorate([
-    query('#switch-left')
-], ToggleSwitch.prototype, "leftRadio", void 0);
-ToggleSwitch = __decorate([
-    customElement('toggle-switch')
-], ToggleSwitch);
-export { ToggleSwitch };
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: String, attribute: true })
+], ToggleSwitch.prototype, "leftValue", void 0);
+__decorate([
+    property({ type: String, attribute: true })
+], ToggleSwitch.prototype, "leftLabel", void 0);
+__decorate([
+    property({ type: String, attribute: true })
+], ToggleSwitch.prototype, "rightValue", void 0);
+__decorate([
+    property({ type: String, attribute: true })
+], ToggleSwitch.prototype, "rightLabel", void 0);
+__decorate([
+    property({ type: String, attribute: true })
+], ToggleSwitch.prototype, "side", void 0);
+__decorate([
+    query('#switch-left')
+], ToggleSwitch.prototype, "leftRadio", void 0);
+ToggleSwitch = __decorate([
+    customElement('toggle-switch')
+], ToggleSwitch);
+export { ToggleSwitch };
 //# sourceMappingURL=toggle-switch.js.map

package/dist/src/collection-facets/toggle-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-switch.js","sourceRoot":"","sources":["../../../src/collection-facets/toggle-switch.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, CSSResultGroup } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { srOnlyStyle } from '../styles/sr-only';\n\nexport type Side = 'left' | 'right';\n\n@customElement('toggle-switch')\nexport class ToggleSwitch extends LitElement {\n  /**\n   * The value this switch should have when toggled to the left.\n   */\n  @property({ type: String, attribute: true }) leftValue: string = '';\n\n  /**\n   * The human-readable label to display on the left side of this switch.\n   * If none is provided, `leftValue` is used.\n   */\n  @property({ type: String, attribute: true }) leftLabel?: string;\n\n  /**\n   * The value this switch should have when toggled to the right.\n   */\n  @property({ type: String, attribute: true }) rightValue: string = '';\n\n  /**\n   * The human-readable label to display on the right side of this switch.\n   * If none is provided, `rightValue` is used.\n   */\n  @property({ type: String, attribute: true }) rightLabel?: string;\n\n  /**\n   * Which side of the switch is selected (`'left'` or `'right'`).\n   */\n  @property({ type: String, attribute: true }) side: Side = 'left';\n\n  @query('#switch-left')\n  private leftRadio!: HTMLInputElement;\n\n  render() {\n    return html`\n      <div id=\"container\">\n        <label for=\"switch-left\">${this.leftLabel ?? this.leftValue}</label>\n        <input\n          type=\"radio\"\n          id=\"switch-left\"\n          class=\"sr-only\"\n          name=\"switch\"\n          .value=${this.leftValue}\n          .checked=${this.side === 'left'}\n          @change=${this.handleRadioChange}\n        />\n        <input\n          type=\"radio\"\n          id=\"switch-right\"\n          class=\"sr-only\"\n          name=\"switch\"\n          .value=${this.rightValue}\n          .checked=${this.side === 'right'}\n          @change=${this.handleRadioChange}\n        />\n        <button\n          id=\"switch-button\"\n          class=${this.side}\n          aria-hidden=\"true\"\n          @click=${this.handleClick}\n        >\n          <div id=\"knob\"></div>\n        </button>\n        <label for=\"switch-right\">${this.rightLabel ?? this.rightValue}</label>\n      </div>\n    `;\n  }\n\n  /**\n   * The currently selected value of this switch.\n   */\n  get value(): string {\n    return this.side === 'left' ? this.leftValue : this.rightValue;\n  }\n\n  /**\n   * The label for the currently selected value of this switch.\n   * Falls back to the current value if its label is not defined.\n   */\n  get selectedLabel(): string {\n    return this.side === 'left'\n      ? this.leftLabel ?? this.leftValue\n      : this.rightLabel ?? this.rightValue;\n  }\n\n  private handleClick(): void {\n    this.side = this.side === 'left' ? 'right' : 'left';\n    this.emitChangeEvent();\n  }\n\n  private handleRadioChange(): void {\n    this.side = this.leftRadio.checked ? 'left' : 'right';\n    this.emitChangeEvent();\n  }\n\n  private emitChangeEvent(): void {\n    const event = new CustomEvent<string>('change', {\n      detail: this.value,\n    });\n    this.dispatchEvent(event);\n  }\n\n  static get styles(): CSSResultGroup {\n    const switchWidth = css`var(--switchWidth, 30px)`;\n    const switchHeight = css`var(--switchHeight, 14px)`;\n    const switchMarginLeft = css`var(--switchMarginLeft, 5px)`;\n    const switchMarginRight = css`var(--switchMarginRight, 5px)`;\n    const switchBorderWidth = css`var(--switchBorderWidth, 3px)`;\n    const switchBgColor = css`var(--switchBgColor, #194880)`;\n    const switchBorderColor = css`var(--switchBorderColor, #194880)`;\n    const labelFontSize = css`var(--labelFontSize, 1.3rem)`;\n    const knobColor = css`var(--knobColor, white)`;\n    const knobTransitionDuration = css`var(--knobTransitionDuration, 0.25s)`;\n    const knobTransitionFn = css`var(--knobTransitionFn, ease)`;\n\n    return [\n      srOnlyStyle,\n      css`\n        #container {\n          display: inline-flex;\n          align-items: center;\n          flex-wrap: nowrap;\n          font-size: ${labelFontSize};\n        }\n\n        #switch-button {\n          width: ${switchWidth};\n          height: ${switchHeight};\n          margin: 0 ${switchMarginRight} 0 ${switchMarginLeft};\n          padding: 0;\n          border: ${switchBorderWidth} solid ${switchBorderColor};\n          border-radius: ${switchHeight};\n          box-sizing: content-box;\n          background: ${switchBgColor};\n          appearance: none;\n          cursor: pointer;\n        }\n\n        #switch-button.left #knob {\n          transform: translateX(0);\n        }\n\n        #switch-button.right #knob {\n          transform: translateX(calc(${switchWidth} - ${switchHeight}));\n        }\n\n        #switch-button:focus-visible {\n          outline: 2px solid black;\n          outline-offset: 2px;\n        }\n\n        #knob {\n          display: block;\n          width: ${switchHeight};\n          height: ${switchHeight};\n          border-radius: 50%;\n          background: ${knobColor};\n          transition: transform ${knobTransitionDuration} ${knobTransitionFn};\n        }\n\n        @media (prefers-reduced-motion: reduce) {\n          #knob {\n            transition-duration: 0.001s !important; /* Imperceptibly fast */\n          }\n        }\n      `,\n    ];\n  }\n}\n"]}
+{"version":3,"file":"toggle-switch.js","sourceRoot":"","sources":["../../../src/collection-facets/toggle-switch.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, CSSResultGroup } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { srOnlyStyle } from '../styles/sr-only';\n\nexport type Side = 'left' | 'right';\n\n@customElement('toggle-switch')\nexport class ToggleSwitch extends LitElement {\n  /**\n   * The value this switch should have when toggled to the left.\n   */\n  @property({ type: String, attribute: true }) leftValue: string = '';\n\n  /**\n   * The human-readable label to display on the left side of this switch.\n   * If none is provided, `leftValue` is used.\n   */\n  @property({ type: String, attribute: true }) leftLabel?: string;\n\n  /**\n   * The value this switch should have when toggled to the right.\n   */\n  @property({ type: String, attribute: true }) rightValue: string = '';\n\n  /**\n   * The human-readable label to display on the right side of this switch.\n   * If none is provided, `rightValue` is used.\n   */\n  @property({ type: String, attribute: true }) rightLabel?: string;\n\n  /**\n   * Which side of the switch is selected (`'left'` or `'right'`).\n   */\n  @property({ type: String, attribute: true }) side: Side = 'left';\n\n  @query('#switch-left')\n  private leftRadio!: HTMLInputElement;\n\n  render() {\n    return html`\n      <div id=\"container\">\n        <label for=\"switch-left\">${this.leftLabel ?? this.leftValue}</label>\n        <input\n          type=\"radio\"\n          id=\"switch-left\"\n          class=\"sr-only\"\n          name=\"switch\"\n          .value=${this.leftValue}\n          .checked=${this.side === 'left'}\n          @change=${this.handleRadioChange}\n        />\n        <input\n          type=\"radio\"\n          id=\"switch-right\"\n          class=\"sr-only\"\n          name=\"switch\"\n          .value=${this.rightValue}\n          .checked=${this.side === 'right'}\n          @change=${this.handleRadioChange}\n        />\n        <button\n          id=\"switch-button\"\n          class=${this.side}\n          aria-hidden=\"true\"\n          @click=${this.handleClick}\n        >\n          <div id=\"knob\"></div>\n        </button>\n        <label for=\"switch-right\">${this.rightLabel ?? this.rightValue}</label>\n      </div>\n    `;\n  }\n\n  /**\n   * The currently selected value of this switch.\n   */\n  get value(): string {\n    return this.side === 'left' ? this.leftValue : this.rightValue;\n  }\n\n  /**\n   * The label for the currently selected value of this switch.\n   * Falls back to the current value if its label is not defined.\n   */\n  get selectedLabel(): string {\n    return this.side === 'left'\n      ? (this.leftLabel ?? this.leftValue)\n      : (this.rightLabel ?? this.rightValue);\n  }\n\n  private handleClick(): void {\n    this.side = this.side === 'left' ? 'right' : 'left';\n    this.emitChangeEvent();\n  }\n\n  private handleRadioChange(): void {\n    this.side = this.leftRadio.checked ? 'left' : 'right';\n    this.emitChangeEvent();\n  }\n\n  private emitChangeEvent(): void {\n    const event = new CustomEvent<string>('change', {\n      detail: this.value,\n    });\n    this.dispatchEvent(event);\n  }\n\n  static get styles(): CSSResultGroup {\n    const switchWidth = css`var(--switchWidth, 30px)`;\n    const switchHeight = css`var(--switchHeight, 14px)`;\n    const switchMarginLeft = css`var(--switchMarginLeft, 5px)`;\n    const switchMarginRight = css`var(--switchMarginRight, 5px)`;\n    const switchBorderWidth = css`var(--switchBorderWidth, 3px)`;\n    const switchBgColor = css`var(--switchBgColor, #194880)`;\n    const switchBorderColor = css`var(--switchBorderColor, #194880)`;\n    const labelFontSize = css`var(--labelFontSize, 1.3rem)`;\n    const knobColor = css`var(--knobColor, white)`;\n    const knobTransitionDuration = css`var(--knobTransitionDuration, 0.25s)`;\n    const knobTransitionFn = css`var(--knobTransitionFn, ease)`;\n\n    return [\n      srOnlyStyle,\n      css`\n        #container {\n          display: inline-flex;\n          align-items: center;\n          flex-wrap: nowrap;\n          font-size: ${labelFontSize};\n        }\n\n        #switch-button {\n          width: ${switchWidth};\n          height: ${switchHeight};\n          margin: 0 ${switchMarginRight} 0 ${switchMarginLeft};\n          padding: 0;\n          border: ${switchBorderWidth} solid ${switchBorderColor};\n          border-radius: ${switchHeight};\n          box-sizing: content-box;\n          background: ${switchBgColor};\n          appearance: none;\n          cursor: pointer;\n        }\n\n        #switch-button.left #knob {\n          transform: translateX(0);\n        }\n\n        #switch-button.right #knob {\n          transform: translateX(calc(${switchWidth} - ${switchHeight}));\n        }\n\n        #switch-button:focus-visible {\n          outline: 2px solid black;\n          outline-offset: 2px;\n        }\n\n        #knob {\n          display: block;\n          width: ${switchHeight};\n          height: ${switchHeight};\n          border-radius: 50%;\n          background: ${knobColor};\n          transition: transform ${knobTransitionDuration} ${knobTransitionFn};\n        }\n\n        @media (prefers-reduced-motion: reduce) {\n          #knob {\n            transition-duration: 0.001s !important; /* Imperceptibly fast */\n          }\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/collection-facets.d.ts

@@ -1,103 +1,103 @@
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
-import type { Aggregation, AggregationSortType, FilterMap, SearchServiceInterface, SearchType } from '@internetarchive/search-service';
-import '@internetarchive/histogram-date-range';
-import '@internetarchive/feature-feedback';
-import { ModalManagerInterface } from '@internetarchive/modal-manager';
-import type { FeatureFeedbackServiceInterface } from '@internetarchive/feature-feedback';
-import type { RecaptchaManagerInterface } from '@internetarchive/recaptcha-manager';
-import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
-import type { SharedResizeObserverInterface } from '@internetarchive/shared-resize-observer';
-import { FacetOption, SelectedFacets, FacetGroup } from './models';
-import type { CollectionTitles, PageSpecifierParams } from './data-source/models';
-import './collection-facets/more-facets-content';
-import './collection-facets/facets-template';
-import './collection-facets/facet-tombstone-row';
-import './expanded-date-picker';
-export declare class CollectionFacets extends LitElement {
-    searchService?: SearchServiceInterface;
-    searchType?: SearchType;
-    aggregations?: Record<string, Aggregation>;
-    fullYearsHistogramAggregation?: Aggregation;
-    minSelectedDate?: string;
-    maxSelectedDate?: string;
-    moreLinksVisible: boolean;
-    facetsLoading: boolean;
-    fullYearAggregationLoading: boolean;
-    selectedFacets?: SelectedFacets;
-    collapsableFacets: boolean;
-    contentWidth?: number;
-    showHistogramDatePicker: boolean;
-    allowExpandingDatePicker: boolean;
-    query?: string;
-    pageSpecifierParams?: PageSpecifierParams;
-    parentCollections: string[];
-    filterMap?: FilterMap;
-    baseNavigationUrl?: string;
-    collectionPagePath: string;
-    isManageView: boolean;
-    modalManager?: ModalManagerInterface;
-    resizeObserver?: SharedResizeObserverInterface;
-    featureFeedbackService?: FeatureFeedbackServiceInterface;
-    recaptchaManager?: RecaptchaManagerInterface;
-    analyticsHandler?: AnalyticsManagerInterface;
-    collectionTitles?: CollectionTitles;
-    openFacets: Record<FacetOption, boolean>;
-    /**
-     * Maximum # of facet buckets to render per facet group
-     */
-    private allowedFacetCount;
-    render(): TemplateResult<1>;
-    private get collectionPartOfTemplate();
-    private partOfCollectionClicked;
-    /**
-     * Opens a modal dialog containing an enlarged version of the date picker.
-     */
-    private showDatePickerModal;
-    private handleExpandedDatePickerClosed;
-    updated(changed: PropertyValues): void;
-    private dispatchFacetsChangedEvent;
-    /**
-     * Template for the "Expand" button to show the date picker modal, or
-     * `nothing` if that button should currently not be shown.
-     */
-    private get expandDatePickerBtnTemplate();
-    private get histogramTemplate();
-    /**
-     * Dispatches a `histogramDateRangeUpdated` event with the date range copied from the
-     * input event.
-     *
-     * Arrow function to ensure `this` is always bound to the current component.
-     */
-    private histogramDateRangeUpdated;
-    /**
-     * Combines the selected facets with the aggregations to create a single list of facets
-     */
-    private get mergedFacets();
-    /**
-     * Converts the selected facets to a `FacetGroup` array,
-     * which is easier to work with
-     */
-    private get selectedFacetGroups();
-    /**
-     * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
-     */
-    private get aggregationFacetGroups();
-    /**
-     * Generate the template for a facet group with a header and the collapsible
-     * chevron for the mobile view
-     */
-    private getFacetGroupTemplate;
-    private getTombstoneFacetGroupTemplate;
-    /**
-     * Generate the More... link button just below the facets group
-     *
-     * TODO: want to fire analytics?
-     */
-    private searchMoreFacetsLink;
-    showMoreFacetsModal(facetGroup: FacetGroup, sortedBy: AggregationSortType): Promise<void>;
-    /**
-     * Generate the list template for each bucket in a facet group
-     */
-    private getFacetTemplate;
-    static get styles(): import("lit").CSSResult[];
-}
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import type { Aggregation, AggregationSortType, FilterMap, SearchServiceInterface, SearchType } from '@internetarchive/search-service';
+import '@internetarchive/histogram-date-range';
+import '@internetarchive/feature-feedback';
+import { ModalManagerInterface } from '@internetarchive/modal-manager';
+import type { FeatureFeedbackServiceInterface } from '@internetarchive/feature-feedback';
+import type { RecaptchaManagerInterface } from '@internetarchive/recaptcha-manager';
+import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
+import type { SharedResizeObserverInterface } from '@internetarchive/shared-resize-observer';
+import { FacetOption, SelectedFacets, FacetGroup } from './models';
+import type { CollectionTitles, PageSpecifierParams } from './data-source/models';
+import './collection-facets/more-facets-content';
+import './collection-facets/facets-template';
+import './collection-facets/facet-tombstone-row';
+import './expanded-date-picker';
+export declare class CollectionFacets extends LitElement {
+    searchService?: SearchServiceInterface;
+    searchType?: SearchType;
+    aggregations?: Record<string, Aggregation>;
+    fullYearsHistogramAggregation?: Aggregation;
+    minSelectedDate?: string;
+    maxSelectedDate?: string;
+    moreLinksVisible: boolean;
+    facetsLoading: boolean;
+    fullYearAggregationLoading: boolean;
+    selectedFacets?: SelectedFacets;
+    collapsableFacets: boolean;
+    contentWidth?: number;
+    showHistogramDatePicker: boolean;
+    allowExpandingDatePicker: boolean;
+    query?: string;
+    pageSpecifierParams?: PageSpecifierParams;
+    parentCollections: string[];
+    filterMap?: FilterMap;
+    baseNavigationUrl?: string;
+    collectionPagePath: string;
+    isManageView: boolean;
+    modalManager?: ModalManagerInterface;
+    resizeObserver?: SharedResizeObserverInterface;
+    featureFeedbackService?: FeatureFeedbackServiceInterface;
+    recaptchaManager?: RecaptchaManagerInterface;
+    analyticsHandler?: AnalyticsManagerInterface;
+    collectionTitles?: CollectionTitles;
+    openFacets: Record<FacetOption, boolean>;
+    /**
+     * Maximum # of facet buckets to render per facet group
+     */
+    private allowedFacetCount;
+    render(): TemplateResult<1>;
+    private get collectionPartOfTemplate();
+    private partOfCollectionClicked;
+    /**
+     * Opens a modal dialog containing an enlarged version of the date picker.
+     */
+    private showDatePickerModal;
+    private handleExpandedDatePickerClosed;
+    updated(changed: PropertyValues): void;
+    private dispatchFacetsChangedEvent;
+    /**
+     * Template for the "Expand" button to show the date picker modal, or
+     * `nothing` if that button should currently not be shown.
+     */
+    private get expandDatePickerBtnTemplate();
+    private get histogramTemplate();
+    /**
+     * Dispatches a `histogramDateRangeUpdated` event with the date range copied from the
+     * input event.
+     *
+     * Arrow function to ensure `this` is always bound to the current component.
+     */
+    private histogramDateRangeUpdated;
+    /**
+     * Combines the selected facets with the aggregations to create a single list of facets
+     */
+    private get mergedFacets();
+    /**
+     * Converts the selected facets to a `FacetGroup` array,
+     * which is easier to work with
+     */
+    private get selectedFacetGroups();
+    /**
+     * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
+     */
+    private get aggregationFacetGroups();
+    /**
+     * Generate the template for a facet group with a header and the collapsible
+     * chevron for the mobile view
+     */
+    private getFacetGroupTemplate;
+    private getTombstoneFacetGroupTemplate;
+    /**
+     * Generate the More... link button just below the facets group
+     *
+     * TODO: want to fire analytics?
+     */
+    private searchMoreFacetsLink;
+    showMoreFacetsModal(facetGroup: FacetGroup, sortedBy: AggregationSortType): Promise<void>;
+    /**
+     * Generate the list template for each bucket in a facet group
+     */
+    private getFacetTemplate;
+    static get styles(): import("lit").CSSResult[];
+}