@internetarchive/collection-browser 2.7.12 → 2.7.13-alpha2

package/dist/src/empty-placeholder.js

@@ -1,68 +1,68 @@
-var EmptyPlaceholder_1;
-import { __decorate } from "tslib";
-import { css, html, LitElement, nothing, } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { choose } from 'lit/directives/choose.js';
-import { msg } from '@lit/localize';
-import emptyQueryIcon from './assets/img/icons/empty-query';
-import nullResultIcon from './assets/img/icons/null-result';
-let EmptyPlaceholder = EmptyPlaceholder_1 = class EmptyPlaceholder extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.placeholderType = null;
-        this.detailMessage = '';
-    }
-    render() {
-        return this.placeholderType ? html `${this.placeholderTemplate}` : nothing;
-    }
-    get placeholderTemplate() {
+var EmptyPlaceholder_1;
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { choose } from 'lit/directives/choose.js';
+import { msg } from '@lit/localize';
+import emptyQueryIcon from './assets/img/icons/empty-query';
+import nullResultIcon from './assets/img/icons/null-result';
+let EmptyPlaceholder = EmptyPlaceholder_1 = class EmptyPlaceholder extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.placeholderType = null;
+        this.detailMessage = '';
+    }
+    render() {
+        return this.placeholderType ? html `${this.placeholderTemplate}` : nothing;
+    }
+    get placeholderTemplate() {
         return html `
       <div
-        class="placeholder ${this.placeholderType} ${this.isMobileView
-            ? 'mobile'
+        class="placeholder ${this.placeholderType} ${this.isMobileView
+            ? 'mobile'
             : 'desktop'}"
       >
-        ${choose(this.placeholderType, [
-            ['empty-query', () => this.emptyQueryTemplate],
-            ['empty-collection', () => this.emptyCollectionTemplate],
-            ['no-results', () => this.noResultsTemplate],
-            ['query-error', () => this.queryErrorTemplate],
-            ['collection-error', () => this.collectionErrorTemplate],
+        ${choose(this.placeholderType, [
+            ['empty-query', () => this.emptyQueryTemplate],
+            ['empty-collection', () => this.emptyCollectionTemplate],
+            ['no-results', () => this.noResultsTemplate],
+            ['query-error', () => this.queryErrorTemplate],
+            ['collection-error', () => this.collectionErrorTemplate],
         ])}
       </div>
-    `;
-    }
-    get emptyQueryTemplate() {
-        // Added data-testid for Playwright testing
+    `;
+    }
+    get emptyQueryTemplate() {
+        // Added data-testid for Playwright testing
         return html `
       <h2 class="title" data-testid="empty-query-text-msg">
         ${EmptyPlaceholder_1.MESSAGE_EMPTY_QUERY}
       </h2>
       <div>${emptyQueryIcon}</div>
-    `;
-    }
-    get emptyCollectionTemplate() {
-        // Added data-testid for Playwright testing
+    `;
+    }
+    get emptyCollectionTemplate() {
+        // Added data-testid for Playwright testing
         return html `
       <h2 class="title" data-testid="empty-collection-text-msg">
         ${EmptyPlaceholder_1.MESSAGE_NO_VIEWABLE_MEMBERS}
       </h2>
       <div>${nullResultIcon}</div>
-    `;
-    }
-    get noResultsTemplate() {
-        // Added data-testid for Playwright testing
+    `;
+    }
+    get noResultsTemplate() {
+        // Added data-testid for Playwright testing
         return html `
       <h2 class="title" data-testid="empty-results-text-msg">
-        ${this.isCollection
-            ? EmptyPlaceholder_1.MESSAGE_NO_COLLECTION_RESULTS
+        ${this.isCollection
+            ? EmptyPlaceholder_1.MESSAGE_NO_COLLECTION_RESULTS
             : EmptyPlaceholder_1.MESSAGE_NO_SEARCH_RESULTS}
       </h2>
       <div>${nullResultIcon}</div>
-    `;
-    }
-    get queryErrorTemplate() {
-        // Added data-testid for Playwright testing
+    `;
+    }
+    get queryErrorTemplate() {
+        // Added data-testid for Playwright testing
         return html `
       <h2 class="title" data-testid="error-query-text-msg">
         ${EmptyPlaceholder_1.MESSAGE_QUERY_ERROR}
@@ -71,10 +71,10 @@ let EmptyPlaceholder = EmptyPlaceholder_1 = class EmptyPlaceholder extends LitEl
       <p class="error-details">
         ${EmptyPlaceholder_1.QUERY_ERROR_DETAILS_MESSAGE} ${this.detailMessage}
       </p>
-    `;
-    }
-    get collectionErrorTemplate() {
-        // Added data-testid for Playwright testing
+    `;
+    }
+    get collectionErrorTemplate() {
+        // Added data-testid for Playwright testing
         return html `
       <h2 class="title" data-testid="error-collection-text-msg">
         ${EmptyPlaceholder_1.MESSAGE_COLLECTION_ERROR}
@@ -83,9 +83,9 @@ let EmptyPlaceholder = EmptyPlaceholder_1 = class EmptyPlaceholder extends LitEl
       <p class="error-details">
         ${EmptyPlaceholder_1.QUERY_ERROR_DETAILS_MESSAGE} ${this.detailMessage}
       </p>
-    `;
-    }
-    static get styles() {
+    `;
+    }
+    static get styles() {
         return css `
       :host {
         text-align: center;
@@ -126,41 +126,40 @@ let EmptyPlaceholder = EmptyPlaceholder_1 = class EmptyPlaceholder extends LitEl
         font-size: 1.2rem;
         word-break: break-word;
       }
-    `;
-    }
-};
-EmptyPlaceholder.MESSAGE_EMPTY_QUERY = msg('To begin searching, enter a search term in the box above and hit "Go".');
-EmptyPlaceholder.MESSAGE_NO_SEARCH_RESULTS = msg('Your search did not match any items in the Archive. ' +
-    'Try different keywords or a more general search.');
-EmptyPlaceholder.MESSAGE_NO_COLLECTION_RESULTS = msg('Your search did not match any items in this collection. ' +
-    'Try different keywords or a more general search.');
-EmptyPlaceholder.MESSAGE_NO_VIEWABLE_MEMBERS = msg('This collection contains no viewable items.');
-EmptyPlaceholder.MESSAGE_QUERY_ERROR = msg(html `The search engine
-    encountered an error, which might be related to your search query.
-    <a
-      href="https://help.archive.org/help/search-building-powerful-complex-queries/"
-    >
-      Tips for constructing search queries.
-    </a> `);
-EmptyPlaceholder.MESSAGE_COLLECTION_ERROR = msg(html `The search engine
-    encountered an error while loading this collection. If the problem persists,
-    please let us know at
-    <a href="mailto:info@archive.org">info@archive.org</a>.`);
-EmptyPlaceholder.QUERY_ERROR_DETAILS_MESSAGE = msg('Error details:');
-__decorate([
-    property({ type: String })
-], EmptyPlaceholder.prototype, "placeholderType", void 0);
-__decorate([
-    property({ type: Boolean })
-], EmptyPlaceholder.prototype, "isMobileView", void 0);
-__decorate([
-    property({ type: Boolean })
-], EmptyPlaceholder.prototype, "isCollection", void 0);
-__decorate([
-    property({ type: String })
-], EmptyPlaceholder.prototype, "detailMessage", void 0);
-EmptyPlaceholder = EmptyPlaceholder_1 = __decorate([
-    customElement('empty-placeholder')
-], EmptyPlaceholder);
-export { EmptyPlaceholder };
+    `;
+    }
+};
+EmptyPlaceholder.MESSAGE_EMPTY_QUERY = msg('To begin searching, enter a search term in the box above and hit "Go".');
+EmptyPlaceholder.MESSAGE_NO_SEARCH_RESULTS = msg('Your search did not match any items in the Archive. ' +
+    'Try different keywords or a more general search.');
+EmptyPlaceholder.MESSAGE_NO_COLLECTION_RESULTS = msg('Your search did not match any items in this collection. ' +
+    'Try different keywords or a more general search.');
+EmptyPlaceholder.MESSAGE_NO_VIEWABLE_MEMBERS = msg('This collection contains no viewable items.');
+EmptyPlaceholder.MESSAGE_QUERY_ERROR = msg(html `The search engine encountered an error, which might be related to your
+      search query.
+      <a
+        href="https://help.archive.org/help/search-building-powerful-complex-queries/"
+      >
+        Tips for constructing search queries.
+      </a> `);
+EmptyPlaceholder.MESSAGE_COLLECTION_ERROR = msg(html `The search engine encountered an error while loading this collection.
+      If the problem persists, please let us know at
+      <a href="mailto:info@archive.org">info@archive.org</a>.`);
+EmptyPlaceholder.QUERY_ERROR_DETAILS_MESSAGE = msg('Error details:');
+__decorate([
+    property({ type: String })
+], EmptyPlaceholder.prototype, "placeholderType", void 0);
+__decorate([
+    property({ type: Boolean })
+], EmptyPlaceholder.prototype, "isMobileView", void 0);
+__decorate([
+    property({ type: Boolean })
+], EmptyPlaceholder.prototype, "isCollection", void 0);
+__decorate([
+    property({ type: String })
+], EmptyPlaceholder.prototype, "detailMessage", void 0);
+EmptyPlaceholder = EmptyPlaceholder_1 = __decorate([
+    customElement('empty-placeholder')
+], EmptyPlaceholder);
+export { EmptyPlaceholder };
 //# sourceMappingURL=empty-placeholder.js.map

package/dist/src/empty-placeholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-placeholder.js","sourceRoot":"","sources":["../../src/empty-placeholder.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  CSSResultGroup,\n  nothing,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { choose } from 'lit/directives/choose.js';\nimport { msg } from '@lit/localize';\n\nimport emptyQueryIcon from './assets/img/icons/empty-query';\nimport nullResultIcon from './assets/img/icons/null-result';\n\nexport type PlaceholderType =\n  | 'empty-query'\n  | 'empty-collection'\n  | 'no-results'\n  | 'query-error'\n  | 'collection-error'\n  | null;\n@customElement('empty-placeholder')\nexport class EmptyPlaceholder extends LitElement {\n  private static readonly MESSAGE_EMPTY_QUERY = msg(\n    'To begin searching, enter a search term in the box above and hit \"Go\".'\n  );\n\n  private static readonly MESSAGE_NO_SEARCH_RESULTS = msg(\n    'Your search did not match any items in the Archive. ' +\n      'Try different keywords or a more general search.'\n  );\n\n  private static readonly MESSAGE_NO_COLLECTION_RESULTS = msg(\n    'Your search did not match any items in this collection. ' +\n      'Try different keywords or a more general search.'\n  );\n\n  private static readonly MESSAGE_NO_VIEWABLE_MEMBERS = msg(\n    'This collection contains no viewable items.'\n  );\n\n  private static readonly MESSAGE_QUERY_ERROR = msg(html`The search engine\n    encountered an error, which might be related to your search query.\n    <a\n      href=\"https://help.archive.org/help/search-building-powerful-complex-queries/\"\n    >\n      Tips for constructing search queries.\n    </a> `);\n\n  private static readonly MESSAGE_COLLECTION_ERROR = msg(html`The search engine\n    encountered an error while loading this collection. If the problem persists,\n    please let us know at\n    <a href=\"mailto:info@archive.org\">info@archive.org</a>.`);\n\n  private static readonly QUERY_ERROR_DETAILS_MESSAGE = msg('Error details:');\n\n  @property({ type: String }) placeholderType: PlaceholderType = null;\n\n  @property({ type: Boolean }) isMobileView?: false;\n\n  @property({ type: Boolean }) isCollection?: false;\n\n  @property({ type: String }) detailMessage?: string = '';\n\n  render() {\n    return this.placeholderType ? html`${this.placeholderTemplate}` : nothing;\n  }\n\n  private get placeholderTemplate(): TemplateResult {\n    return html`\n      <div\n        class=\"placeholder ${this.placeholderType} ${this.isMobileView\n          ? 'mobile'\n          : 'desktop'}\"\n      >\n        ${choose(this.placeholderType, [\n          ['empty-query', () => this.emptyQueryTemplate],\n          ['empty-collection', () => this.emptyCollectionTemplate],\n          ['no-results', () => this.noResultsTemplate],\n          ['query-error', () => this.queryErrorTemplate],\n          ['collection-error', () => this.collectionErrorTemplate],\n        ])}\n      </div>\n    `;\n  }\n\n  private get emptyQueryTemplate(): TemplateResult {\n    // Added data-testid for Playwright testing\n    return html`\n      <h2 class=\"title\" data-testid=\"empty-query-text-msg\">\n        ${EmptyPlaceholder.MESSAGE_EMPTY_QUERY}\n      </h2>\n      <div>${emptyQueryIcon}</div>\n    `;\n  }\n\n  private get emptyCollectionTemplate(): TemplateResult {\n    // Added data-testid for Playwright testing\n    return html`\n      <h2 class=\"title\" data-testid=\"empty-collection-text-msg\">\n        ${EmptyPlaceholder.MESSAGE_NO_VIEWABLE_MEMBERS}\n      </h2>\n      <div>${nullResultIcon}</div>\n    `;\n  }\n\n  private get noResultsTemplate(): TemplateResult {\n    // Added data-testid for Playwright testing\n    return html`\n      <h2 class=\"title\" data-testid=\"empty-results-text-msg\">\n        ${this.isCollection\n          ? EmptyPlaceholder.MESSAGE_NO_COLLECTION_RESULTS\n          : EmptyPlaceholder.MESSAGE_NO_SEARCH_RESULTS}\n      </h2>\n      <div>${nullResultIcon}</div>\n    `;\n  }\n\n  private get queryErrorTemplate(): TemplateResult {\n    // Added data-testid for Playwright testing\n    return html`\n      <h2 class=\"title\" data-testid=\"error-query-text-msg\">\n        ${EmptyPlaceholder.MESSAGE_QUERY_ERROR}\n      </h2>\n      <div>${nullResultIcon}</div>\n      <p class=\"error-details\">\n        ${EmptyPlaceholder.QUERY_ERROR_DETAILS_MESSAGE} ${this.detailMessage}\n      </p>\n    `;\n  }\n\n  private get collectionErrorTemplate(): TemplateResult {\n    // Added data-testid for Playwright testing\n    return html`\n      <h2 class=\"title\" data-testid=\"error-collection-text-msg\">\n        ${EmptyPlaceholder.MESSAGE_COLLECTION_ERROR}\n      </h2>\n      <div>${nullResultIcon}</div>\n      <p class=\"error-details\">\n        ${EmptyPlaceholder.QUERY_ERROR_DETAILS_MESSAGE} ${this.detailMessage}\n      </p>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        text-align: center;\n        width: 100%;\n      }\n\n      a {\n        text-decoration: none;\n      }\n      a:link {\n        color: var(--ia-theme-link-color, #4b64ff);\n      }\n      a:hover {\n        text-decoration: underline;\n      }\n\n      .placeholder {\n        display: block;\n      }\n\n      .desktop svg {\n        max-height: 40rem;\n      }\n      .desktop .title,\n      .desktop .error-details {\n        margin: 4rem 0;\n      }\n\n      .mobile svg {\n        max-height: 20rem;\n      }\n      .mobile .title,\n      .mobile .error-details {\n        margin: 2rem 0.5;\n      }\n\n      .error-details {\n        font-size: 1.2rem;\n        word-break: break-word;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"empty-placeholder.js","sourceRoot":"","sources":["../../src/empty-placeholder.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  CSSResultGroup,\n  nothing,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { choose } from 'lit/directives/choose.js';\nimport { msg } from '@lit/localize';\n\nimport emptyQueryIcon from './assets/img/icons/empty-query';\nimport nullResultIcon from './assets/img/icons/null-result';\n\nexport type PlaceholderType =\n  | 'empty-query'\n  | 'empty-collection'\n  | 'no-results'\n  | 'query-error'\n  | 'collection-error'\n  | null;\n@customElement('empty-placeholder')\nexport class EmptyPlaceholder extends LitElement {\n  private static readonly MESSAGE_EMPTY_QUERY = msg(\n    'To begin searching, enter a search term in the box above and hit \"Go\".',\n  );\n\n  private static readonly MESSAGE_NO_SEARCH_RESULTS = msg(\n    'Your search did not match any items in the Archive. ' +\n      'Try different keywords or a more general search.',\n  );\n\n  private static readonly MESSAGE_NO_COLLECTION_RESULTS = msg(\n    'Your search did not match any items in this collection. ' +\n      'Try different keywords or a more general search.',\n  );\n\n  private static readonly MESSAGE_NO_VIEWABLE_MEMBERS = msg(\n    'This collection contains no viewable items.',\n  );\n\n  private static readonly MESSAGE_QUERY_ERROR = msg(\n    html`The search engine encountered an error, which might be related to your\n      search query.\n      <a\n        href=\"https://help.archive.org/help/search-building-powerful-complex-queries/\"\n      >\n        Tips for constructing search queries.\n      </a> `,\n  );\n\n  private static readonly MESSAGE_COLLECTION_ERROR = msg(\n    html`The search engine encountered an error while loading this collection.\n      If the problem persists, please let us know at\n      <a href=\"mailto:info@archive.org\">info@archive.org</a>.`,\n  );\n\n  private static readonly QUERY_ERROR_DETAILS_MESSAGE = msg('Error details:');\n\n  @property({ type: String }) placeholderType: PlaceholderType = null;\n\n  @property({ type: Boolean }) isMobileView?: false;\n\n  @property({ type: Boolean }) isCollection?: false;\n\n  @property({ type: String }) detailMessage?: string = '';\n\n  render() {\n    return this.placeholderType ? html`${this.placeholderTemplate}` : nothing;\n  }\n\n  private get placeholderTemplate(): TemplateResult {\n    return html`\n      <div\n        class=\"placeholder ${this.placeholderType} ${this.isMobileView\n          ? 'mobile'\n          : 'desktop'}\"\n      >\n        ${choose(this.placeholderType, [\n          ['empty-query', () => this.emptyQueryTemplate],\n          ['empty-collection', () => this.emptyCollectionTemplate],\n          ['no-results', () => this.noResultsTemplate],\n          ['query-error', () => this.queryErrorTemplate],\n          ['collection-error', () => this.collectionErrorTemplate],\n        ])}\n      </div>\n    `;\n  }\n\n  private get emptyQueryTemplate(): TemplateResult {\n    // Added data-testid for Playwright testing\n    return html`\n      <h2 class=\"title\" data-testid=\"empty-query-text-msg\">\n        ${EmptyPlaceholder.MESSAGE_EMPTY_QUERY}\n      </h2>\n      <div>${emptyQueryIcon}</div>\n    `;\n  }\n\n  private get emptyCollectionTemplate(): TemplateResult {\n    // Added data-testid for Playwright testing\n    return html`\n      <h2 class=\"title\" data-testid=\"empty-collection-text-msg\">\n        ${EmptyPlaceholder.MESSAGE_NO_VIEWABLE_MEMBERS}\n      </h2>\n      <div>${nullResultIcon}</div>\n    `;\n  }\n\n  private get noResultsTemplate(): TemplateResult {\n    // Added data-testid for Playwright testing\n    return html`\n      <h2 class=\"title\" data-testid=\"empty-results-text-msg\">\n        ${this.isCollection\n          ? EmptyPlaceholder.MESSAGE_NO_COLLECTION_RESULTS\n          : EmptyPlaceholder.MESSAGE_NO_SEARCH_RESULTS}\n      </h2>\n      <div>${nullResultIcon}</div>\n    `;\n  }\n\n  private get queryErrorTemplate(): TemplateResult {\n    // Added data-testid for Playwright testing\n    return html`\n      <h2 class=\"title\" data-testid=\"error-query-text-msg\">\n        ${EmptyPlaceholder.MESSAGE_QUERY_ERROR}\n      </h2>\n      <div>${nullResultIcon}</div>\n      <p class=\"error-details\">\n        ${EmptyPlaceholder.QUERY_ERROR_DETAILS_MESSAGE} ${this.detailMessage}\n      </p>\n    `;\n  }\n\n  private get collectionErrorTemplate(): TemplateResult {\n    // Added data-testid for Playwright testing\n    return html`\n      <h2 class=\"title\" data-testid=\"error-collection-text-msg\">\n        ${EmptyPlaceholder.MESSAGE_COLLECTION_ERROR}\n      </h2>\n      <div>${nullResultIcon}</div>\n      <p class=\"error-details\">\n        ${EmptyPlaceholder.QUERY_ERROR_DETAILS_MESSAGE} ${this.detailMessage}\n      </p>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        text-align: center;\n        width: 100%;\n      }\n\n      a {\n        text-decoration: none;\n      }\n      a:link {\n        color: var(--ia-theme-link-color, #4b64ff);\n      }\n      a:hover {\n        text-decoration: underline;\n      }\n\n      .placeholder {\n        display: block;\n      }\n\n      .desktop svg {\n        max-height: 40rem;\n      }\n      .desktop .title,\n      .desktop .error-details {\n        margin: 4rem 0;\n      }\n\n      .mobile svg {\n        max-height: 20rem;\n      }\n      .mobile .title,\n      .mobile .error-details {\n        margin: 2rem 0.5;\n      }\n\n      .error-details {\n        font-size: 1.2rem;\n        word-break: break-word;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/expanded-date-picker.d.ts

@@ -1,43 +1,43 @@
-import { LitElement, CSSResultGroup, TemplateResult } from 'lit';
-import type { ModalManagerInterface } from '@internetarchive/modal-manager';
-import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
-export declare class ExpandedDatePicker extends LitElement {
-    minDate?: string;
-    maxDate?: string;
-    minSelectedDate?: string;
-    maxSelectedDate?: string;
-    buckets?: number[];
-    modalManager?: ModalManagerInterface;
-    analyticsHandler?: AnalyticsManagerInterface;
-    render(): TemplateResult;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    /**
-     * Add an event listener to close the date picker modal when the Esc key is pressed
-     */
-    private setupEscapeListener;
-    /**
-     * Remove the Esc key listener that was previously added
-     */
-    private removeEscapeListener;
-    /**
-     * Closes the modal dialog if the given event is pressing the Esc key.
-     * Arrow function to ensure `this` remains bound to the current component.
-     */
-    private boundEscapeListener;
-    /**
-     * When the histogram is updated, keep track of the newly selected date range.
-     * We don't commit to the new range until the apply button is clicked.
-     */
-    private histogramDateRangeUpdated;
-    /**
-     * When the Apply button is clicked, emit the current date range and close the modal.
-     */
-    private applyBtnClicked;
-    /**
-     * Closes the modal associated with this component (if it exists) and dispatches a
-     * modalClosed event.
-     */
-    private closeModal;
-    static get styles(): CSSResultGroup;
-}
+import { LitElement, CSSResultGroup, TemplateResult } from 'lit';
+import type { ModalManagerInterface } from '@internetarchive/modal-manager';
+import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
+export declare class ExpandedDatePicker extends LitElement {
+    minDate?: string;
+    maxDate?: string;
+    minSelectedDate?: string;
+    maxSelectedDate?: string;
+    buckets?: number[];
+    modalManager?: ModalManagerInterface;
+    analyticsHandler?: AnalyticsManagerInterface;
+    render(): TemplateResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Add an event listener to close the date picker modal when the Esc key is pressed
+     */
+    private setupEscapeListener;
+    /**
+     * Remove the Esc key listener that was previously added
+     */
+    private removeEscapeListener;
+    /**
+     * Closes the modal dialog if the given event is pressing the Esc key.
+     * Arrow function to ensure `this` remains bound to the current component.
+     */
+    private boundEscapeListener;
+    /**
+     * When the histogram is updated, keep track of the newly selected date range.
+     * We don't commit to the new range until the apply button is clicked.
+     */
+    private histogramDateRangeUpdated;
+    /**
+     * When the Apply button is clicked, emit the current date range and close the modal.
+     */
+    private applyBtnClicked;
+    /**
+     * Closes the modal associated with this component (if it exists) and dispatches a
+     * modalClosed event.
+     */
+    private closeModal;
+    static get styles(): CSSResultGroup;
+}

package/dist/src/expanded-date-picker.js

@@ -1,22 +1,22 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { analyticsActions, analyticsCategories, } from './utils/analytics-events';
-let ExpandedDatePicker = class ExpandedDatePicker extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Closes the modal dialog if the given event is pressing the Esc key.
-         * Arrow function to ensure `this` remains bound to the current component.
-         */
-        this.boundEscapeListener = (e) => {
-            if (e.key === 'Escape') {
-                this.closeModal();
-            }
-        };
-    }
-    render() {
-        var _a, _b;
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { analyticsActions, analyticsCategories, } from './utils/analytics-events';
+let ExpandedDatePicker = class ExpandedDatePicker extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Closes the modal dialog if the given event is pressing the Esc key.
+         * Arrow function to ensure `this` remains bound to the current component.
+         */
+        this.boundEscapeListener = (e) => {
+            if (e.key === 'Escape') {
+                this.closeModal();
+            }
+        };
+    }
+    render() {
+        var _a, _b;
         return html `
       <div id="container">
         <histogram-date-range
@@ -42,68 +42,68 @@ let ExpandedDatePicker = class ExpandedDatePicker extends LitElement {
           </button>
         </histogram-date-range>
       </div>
-    `;
-    }
-    connectedCallback() {
-        var _a;
-        (_a = super.connectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
-        this.setupEscapeListener();
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = super.disconnectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
-        this.removeEscapeListener();
-    }
-    /**
-     * Add an event listener to close the date picker modal when the Esc key is pressed
-     */
-    setupEscapeListener() {
-        document.addEventListener('keydown', this.boundEscapeListener);
-    }
-    /**
-     * Remove the Esc key listener that was previously added
-     */
-    removeEscapeListener() {
-        document.removeEventListener('keydown', this.boundEscapeListener);
-    }
-    /**
-     * When the histogram is updated, keep track of the newly selected date range.
-     * We don't commit to the new range until the apply button is clicked.
-     */
-    histogramDateRangeUpdated(e) {
-        this.minSelectedDate = e.detail.minDate;
-        this.maxSelectedDate = e.detail.maxDate;
-    }
-    /**
-     * When the Apply button is clicked, emit the current date range and close the modal.
-     */
-    applyBtnClicked() {
-        var _a;
-        const event = new CustomEvent('histogramDateRangeApplied', {
-            detail: {
-                minDate: this.minSelectedDate,
-                maxDate: this.maxSelectedDate,
-            },
-        });
-        this.dispatchEvent(event);
-        this.closeModal();
-        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
-            category: analyticsCategories.default,
-            action: analyticsActions.histogramChangedFromModal,
-            label: window.location.href,
-        });
-    }
-    /**
-     * Closes the modal associated with this component (if it exists) and dispatches a
-     * modalClosed event.
-     */
-    closeModal() {
-        if (this.modalManager) {
-            this.modalManager.closeModal();
-            this.dispatchEvent(new CustomEvent('modalClosed'));
-        }
-    }
-    static get styles() {
+    `;
+    }
+    connectedCallback() {
+        var _a;
+        (_a = super.connectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.setupEscapeListener();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = super.disconnectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.removeEscapeListener();
+    }
+    /**
+     * Add an event listener to close the date picker modal when the Esc key is pressed
+     */
+    setupEscapeListener() {
+        document.addEventListener('keydown', this.boundEscapeListener);
+    }
+    /**
+     * Remove the Esc key listener that was previously added
+     */
+    removeEscapeListener() {
+        document.removeEventListener('keydown', this.boundEscapeListener);
+    }
+    /**
+     * When the histogram is updated, keep track of the newly selected date range.
+     * We don't commit to the new range until the apply button is clicked.
+     */
+    histogramDateRangeUpdated(e) {
+        this.minSelectedDate = e.detail.minDate;
+        this.maxSelectedDate = e.detail.maxDate;
+    }
+    /**
+     * When the Apply button is clicked, emit the current date range and close the modal.
+     */
+    applyBtnClicked() {
+        var _a;
+        const event = new CustomEvent('histogramDateRangeApplied', {
+            detail: {
+                minDate: this.minSelectedDate,
+                maxDate: this.maxSelectedDate,
+            },
+        });
+        this.dispatchEvent(event);
+        this.closeModal();
+        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
+            category: analyticsCategories.default,
+            action: analyticsActions.histogramChangedFromModal,
+            label: window.location.href,
+        });
+    }
+    /**
+     * Closes the modal associated with this component (if it exists) and dispatches a
+     * modalClosed event.
+     */
+    closeModal() {
+        if (this.modalManager) {
+            this.modalManager.closeModal();
+            this.dispatchEvent(new CustomEvent('modalClosed'));
+        }
+    }
+    static get styles() {
         return css `
       #container {
         display: flex;
@@ -126,32 +126,32 @@ let ExpandedDatePicker = class ExpandedDatePicker extends LitElement {
         color: white;
         cursor: pointer;
       }
-    `;
-    }
-};
-__decorate([
-    property({ type: String })
-], ExpandedDatePicker.prototype, "minDate", void 0);
-__decorate([
-    property({ type: String })
-], ExpandedDatePicker.prototype, "maxDate", void 0);
-__decorate([
-    property({ type: String })
-], ExpandedDatePicker.prototype, "minSelectedDate", void 0);
-__decorate([
-    property({ type: String })
-], ExpandedDatePicker.prototype, "maxSelectedDate", void 0);
-__decorate([
-    property({ type: Array })
-], ExpandedDatePicker.prototype, "buckets", void 0);
-__decorate([
-    property({ type: Object, attribute: false })
-], ExpandedDatePicker.prototype, "modalManager", void 0);
-__decorate([
-    property({ type: Object, attribute: false })
-], ExpandedDatePicker.prototype, "analyticsHandler", void 0);
-ExpandedDatePicker = __decorate([
-    customElement('expanded-date-picker')
-], ExpandedDatePicker);
-export { ExpandedDatePicker };
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], ExpandedDatePicker.prototype, "minDate", void 0);
+__decorate([
+    property({ type: String })
+], ExpandedDatePicker.prototype, "maxDate", void 0);
+__decorate([
+    property({ type: String })
+], ExpandedDatePicker.prototype, "minSelectedDate", void 0);
+__decorate([
+    property({ type: String })
+], ExpandedDatePicker.prototype, "maxSelectedDate", void 0);
+__decorate([
+    property({ type: Array })
+], ExpandedDatePicker.prototype, "buckets", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], ExpandedDatePicker.prototype, "modalManager", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], ExpandedDatePicker.prototype, "analyticsHandler", void 0);
+ExpandedDatePicker = __decorate([
+    customElement('expanded-date-picker')
+], ExpandedDatePicker);
+export { ExpandedDatePicker };
 //# sourceMappingURL=expanded-date-picker.js.map

package/dist/src/expanded-date-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"expanded-date-picker.js","sourceRoot":"","sources":["../../src/expanded-date-picker.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, CSSResultGroup, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { ModalManagerInterface } from '@internetarchive/modal-manager';\nimport type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';\nimport {\n  analyticsActions,\n  analyticsCategories,\n} from './utils/analytics-events';\n\n@customElement('expanded-date-picker')\nexport class ExpandedDatePicker extends LitElement {\n  @property({ type: String }) minDate?: string;\n\n  @property({ type: String }) maxDate?: string;\n\n  @property({ type: String }) minSelectedDate?: string;\n\n  @property({ type: String }) maxSelectedDate?: string;\n\n  @property({ type: Array }) buckets?: number[];\n\n  @property({ type: Object, attribute: false })\n  modalManager?: ModalManagerInterface;\n\n  @property({ type: Object, attribute: false })\n  analyticsHandler?: AnalyticsManagerInterface;\n\n  render(): TemplateResult {\n    return html`\n      <div id=\"container\">\n        <histogram-date-range\n          id=\"date-picker\"\n          .minDate=${this.minDate}\n          .maxDate=${this.maxDate}\n          .minSelectedDate=${this.minSelectedDate ?? this.minDate}\n          .maxSelectedDate=${this.maxSelectedDate ?? this.maxDate}\n          .updateDelay=${0}\n          updateWhileFocused\n          missingDataMessage=\"...\"\n          .width=${560}\n          .height=${120}\n          .bins=${this.buckets}\n          @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}\n        >\n          <button\n            id=\"apply-btn\"\n            slot=\"inputs-right-side\"\n            @click=${this.applyBtnClicked}\n          >\n            Apply date range\n          </button>\n        </histogram-date-range>\n      </div>\n    `;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback?.();\n    this.setupEscapeListener();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n    this.removeEscapeListener();\n  }\n\n  /**\n   * Add an event listener to close the date picker modal when the Esc key is pressed\n   */\n  private setupEscapeListener() {\n    document.addEventListener('keydown', this.boundEscapeListener);\n  }\n\n  /**\n   * Remove the Esc key listener that was previously added\n   */\n  private removeEscapeListener() {\n    document.removeEventListener('keydown', this.boundEscapeListener);\n  }\n\n  /**\n   * Closes the modal dialog if the given event is pressing the Esc key.\n   * Arrow function to ensure `this` remains bound to the current component.\n   */\n  private boundEscapeListener = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      this.closeModal();\n    }\n  };\n\n  /**\n   * When the histogram is updated, keep track of the newly selected date range.\n   * We don't commit to the new range until the apply button is clicked.\n   */\n  private histogramDateRangeUpdated(\n    e: CustomEvent<{\n      minDate: string;\n      maxDate: string;\n    }>\n  ): void {\n    this.minSelectedDate = e.detail.minDate;\n    this.maxSelectedDate = e.detail.maxDate;\n  }\n\n  /**\n   * When the Apply button is clicked, emit the current date range and close the modal.\n   */\n  private applyBtnClicked(): void {\n    const event = new CustomEvent('histogramDateRangeApplied', {\n      detail: {\n        minDate: this.minSelectedDate,\n        maxDate: this.maxSelectedDate,\n      },\n    });\n    this.dispatchEvent(event);\n    this.closeModal();\n\n    this.analyticsHandler?.sendEvent({\n      category: analyticsCategories.default,\n      action: analyticsActions.histogramChangedFromModal,\n      label: window.location.href,\n    });\n  }\n\n  /**\n   * Closes the modal associated with this component (if it exists) and dispatches a\n   * modalClosed event.\n   */\n  private closeModal(): void {\n    if (this.modalManager) {\n      this.modalManager.closeModal();\n      this.dispatchEvent(new CustomEvent('modalClosed'));\n    }\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      #container {\n        display: flex;\n        justify-content: center;\n        padding: 40px 10px 10px;\n        overflow: hidden;\n      }\n\n      #date-picker {\n        --histogramDateRangeInputWidth: 50px;\n        --histogramDateRangeInputRowMargin: 5px 0 0 0;\n      }\n\n      #apply-btn {\n        margin: 0 0 0 5px;\n        padding: 8px 10px;\n        border: 0;\n        border-radius: 4px;\n        background: var(--primaryButtonBGColor, #194880);\n        color: white;\n        cursor: pointer;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"expanded-date-picker.js","sourceRoot":"","sources":["../../src/expanded-date-picker.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, CSSResultGroup, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { ModalManagerInterface } from '@internetarchive/modal-manager';\nimport type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';\nimport {\n  analyticsActions,\n  analyticsCategories,\n} from './utils/analytics-events';\n\n@customElement('expanded-date-picker')\nexport class ExpandedDatePicker extends LitElement {\n  @property({ type: String }) minDate?: string;\n\n  @property({ type: String }) maxDate?: string;\n\n  @property({ type: String }) minSelectedDate?: string;\n\n  @property({ type: String }) maxSelectedDate?: string;\n\n  @property({ type: Array }) buckets?: number[];\n\n  @property({ type: Object, attribute: false })\n  modalManager?: ModalManagerInterface;\n\n  @property({ type: Object, attribute: false })\n  analyticsHandler?: AnalyticsManagerInterface;\n\n  render(): TemplateResult {\n    return html`\n      <div id=\"container\">\n        <histogram-date-range\n          id=\"date-picker\"\n          .minDate=${this.minDate}\n          .maxDate=${this.maxDate}\n          .minSelectedDate=${this.minSelectedDate ?? this.minDate}\n          .maxSelectedDate=${this.maxSelectedDate ?? this.maxDate}\n          .updateDelay=${0}\n          updateWhileFocused\n          missingDataMessage=\"...\"\n          .width=${560}\n          .height=${120}\n          .bins=${this.buckets}\n          @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}\n        >\n          <button\n            id=\"apply-btn\"\n            slot=\"inputs-right-side\"\n            @click=${this.applyBtnClicked}\n          >\n            Apply date range\n          </button>\n        </histogram-date-range>\n      </div>\n    `;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback?.();\n    this.setupEscapeListener();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n    this.removeEscapeListener();\n  }\n\n  /**\n   * Add an event listener to close the date picker modal when the Esc key is pressed\n   */\n  private setupEscapeListener() {\n    document.addEventListener('keydown', this.boundEscapeListener);\n  }\n\n  /**\n   * Remove the Esc key listener that was previously added\n   */\n  private removeEscapeListener() {\n    document.removeEventListener('keydown', this.boundEscapeListener);\n  }\n\n  /**\n   * Closes the modal dialog if the given event is pressing the Esc key.\n   * Arrow function to ensure `this` remains bound to the current component.\n   */\n  private boundEscapeListener = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      this.closeModal();\n    }\n  };\n\n  /**\n   * When the histogram is updated, keep track of the newly selected date range.\n   * We don't commit to the new range until the apply button is clicked.\n   */\n  private histogramDateRangeUpdated(\n    e: CustomEvent<{\n      minDate: string;\n      maxDate: string;\n    }>,\n  ): void {\n    this.minSelectedDate = e.detail.minDate;\n    this.maxSelectedDate = e.detail.maxDate;\n  }\n\n  /**\n   * When the Apply button is clicked, emit the current date range and close the modal.\n   */\n  private applyBtnClicked(): void {\n    const event = new CustomEvent('histogramDateRangeApplied', {\n      detail: {\n        minDate: this.minSelectedDate,\n        maxDate: this.maxSelectedDate,\n      },\n    });\n    this.dispatchEvent(event);\n    this.closeModal();\n\n    this.analyticsHandler?.sendEvent({\n      category: analyticsCategories.default,\n      action: analyticsActions.histogramChangedFromModal,\n      label: window.location.href,\n    });\n  }\n\n  /**\n   * Closes the modal associated with this component (if it exists) and dispatches a\n   * modalClosed event.\n   */\n  private closeModal(): void {\n    if (this.modalManager) {\n      this.modalManager.closeModal();\n      this.dispatchEvent(new CustomEvent('modalClosed'));\n    }\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      #container {\n        display: flex;\n        justify-content: center;\n        padding: 40px 10px 10px;\n        overflow: hidden;\n      }\n\n      #date-picker {\n        --histogramDateRangeInputWidth: 50px;\n        --histogramDateRangeInputRowMargin: 5px 0 0 0;\n      }\n\n      #apply-btn {\n        margin: 0 0 0 5px;\n        padding: 8px 10px;\n        border: 0;\n        border-radius: 4px;\n        background: var(--primaryButtonBGColor, #194880);\n        color: white;\n        cursor: pointer;\n      }\n    `;\n  }\n}\n"]}