@internetarchive/collection-browser 2.5.2 → 2.6.1

package/dist/src/empty-placeholder.js

@@ -1,78 +1,91 @@
-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() {
+    `;
+    }
+    get emptyQueryTemplate() {
+        // Added data-testid for Playwright testing
         return html `
-      <h2 class="title">${EmptyPlaceholder_1.MESSAGE_EMPTY_QUERY}</h2>
+      <h2 class="title" data-testid="empty-query-text-msg">
+        ${EmptyPlaceholder_1.MESSAGE_EMPTY_QUERY}
+      </h2>
       <div>${emptyQueryIcon}</div>
-    `;
-    }
-    get emptyCollectionTemplate() {
+    `;
+    }
+    get emptyCollectionTemplate() {
+        // Added data-testid for Playwright testing
         return html `
-      <h2 class="title">${EmptyPlaceholder_1.MESSAGE_NO_VIEWABLE_MEMBERS}</h2>
+      <h2 class="title" data-testid="empty-collection-text-msg">
+        ${EmptyPlaceholder_1.MESSAGE_NO_VIEWABLE_MEMBERS}
+      </h2>
       <div>${nullResultIcon}</div>
-    `;
-    }
-    get noResultsTemplate() {
+    `;
+    }
+    get noResultsTemplate() {
+        // Added data-testid for Playwright testing
         return html `
-      <h2 class="title">
-        ${this.isCollection
-            ? EmptyPlaceholder_1.MESSAGE_NO_COLLECTION_RESULTS
+      <h2 class="title" data-testid="empty-results-text-msg">
+        ${this.isCollection
+            ? EmptyPlaceholder_1.MESSAGE_NO_COLLECTION_RESULTS
             : EmptyPlaceholder_1.MESSAGE_NO_SEARCH_RESULTS}
       </h2>
       <div>${nullResultIcon}</div>
-    `;
-    }
-    get queryErrorTemplate() {
+    `;
+    }
+    get queryErrorTemplate() {
+        // Added data-testid for Playwright testing
         return html `
-      <h2 class="title">${EmptyPlaceholder_1.MESSAGE_QUERY_ERROR}</h2>
+      <h2 class="title" data-testid="error-query-text-msg">
+        ${EmptyPlaceholder_1.MESSAGE_QUERY_ERROR}
+      </h2>
       <div>${nullResultIcon}</div>
       <p class="error-details">
         ${EmptyPlaceholder_1.QUERY_ERROR_DETAILS_MESSAGE} ${this.detailMessage}
       </p>
-    `;
-    }
-    get collectionErrorTemplate() {
+    `;
+    }
+    get collectionErrorTemplate() {
+        // Added data-testid for Playwright testing
         return html `
-      <h2 class="title">${EmptyPlaceholder_1.MESSAGE_COLLECTION_ERROR}</h2>
+      <h2 class="title" data-testid="error-collection-text-msg">
+        ${EmptyPlaceholder_1.MESSAGE_COLLECTION_ERROR}
+      </h2>
       <div>${nullResultIcon}</div>
       <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;
@@ -113,41 +126,41 @@ 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_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> `);
+    </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 };
+    <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    return html`\n      <h2 class=\"title\">${EmptyPlaceholder.MESSAGE_EMPTY_QUERY}</h2>\n      <div>${emptyQueryIcon}</div>\n    `;\n  }\n\n  private get emptyCollectionTemplate(): TemplateResult {\n    return html`\n      <h2 class=\"title\">${EmptyPlaceholder.MESSAGE_NO_VIEWABLE_MEMBERS}</h2>\n      <div>${nullResultIcon}</div>\n    `;\n  }\n\n  private get noResultsTemplate(): TemplateResult {\n    return html`\n      <h2 class=\"title\">\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    return html`\n      <h2 class=\"title\">${EmptyPlaceholder.MESSAGE_QUERY_ERROR}</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    return html`\n      <h2 class=\"title\">${EmptyPlaceholder.MESSAGE_COLLECTION_ERROR}</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(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"]}

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/language-code-handler/language-code-handler.d.ts

@@ -1,37 +1,37 @@
-export interface LanguageCodeHandlerInterface {
-    /**
-     * This takes a list of codes in the format `en-us|en|en-gb` and
-     * returns the first language code in the list.
-     *
-     * The codes in the string should always represent the same language name.
-     * eg `en-us`, `en-gb`, and `en` should always be "English"
-     *
-     * @param languageCodes
-     */
-    getLanguageNameFromCodeString(languageCodes: string): string;
-    /**
-     * This creates a serialized string of language codes for the given language.
-     *
-     * eg. `English` becomes `en-us|en|en-gb|.....`
-     *
-     * @param languageName
-     */
-    getCodeStringFromLanguageName(languageName: string): string;
-    /**
-     * Get an array of langauge codes from a serialized string.
-     *
-     * eg. `en-us|en|en-gb` becomes `['en-us', 'en', 'en-gb']`
-     *
-     * @param languageCodes
-     */
-    getCodeArrayFromCodeString(languageCodes: string): string[];
-}
-export declare class LanguageCodeHandler implements LanguageCodeHandlerInterface {
-    private delimeter;
-    /** @inheritdoc */
-    getLanguageNameFromCodeString(languageCodes: string): string;
-    /** @inheritdoc */
-    getCodeStringFromLanguageName(languageName: string): string;
-    /** @inheritdoc */
-    getCodeArrayFromCodeString(languageCodes: string): string[];
-}
+export interface LanguageCodeHandlerInterface {
+    /**
+     * This takes a list of codes in the format `en-us|en|en-gb` and
+     * returns the first language code in the list.
+     *
+     * The codes in the string should always represent the same language name.
+     * eg `en-us`, `en-gb`, and `en` should always be "English"
+     *
+     * @param languageCodes
+     */
+    getLanguageNameFromCodeString(languageCodes: string): string;
+    /**
+     * This creates a serialized string of language codes for the given language.
+     *
+     * eg. `English` becomes `en-us|en|en-gb|.....`
+     *
+     * @param languageName
+     */
+    getCodeStringFromLanguageName(languageName: string): string;
+    /**
+     * Get an array of langauge codes from a serialized string.
+     *
+     * eg. `en-us|en|en-gb` becomes `['en-us', 'en', 'en-gb']`
+     *
+     * @param languageCodes
+     */
+    getCodeArrayFromCodeString(languageCodes: string): string[];
+}
+export declare class LanguageCodeHandler implements LanguageCodeHandlerInterface {
+    private delimeter;
+    /** @inheritdoc */
+    getLanguageNameFromCodeString(languageCodes: string): string;
+    /** @inheritdoc */
+    getCodeStringFromLanguageName(languageName: string): string;
+    /** @inheritdoc */
+    getCodeArrayFromCodeString(languageCodes: string): string[];
+}