@internetarchive/collection-browser 0.4.19 → 1.0.0

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

@@ -1,6 +1,7 @@
 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);
@@ -94,69 +95,58 @@ let ToggleSwitch = class ToggleSwitch extends LitElement {
         const knobColor = css `var(--knobColor, white)`;
         const knobTransitionDuration = css `var(--knobTransitionDuration, 0.25s)`;
         const knobTransitionFn = css `var(--knobTransitionFn, ease)`;
-        return css `
-      #container {
-        display: inline-flex;
-        align-items: center;
-        flex-wrap: nowrap;
-        font-size: ${labelFontSize};
-      }
-
-      #switch-button {
-        width: ${switchWidth};
-        height: ${switchHeight};
-        margin: 0 ${switchMarginRight} 0 ${switchMarginLeft};
-        padding: 0;
-        border: ${switchBorderWidth} solid ${switchBorderColor};
-        border-radius: ${switchHeight};
-        box-sizing: content-box;
-        background: ${switchBgColor};
-        appearance: none;
-        cursor: pointer;
-      }
-
-      #switch-button.left #knob {
-        transform: translateX(0);
-      }
+        return [
+            srOnlyStyle,
+            css `
+        #container {
+          display: inline-flex;
+          align-items: center;
+          flex-wrap: nowrap;
+          font-size: ${labelFontSize};
+        }
 
-      #switch-button.right #knob {
-        transform: translateX(calc(${switchWidth} - ${switchHeight}));
-      }
+        #switch-button {
+          width: ${switchWidth};
+          height: ${switchHeight};
+          margin: 0 ${switchMarginRight} 0 ${switchMarginLeft};
+          padding: 0;
+          border: ${switchBorderWidth} solid ${switchBorderColor};
+          border-radius: ${switchHeight};
+          box-sizing: content-box;
+          background: ${switchBgColor};
+          appearance: none;
+          cursor: pointer;
+        }
 
-      #switch-button:focus-visible {
-        outline: 2px solid black;
-        outline-offset: 2px;
-      }
+        #switch-button.left #knob {
+          transform: translateX(0);
+        }
 
-      #knob {
-        display: block;
-        width: ${switchHeight};
-        height: ${switchHeight};
-        border-radius: 50%;
-        background: ${knobColor};
-        transition: transform ${knobTransitionDuration} ${knobTransitionFn};
-      }
+        #switch-button.right #knob {
+          transform: translateX(calc(${switchWidth} - ${switchHeight}));
+        }
 
-      .sr-only {
-        position: absolute !important;
-        width: 1px !important;
-        height: 1px !important;
-        margin: -1px !important;
-        padding: 0 !important;
-        border: 0 !important;
-        overflow: hidden !important;
-        white-space: nowrap !important;
-        clip: rect(1px, 1px, 1px, 1px) !important;
-        -webkit-clip-path: inset(50%) !important;
-        clip-path: inset(50%) !important;
-      }
+        #switch-button:focus-visible {
+          outline: 2px solid black;
+          outline-offset: 2px;
+        }
 
-      @media (prefers-reduced-motion: reduce) {
         #knob {
-          transition-duration: 0.001s !important; /* Imperceptibly fast */
+          display: block;
+          width: ${switchHeight};
+          height: ${switchHeight};
+          border-radius: 50%;
+          background: ${knobColor};
+          transition: transform ${knobTransitionDuration} ${knobTransitionFn};
         }
-      }
-    `;
+
+        @media (prefers-reduced-motion: reduce) {
+          #knob {
+            transition-duration: 0.001s !important; /* Imperceptibly fast */
+          }
+        }
+      `,
+        ];
     }
 };
 __decorate([

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';\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 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      .sr-only {\n        position: absolute !important;\n        width: 1px !important;\n        height: 1px !important;\n        margin: -1px !important;\n        padding: 0 !important;\n        border: 0 !important;\n        overflow: hidden !important;\n        white-space: nowrap !important;\n        clip: rect(1px, 1px, 1px, 1px) !important;\n        -webkit-clip-path: inset(50%) !important;\n        clip-path: inset(50%) !important;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        #knob {\n          transition-duration: 0.001s !important; /* Imperceptibly fast */\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

@@ -75,5 +75,5 @@ export declare class CollectionFacets extends LitElement {
      * Generate the list template for each bucket in a facet group
      */
     private getFacetTemplate;
-    static get styles(): import("lit").CSSResult;
+    static get styles(): import("lit").CSSResult[];
 }

package/dist/src/collection-facets.js

@@ -13,6 +13,7 @@ import './collection-facets/more-facets-content';
 import './collection-facets/facets-template';
 import './collection-facets/facet-tombstone-row';
 import { analyticsActions, analyticsCategories, } from './utils/analytics-events';
+import { srOnlyStyle } from './styles/sr-only';
 let CollectionFacets = class CollectionFacets extends LitElement {
     constructor() {
         super(...arguments);
@@ -36,15 +37,18 @@ let CollectionFacets = class CollectionFacets extends LitElement {
         this.allowedFacetCount = 6;
     }
     render() {
+        const datePickerLabelId = 'date-picker-label';
         return html `
       <div id="container" class="${this.facetsLoading ? 'loading' : ''}">
         ${this.showHistogramDatePicker &&
             (this.fullYearsHistogramAggregation || this.fullYearAggregationLoading)
             ? html `
-              <div class="facet-group">
-                <h1>Year Published</h1>
+              <section class="facet-group" aria-labelledby=${datePickerLabelId}>
+                <h3 id=${datePickerLabelId}>
+                  Year Published <span class="sr-only">range filter</span>
+                </h3>
                 ${this.histogramTemplate}
-              </div>
+              </section>
             `
             : nothing}
         ${this.mergedFacets.map(facetGroup => this.getFacetGroupTemplate(facetGroup))}
@@ -241,23 +245,26 @@ let CollectionFacets = class CollectionFacets extends LitElement {
         const collapser = html `
       <span class="collapser ${isOpen ? 'open' : ''}"> ${chevronIcon} </span>
     `;
-        return html `
-      <div class="facet-group ${this.collapsableFacets ? 'mobile' : ''}">
-        <div class="facet-group-header">
-          <h1
-            @click=${() => {
+        const toggleCollapsed = () => {
             const newOpenFacets = { ...this.openFacets };
             newOpenFacets[key] = !isOpen;
             this.openFacets = newOpenFacets;
-        }}
-            @keyup=${() => {
-            const newOpenFacets = { ...this.openFacets };
-            newOpenFacets[key] = !isOpen;
-            this.openFacets = newOpenFacets;
-        }}
+        };
+        const headerId = `facet-group-header-label-${facetGroup.key}`;
+        return html `
+      <section
+        class="facet-group ${this.collapsableFacets ? 'mobile' : ''}"
+        aria-labelledby=${headerId}
+      >
+        <div class="facet-group-header">
+          <h3
+            id=${headerId}
+            @click=${toggleCollapsed}
+            @keyup=${toggleCollapsed}
           >
             ${this.collapsableFacets ? collapser : nothing} ${facetGroup.title}
-          </h1>
+            <span class="sr-only">filters</span>
+          </h3>
         </div>
         <div class="facet-group-content ${isOpen ? 'open' : ''}">
           ${this.facetsLoading
@@ -267,7 +274,7 @@ let CollectionFacets = class CollectionFacets extends LitElement {
                 ${this.searchMoreFacetsLink(facetGroup)}
               `}
         </div>
-      </div>
+      </section>
     `;
     }
     getTombstoneFacetGroupTemplate() {
@@ -350,6 +357,10 @@ let CollectionFacets = class CollectionFacets extends LitElement {
         (_b = this.modalManager) === null || _b === void 0 ? void 0 : _b.showModal({
             config,
             customModalContent,
+            userClosedModalCallback: () => {
+                var _a;
+                (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.classList.remove('more-search-facets');
+            },
         });
     }
     /**
@@ -374,88 +385,91 @@ let CollectionFacets = class CollectionFacets extends LitElement {
     `;
     }
     static get styles() {
-        return css `
-      #container.loading {
-        opacity: 0.5;
-      }
+        return [
+            srOnlyStyle,
+            css `
+        #container.loading {
+          opacity: 0.5;
+        }
 
-      .histogram-loading-indicator {
-        width: 100%;
-        height: 2.25rem;
-        margin-top: 1.75rem;
-        font-size: 1.4rem;
-        text-align: center;
-      }
+        .histogram-loading-indicator {
+          width: 100%;
+          height: 2.25rem;
+          margin-top: 1.75rem;
+          font-size: 1.4rem;
+          text-align: center;
+        }
 
-      .collapser {
-        display: inline-block;
-        cursor: pointer;
-        width: 10px;
-        height: 10px;
-      }
+        .collapser {
+          display: inline-block;
+          cursor: pointer;
+          width: 10px;
+          height: 10px;
+        }
 
-      .collapser svg {
-        transition: transform 0.2s ease-in-out;
-      }
+        .collapser svg {
+          transition: transform 0.2s ease-in-out;
+        }
 
-      .collapser.open svg {
-        transform: rotate(90deg);
-      }
+        .collapser.open svg {
+          transform: rotate(90deg);
+        }
 
-      .facet-group:not(:last-child) {
-        margin-bottom: 2rem;
-      }
+        .facet-group:not(:last-child) {
+          margin-bottom: 2rem;
+        }
 
-      .facet-group h1 {
-        margin-bottom: 0.7rem;
-      }
+        .facet-group h3 {
+          margin-bottom: 0.7rem;
+        }
 
-      .facet-group.mobile h1 {
-        cursor: pointer;
-      }
+        .facet-group.mobile h3 {
+          cursor: pointer;
+        }
 
-      .facet-group-header {
-        display: flex;
-        margin-bottom: 0.7rem;
-        justify-content: space-between;
-        border-bottom: 1px solid rgb(232, 232, 232);
-      }
+        .facet-group-header {
+          display: flex;
+          margin-bottom: 0.7rem;
+          justify-content: space-between;
+          border-bottom: 1px solid rgb(232, 232, 232);
+        }
 
-      .facet-group-content {
-        transition: max-height 0.2s ease-in-out;
-      }
+        .facet-group-content {
+          transition: max-height 0.2s ease-in-out;
+        }
 
-      .facet-group.mobile .facet-group-content {
-        max-height: 0;
-        overflow: hidden;
-      }
+        .facet-group.mobile .facet-group-content {
+          max-height: 0;
+          overflow: hidden;
+        }
 
-      .facet-group.mobile .facet-group-content.open {
-        max-height: 2000px;
-      }
+        .facet-group.mobile .facet-group-content.open {
+          max-height: 2000px;
+        }
 
-      h1 {
-        font-size: 1.4rem;
-        font-weight: 200
-        padding-bottom: 3px;
-        margin: 0;
-      }
+        h3 {
+          font-size: 1.4rem;
+          font-weight: 200
+          padding-bottom: 3px;
+          margin: 0;
+        }
 
-      .more-link {
-        font-size: 1.2rem;
-        text-decoration: none;
-        padding: 0;
-        background: inherit;
-        border: 0;
-        color: var(--ia-theme-link-color, #4b64ff);
-        cursor: pointer;
-      }
+        .more-link {
+          font-size: 1.2rem;
+          text-decoration: none;
+          padding: 0;
+          background: inherit;
+          border: 0;
+          color: var(--ia-theme-link-color, #4b64ff);
+          cursor: pointer;
+        }
 
-      .sorting-icon {
-        height: 15px;
-        cursor: pointer;
-      }
-    `;
+        .sorting-icon {
+          height: 15px;
+          cursor: pointer;
+        }
+      `,
+        ];
     }
 };
 __decorate([

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

@@ -1 +1 @@
-{"version":3,"file":"collection-facets.js","sourceRoot":"","sources":["../../src/collection-facets.ts"],"names":[],"mappings":";AAAA,yCAAyC;AACzC,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,EAEV,OAAO,GAER,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAS5C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,wCAAwC,CAAC;AAEhD,OAAO,EACL,WAAW,GAEZ,MAAM,gCAAgC,CAAC;AAKxC,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAKL,iBAAiB,EACjB,WAAW,EACX,wBAAwB,EACxB,0BAA0B,EAE1B,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,UAAU,CAAC;AAClB,OAAO,yCAAyC,CAAC;AACjD,OAAO,qCAAqC,CAAC;AAC7C,OAAO,yCAAyC,CAAC;AACjD,OAAO,EACL,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,0BAA0B,CAAC;AAGlC,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAAhD;;QAa+B,qBAAgB,GAAG,IAAI,CAAC;QAExB,kBAAa,GAAG,KAAK,CAAC;QAEtB,+BAA0B,GAAG,KAAK,CAAC;QAInC,sBAAiB,GAAG,KAAK,CAAC;QAE1B,4BAAuB,GAAG,KAAK,CAAC;QAwBpD,eAAU,GAAiC;YAClD,OAAO,EAAE,KAAK;YACd,OAAO,EAAE,KAAK;YACd,SAAS,EAAE,KAAK;YAChB,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,KAAK;YACd,UAAU,EAAE,KAAK;YACjB,IAAI,EAAE,KAAK;SACZ,CAAC;QAEF;;WAEG;QACK,sBAAiB,GAAG,CAAC,CAAC;IA0ehC,CAAC;IAxeC,MAAM;QACJ,OAAO,IAAI,CAAA;mCACoB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;UAC5D,IAAI,CAAC,uBAAuB;YAC9B,CAAC,IAAI,CAAC,6BAA6B,IAAI,IAAI,CAAC,0BAA0B,CAAC;YACrE,CAAC,CAAC,IAAI,CAAA;;;kBAGE,IAAI,CAAC,iBAAiB;;aAE3B;YACH,CAAC,CAAC,OAAO;UACT,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CACnC,IAAI,CAAC,qBAAqB,CAAC,UAAU,CAAC,CACvC;;KAEJ,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,EAAE;YACjC,IAAI,CAAC,0BAA0B,EAAE,CAAC;SACnC;IACH,CAAC;IAED,gCAAgC;IACxB,0BAA0B;QAChC,MAAM,KAAK,GAAG,IAAI,WAAW,CAAiB,eAAe,EAAE;YAC7D,MAAM,EAAE,IAAI,CAAC,cAAc;SAC5B,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,IAAY,gCAAgC;;QAC1C,OAAO,MAAA,IAAI,CAAC,YAAY,0CAAE,cAAc,CAAC;IAC3C,CAAC;IAED,IAAY,iBAAiB;QAC3B,MAAM,EAAE,6BAA6B,EAAE,GAAG,IAAI,CAAC;QAC/C,OAAO,IAAI,CAAC,0BAA0B;YACpC,CAAC,CAAC,IAAI,CAAA,yDAAyD,CAAC,iBAAiB;YACjF,CAAC,CAAC,IAAI,CAAA;;uBAEW,6BAA6B,aAA7B,6BAA6B,uBAA7B,6BAA6B,CAAE,gBAAgB;uBAC/C,6BAA6B,aAA7B,6BAA6B,uBAA7B,6BAA6B,CAAE,eAAe;+BACtC,IAAI,CAAC,eAAe;+BACpB,IAAI,CAAC,eAAe;2BACxB,GAAG;;qBAET,GAAG;oBACJ,6BAA6B,aAA7B,6BAA6B,uBAA7B,6BAA6B,CAAE,OAAmB;yCAC7B,IAAI,CAAC,yBAAyB;;SAE9D,CAAC;IACR,CAAC;IAEO,yBAAyB,CAC/B,CAGE;QAEF,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QACtC,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,2BAA2B,EAAE;YACzD,MAAM,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;SAC7B,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,IAAY,YAAY;QACtB,MAAM,WAAW,GAAiB,EAAE,CAAC;QAErC,iBAAiB,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;;YACnC,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CACtD,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,KAAK,QAAQ,CAChC,CAAC;YACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAC1D,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,KAAK,QAAQ,CAChC,CAAC;YAEF,iFAAiF;YACjF,IAAI,kBAAkB,IAAI,CAAC,mBAAmB,EAAE;gBAC9C,WAAW,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;gBACrC,OAAO;aACR;YAED,wEAAwE;YACxE,IAAI,CAAC,mBAAmB;gBAAE,OAAO;YAEjC,8EAA8E;YAC9E,MAAM,UAAU,GAAG,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,mBAAmB,CAAC;YAE7D,4CAA4C;YAC5C,IAAI,gBAAgB,GAClB,MAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;gBACvC,MAAM,cAAc,GAAG,mBAAmB,CAAC,OAAO,CAAC,IAAI,CACrD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,MAAM,CAAC,GAAG,CAC1B,CAAC;gBACF,OAAO,cAAc;oBACnB,CAAC,CAAC;wBACE,GAAG,MAAM;wBACT,KAAK,EAAE,cAAc,CAAC,KAAK;qBAC5B;oBACH,CAAC,CAAC,MAAM,CAAC;YACb,CAAC,CAAC,mCAAI,EAAE,CAAC;YAEX,uDAAuD;YACvD,mBAAmB,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;gBAC3C,MAAM,cAAc,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,MAAM,CAAC,GAAG,CAAC,CAAC;gBACxE,IAAI,cAAc;oBAAE,OAAO;gBAC3B,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAChC,CAAC,CAAC,CAAC;YAEH,gEAAgE;YAChE,IAAI,QAAQ,KAAK,SAAS,EAAE;gBAC1B,gBAAgB,GAAG,gBAAgB,CAAC,MAAM,CACxC,MAAM,CAAC,EAAE,CAAC,0BAA0B,CAAC,MAAM,CAAC,GAAsB,CAAC,CACpE,CAAC;aACH;YAED;;;;;eAKG;YACH,IAAI,iBAAiB,GAAG,MAAA,MAAM,CAAC,IAAI,CACjC,CAAC,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,OAAc,KAAI,EAAE,CAC1C,0CAAE,MAAM,CAAC;YACV,IAAI,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,EAAE;gBAC9C,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAAC,8BAA8B;aAC3E;YAED,2DAA2D;YAC3D,UAAU,CAAC,OAAO,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC;YAEnE,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;QAEH,OAAO,WAAW,CAAC;IACrB,CAAC;IAED;;;OAGG;IACH,IAAY,mBAAmB;QAC7B,IAAI,CAAC,IAAI,CAAC,cAAc;YAAE,OAAO,EAAE,CAAC;QAEpC,MAAM,WAAW,GAAiB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,GAAG,CACvE,CAAC,CAAC,GAAG,EAAE,cAAc,CAAC,EAAE,EAAE;YACxB,MAAM,MAAM,GAAG,GAAkB,CAAC;YAClC,MAAM,KAAK,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;YAElC,MAAM,OAAO,GAAkB,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,GAAG,CAC/D,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,EAAE;;gBACrB,IAAI,WAAW,GAAW,KAAK,CAAC;gBAChC,2DAA2D;gBAC3D,IAAI,MAAM,KAAK,SAAS,EAAE;oBACxB,WAAW;wBACT,MAAA,wBAAwB,CAAC,KAAwB,CAAC,mCAAI,KAAK,CAAC;iBAC/D;gBACD,OAAO;oBACL,WAAW;oBACX,GAAG,EAAE,KAAK;oBACV,KAAK,EAAE,SAAS,CAAC,KAAK;oBACtB,KAAK,EAAE,SAAS,CAAC,KAAK;iBACvB,CAAC;YACJ,CAAC,CACF,CAAC;YAEF,OAAO;gBACL,KAAK;gBACL,GAAG,EAAE,MAAM;gBACX,OAAO;aACR,CAAC;QACJ,CAAC,CACF,CAAC;QAEF,OAAO,WAAW,CAAC;IACrB,CAAC;IAED;;OAEG;IACH,IAAY,sBAAsB;;QAChC,MAAM,WAAW,GAAiB,EAAE,CAAC;QACrC,MAAM,CAAC,OAAO,CAAC,MAAA,IAAI,CAAC,YAAY,mCAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,WAAW,CAAC,EAAE,EAAE;YACrE,4EAA4E;YAC5E,IAAI,GAAG,KAAK,gBAAgB;gBAAE,OAAO;YAErC,MAAM,MAAM,GAAG,GAAkB,CAAC;YAClC,MAAM,KAAK,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;YAClC,IAAI,CAAC,KAAK;gBAAE,OAAO;YAEnB,IAAI,aAAa,GAAG,WAAW,CAAC,gBAAgB,CAC9C,gBAAgB,CAAC,MAAM,CAAC,CACb,CAAC;YAEd,IAAI,MAAM,KAAK,YAAY,EAAE;gBAC3B,oFAAoF;gBACpF,aAAa,GAAG,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,MAAM,CAAC,MAAM,CAAC,EAAE;;oBAC7C,MAAM,SAAS,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,GAAG,0CAAE,QAAQ,EAAE,CAAC;oBAC1C,OAAO,CACL,CAAC,qBAAqB,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,UAAU,CAAC,MAAM,CAAC,CAAA,CACpE,CAAC;gBACJ,CAAC,CAAC,CAAC;aACJ;YAED,MAAM,YAAY,GAAkB,aAAa,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;;gBAC7D,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC;gBAC7B,IAAI,WAAW,GAAG,GAAG,MAAM,CAAC,GAAG,EAAE,CAAC;gBAClC,kEAAkE;gBAClE,IAAI,MAAM,KAAK,SAAS,EAAE;oBACxB,WAAW;wBACT,MAAA,wBAAwB,CAAC,MAAM,CAAC,GAAsB,CAAC,mCACvD,GAAG,MAAM,CAAC,GAAG,EAAE,CAAC;iBACnB;gBACD,OAAO;oBACL,WAAW;oBACX,GAAG,EAAE,GAAG,SAAS,EAAE;oBACnB,KAAK,EAAE,MAAM,CAAC,SAAS;oBACvB,KAAK,EAAE,MAAM;iBACd,CAAC;YACJ,CAAC,CAAC,CAAC;YACH,MAAM,KAAK,GAAe;gBACxB,KAAK;gBACL,GAAG,EAAE,MAAM;gBACX,OAAO,EAAE,YAAY;aACtB,CAAC;YACF,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC,CAAC,CAAC;QACH,OAAO,WAAW,CAAC;IACrB,CAAC;IAED;;;OAGG;IACK,qBAAqB,CAC3B,UAAsB;QAEtB,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,UAAU,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,OAAO,CAAC;QAE3E,MAAM,EAAE,GAAG,EAAE,GAAG,UAAU,CAAC;QAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;QACpC,MAAM,SAAS,GAAG,IAAI,CAAA;+BACK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,WAAW;KAC/D,CAAC;QAEF,OAAO,IAAI,CAAA;gCACiB,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;;qBAGjD,GAAG,EAAE;YACZ,MAAM,aAAa,GAAG,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YAC7C,aAAa,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC;YAC7B,IAAI,CAAC,UAAU,GAAG,aAAa,CAAC;QAClC,CAAC;qBACQ,GAAG,EAAE;YACZ,MAAM,aAAa,GAAG,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YAC7C,aAAa,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC;YAC7B,IAAI,CAAC,UAAU,GAAG,aAAa,CAAC;QAClC,CAAC;;cAEC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,IAAI,UAAU,CAAC,KAAK;;;0CAGpC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;YAClD,IAAI,CAAC,aAAa;YAClB,CAAC,CAAC,IAAI,CAAC,8BAA8B,EAAE;YACvC,CAAC,CAAC,IAAI,CAAA;kBACA,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC;kBACjC,IAAI,CAAC,oBAAoB,CAAC,UAAU,CAAC;eACxC;;;KAGV,CAAC;IACJ,CAAC;IAEO,8BAA8B;QACpC,6BAA6B;QAC7B,OAAO,IAAI,CAAA;QACP,GAAG,CACH,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EACnB,GAAG,EAAE,CAAC,IAAI,CAAA,6CAA6C,CACxD;KACF,CAAC;IACJ,CAAC;IAED;;;;OAIG;IACK,oBAAoB,CAC1B,UAAsB;QAEtB,8CAA8C;QAC9C,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAC1B,OAAO,OAAO,CAAC;SAChB;QAED,gDAAgD;QAChD,IAAI,UAAU,CAAC,GAAG,KAAK,SAAS,EAAE;YAChC,OAAO,OAAO,CAAC;SAChB;QAED,6EAA6E;QAC7E,IAAI,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC,iBAAiB,EAAE;YACnE,OAAO,OAAO,CAAC;SAChB;QAED,sEAAsE;QACtE,MAAM,SAAS,GAAG,gBAAgB,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;QAEnD,OAAO,IAAI,CAAA;;eAEA,GAAG,EAAE;;YACZ,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;YAChD,MAAA,IAAI,CAAC,gBAAgB,0CAAE,SAAS,CAAC;gBAC/B,QAAQ,EAAE,mBAAmB,CAAC,OAAO;gBACrC,MAAM,EAAE,gBAAgB,CAAC,mBAAmB;gBAC5C,KAAK,EAAE,UAAU,CAAC,GAAG;aACtB,CAAC,CAAC;YACH,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,gBAAgB,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC,CAC9D,CAAC;QACJ,CAAC;;;cAGO,CAAC;IACb,CAAC;IAED,KAAK,CAAC,mBAAmB,CACvB,UAAsB,EACtB,QAA6B;;QAE7B,MAAM,YAAY,GAAG,UAAU,CAAC,GAAG,CAAC;QAEpC,MAAM,kBAAkB,GAAG,IAAI,CAAA;;4BAEP,IAAI,CAAC,gBAAgB;oBAC7B,UAAU,CAAC,GAAG;+BACH,YAAY;iBAC1B,IAAI,CAAC,KAAK;qBACN,IAAI,CAAC,SAAS;wBACX,IAAI,CAAC,YAAY;yBAChB,IAAI,CAAC,aAAa;sBACrB,IAAI,CAAC,UAAU;+BACN,IAAI,CAAC,mBAAmB;0BAC7B,IAAI,CAAC,cAAc;oBACzB,QAAQ;yBACH,CAAC,CAAc,EAAE,EAAE;YAClC,MAAM,KAAK,GAAG,IAAI,WAAW,CAAiB,eAAe,EAAE;gBAC7D,MAAM,EAAE,CAAC,CAAC,MAAM;gBAChB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CAAC;YACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC;;;KAGJ,CAAC;QAEF,MAAM,MAAM,GAAG,IAAI,WAAW,CAAC;YAC7B,SAAS,EAAE,MAAM;YACjB,WAAW,EAAE,SAAS;YACtB,cAAc,EAAE,KAAK;YACrB,oBAAoB,EAAE,IAAI;YAC1B,KAAK,EAAE,IAAI,CAAA,gBAAgB;SAC5B,CAAC,CAAC;QACH,MAAA,IAAI,CAAC,YAAY,0CAAE,SAAS,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;QACvD,MAAA,IAAI,CAAC,YAAY,0CAAE,SAAS,CAAC;YAC3B,MAAM;YACN,kBAAkB;SACnB,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACK,gBAAgB,CAAC,UAAsB;QAC7C,OAAO,IAAI,CAAA;;sBAEO,UAAU;0BACN,IAAI,CAAC,cAAc;oBACzB,MAAM;+BACK,IAAI,CAAC,mBAAmB;iCACtB,CAAC,CAAc,EAAE,EAAE;YAC1C,MAAM,KAAK,GAAG,IAAI,WAAW,CAAiB,eAAe,EAAE;gBAC7D,MAAM,EAAE,CAAC,CAAC,MAAM;gBAChB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CAAC;YACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC;;KAEJ,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiFT,CAAC;IACJ,CAAC;CACF,CAAA;AAriB6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAwC;AAEvC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAyB;AAExB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAA4C;AAE3C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uEAA6C;AAE5C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAA0B;AAEzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAA0B;AAExB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0DAAyB;AAExB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDAAuB;AAEtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oEAAoC;AAEpC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAiC;AAE/B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2DAA2B;AAE1B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iEAAiC;AAEjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAgB;AAEf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAuB;AAGlD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;sDACR;AAGrC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;wDACE;AAG/C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;gEACY;AAGzD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;0DACA;AAG7C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;0DACA;AAG7C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6DACM;AAE1C;IAAR,KAAK,EAAE;oDAQN;AAvDS,gBAAgB;IAD5B,aAAa,CAAC,mBAAmB,CAAC;GACtB,gBAAgB,CAsiB5B;SAtiBY,gBAAgB","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport {\n  css,\n  html,\n  LitElement,\n  PropertyValues,\n  nothing,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport type {\n  Aggregation,\n  AggregationSortType,\n  Bucket,\n  FilterMap,\n  SearchServiceInterface,\n  SearchType,\n} from '@internetarchive/search-service';\nimport '@internetarchive/histogram-date-range';\nimport '@internetarchive/feature-feedback';\nimport '@internetarchive/collection-name-cache';\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport {\n  ModalConfig,\n  ModalManagerInterface,\n} from '@internetarchive/modal-manager';\nimport type { FeatureFeedbackServiceInterface } from '@internetarchive/feature-feedback';\nimport type { RecaptchaManagerInterface } from '@internetarchive/recaptcha-manager';\nimport type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';\nimport type { SharedResizeObserverInterface } from '@internetarchive/shared-resize-observer';\nimport chevronIcon from './assets/img/icons/chevron';\nimport {\n  FacetOption,\n  SelectedFacets,\n  FacetGroup,\n  FacetBucket,\n  facetDisplayOrder,\n  facetTitles,\n  lendingFacetDisplayNames,\n  lendingFacetKeysVisibility,\n  LendingFacetKey,\n  suppressedCollections,\n  defaultFacetSort,\n} from './models';\nimport './collection-facets/more-facets-content';\nimport './collection-facets/facets-template';\nimport './collection-facets/facet-tombstone-row';\nimport {\n  analyticsActions,\n  analyticsCategories,\n} from './utils/analytics-events';\n\n@customElement('collection-facets')\nexport class CollectionFacets extends LitElement {\n  @property({ type: Object }) searchService?: SearchServiceInterface;\n\n  @property({ type: String }) searchType?: SearchType;\n\n  @property({ type: Object }) aggregations?: Record<string, Aggregation>;\n\n  @property({ type: Object }) fullYearsHistogramAggregation?: Aggregation;\n\n  @property({ type: String }) minSelectedDate?: string;\n\n  @property({ type: String }) maxSelectedDate?: string;\n\n  @property({ type: Boolean }) moreLinksVisible = true;\n\n  @property({ type: Boolean }) facetsLoading = false;\n\n  @property({ type: Boolean }) fullYearAggregationLoading = false;\n\n  @property({ type: Object }) selectedFacets?: SelectedFacets;\n\n  @property({ type: Boolean }) collapsableFacets = false;\n\n  @property({ type: Boolean }) showHistogramDatePicker = false;\n\n  @property({ type: String }) query?: string;\n\n  @property({ type: Object }) filterMap?: FilterMap;\n\n  @property({ type: Object, attribute: false })\n  modalManager?: ModalManagerInterface;\n\n  @property({ type: Object, attribute: false })\n  resizeObserver?: SharedResizeObserverInterface;\n\n  @property({ type: Object, attribute: false })\n  featureFeedbackService?: FeatureFeedbackServiceInterface;\n\n  @property({ type: Object, attribute: false })\n  recaptchaManager?: RecaptchaManagerInterface;\n\n  @property({ type: Object, attribute: false })\n  analyticsHandler?: AnalyticsManagerInterface;\n\n  @property({ type: Object, attribute: false })\n  collectionNameCache?: CollectionNameCacheInterface;\n\n  @state() openFacets: Record<FacetOption, boolean> = {\n    subject: false,\n    lending: false,\n    mediatype: false,\n    language: false,\n    creator: false,\n    collection: false,\n    year: false,\n  };\n\n  /**\n   * Maximum # of facet buckets to render per facet group\n   */\n  private allowedFacetCount = 6;\n\n  render() {\n    return html`\n      <div id=\"container\" class=\"${this.facetsLoading ? 'loading' : ''}\">\n        ${this.showHistogramDatePicker &&\n        (this.fullYearsHistogramAggregation || this.fullYearAggregationLoading)\n          ? html`\n              <div class=\"facet-group\">\n                <h1>Year Published</h1>\n                ${this.histogramTemplate}\n              </div>\n            `\n          : nothing}\n        ${this.mergedFacets.map(facetGroup =>\n          this.getFacetGroupTemplate(facetGroup)\n        )}\n      </div>\n    `;\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('selectedFacets')) {\n      this.dispatchFacetsChangedEvent();\n    }\n  }\n\n  // TODO: want to fire analytics?\n  private dispatchFacetsChangedEvent() {\n    const event = new CustomEvent<SelectedFacets>('facetsChanged', {\n      detail: this.selectedFacets,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private get currentYearsHistogramAggregation(): Aggregation | undefined {\n    return this.aggregations?.year_histogram;\n  }\n\n  private get histogramTemplate() {\n    const { fullYearsHistogramAggregation } = this;\n    return this.fullYearAggregationLoading\n      ? html`<div class=\"histogram-loading-indicator\">&hellip;</div>` // Ellipsis block\n      : html`\n          <histogram-date-range\n            .minDate=${fullYearsHistogramAggregation?.first_bucket_key}\n            .maxDate=${fullYearsHistogramAggregation?.last_bucket_key}\n            .minSelectedDate=${this.minSelectedDate}\n            .maxSelectedDate=${this.maxSelectedDate}\n            .updateDelay=${100}\n            missingDataMessage=\"...\"\n            .width=${180}\n            .bins=${fullYearsHistogramAggregation?.buckets as number[]}\n            @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}\n          ></histogram-date-range>\n        `;\n  }\n\n  private histogramDateRangeUpdated(\n    e: CustomEvent<{\n      minDate: string;\n      maxDate: string;\n    }>\n  ) {\n    const { minDate, maxDate } = e.detail;\n    const event = new CustomEvent('histogramDateRangeUpdated', {\n      detail: { minDate, maxDate },\n    });\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * Combines the selected facets with the aggregations to create a single list of facets\n   */\n  private get mergedFacets(): FacetGroup[] {\n    const facetGroups: FacetGroup[] = [];\n\n    facetDisplayOrder.forEach(facetKey => {\n      const selectedFacetGroup = this.selectedFacetGroups.find(\n        group => group.key === facetKey\n      );\n      const aggregateFacetGroup = this.aggregationFacetGroups.find(\n        group => group.key === facetKey\n      );\n\n      // if the user selected a facet, but it's not in the aggregation, we add it as-is\n      if (selectedFacetGroup && !aggregateFacetGroup) {\n        facetGroups.push(selectedFacetGroup);\n        return;\n      }\n\n      // if we don't have an aggregate facet group, don't add this to the list\n      if (!aggregateFacetGroup) return;\n\n      // start with either the selected group if we have one, or the aggregate group\n      const facetGroup = selectedFacetGroup ?? aggregateFacetGroup;\n\n      // attach the counts to the selected buckets\n      let bucketsWithCount =\n        selectedFacetGroup?.buckets.map(bucket => {\n          const selectedBucket = aggregateFacetGroup.buckets.find(\n            b => b.key === bucket.key\n          );\n          return selectedBucket\n            ? {\n                ...bucket,\n                count: selectedBucket.count,\n              }\n            : bucket;\n        }) ?? [];\n\n      // append any additional buckets that were not selected\n      aggregateFacetGroup.buckets.forEach(bucket => {\n        const existingBucket = bucketsWithCount.find(b => b.key === bucket.key);\n        if (existingBucket) return;\n        bucketsWithCount.push(bucket);\n      });\n\n      // For lending facets, only include a specific subset of buckets\n      if (facetKey === 'lending') {\n        bucketsWithCount = bucketsWithCount.filter(\n          bucket => lendingFacetKeysVisibility[bucket.key as LendingFacetKey]\n        );\n      }\n\n      /**\n       * render limited facet items on page facet area\n       *\n       * - by-default we are showing 6 items\n       * - additionally want to show all items (selected/suppressed) in page facet area\n       */\n      let allowedFacetCount = Object.keys(\n        (selectedFacetGroup?.buckets as []) || []\n      )?.length;\n      if (allowedFacetCount < this.allowedFacetCount) {\n        allowedFacetCount = this.allowedFacetCount; // splice start index from 0th\n      }\n\n      // splice how many items we want to show in page facet area\n      facetGroup.buckets = bucketsWithCount.splice(0, allowedFacetCount);\n\n      facetGroups.push(facetGroup);\n    });\n\n    return facetGroups;\n  }\n\n  /**\n   * Converts the selected facets to a `FacetGroup` array,\n   * which is easier to work with\n   */\n  private get selectedFacetGroups(): FacetGroup[] {\n    if (!this.selectedFacets) return [];\n\n    const facetGroups: FacetGroup[] = Object.entries(this.selectedFacets).map(\n      ([key, selectedFacets]) => {\n        const option = key as FacetOption;\n        const title = facetTitles[option];\n\n        const buckets: FacetBucket[] = Object.entries(selectedFacets).map(\n          ([value, facetData]) => {\n            let displayText: string = value;\n            // for lending facets, convert the key to a readable format\n            if (option === 'lending') {\n              displayText =\n                lendingFacetDisplayNames[value as LendingFacetKey] ?? value;\n            }\n            return {\n              displayText,\n              key: value,\n              count: facetData.count,\n              state: facetData.state,\n            };\n          }\n        );\n\n        return {\n          title,\n          key: option,\n          buckets,\n        };\n      }\n    );\n\n    return facetGroups;\n  }\n\n  /**\n   * Converts the raw `aggregations` to `FacetGroups`, which are easier to use\n   */\n  private get aggregationFacetGroups(): FacetGroup[] {\n    const facetGroups: FacetGroup[] = [];\n    Object.entries(this.aggregations ?? []).forEach(([key, aggregation]) => {\n      // the year_histogram data is in a different format so can't be handled here\n      if (key === 'year_histogram') return;\n\n      const option = key as FacetOption;\n      const title = facetTitles[option];\n      if (!title) return;\n\n      let castedBuckets = aggregation.getSortedBuckets(\n        defaultFacetSort[option]\n      ) as Bucket[];\n\n      if (option === 'collection') {\n        // we are not showing fav- collections or certain deemphasized collections in facets\n        castedBuckets = castedBuckets?.filter(bucket => {\n          const bucketKey = bucket?.key?.toString();\n          return (\n            !suppressedCollections[bucketKey] && !bucketKey?.startsWith('fav-')\n          );\n        });\n      }\n\n      const facetBuckets: FacetBucket[] = castedBuckets.map(bucket => {\n        const bucketKey = bucket.key;\n        let displayText = `${bucket.key}`;\n        // for lending facets, convert the bucket key to a readable format\n        if (option === 'lending') {\n          displayText =\n            lendingFacetDisplayNames[bucket.key as LendingFacetKey] ??\n            `${bucket.key}`;\n        }\n        return {\n          displayText,\n          key: `${bucketKey}`,\n          count: bucket.doc_count,\n          state: 'none',\n        };\n      });\n      const group: FacetGroup = {\n        title,\n        key: option,\n        buckets: facetBuckets,\n      };\n      facetGroups.push(group);\n    });\n    return facetGroups;\n  }\n\n  /**\n   * Generate the template for a facet group with a header and the collapsible\n   * chevron for the mobile view\n   */\n  private getFacetGroupTemplate(\n    facetGroup: FacetGroup\n  ): TemplateResult | typeof nothing {\n    if (!this.facetsLoading && facetGroup.buckets.length === 0) return nothing;\n\n    const { key } = facetGroup;\n    const isOpen = this.openFacets[key];\n    const collapser = html`\n      <span class=\"collapser ${isOpen ? 'open' : ''}\"> ${chevronIcon} </span>\n    `;\n\n    return html`\n      <div class=\"facet-group ${this.collapsableFacets ? 'mobile' : ''}\">\n        <div class=\"facet-group-header\">\n          <h1\n            @click=${() => {\n              const newOpenFacets = { ...this.openFacets };\n              newOpenFacets[key] = !isOpen;\n              this.openFacets = newOpenFacets;\n            }}\n            @keyup=${() => {\n              const newOpenFacets = { ...this.openFacets };\n              newOpenFacets[key] = !isOpen;\n              this.openFacets = newOpenFacets;\n            }}\n          >\n            ${this.collapsableFacets ? collapser : nothing} ${facetGroup.title}\n          </h1>\n        </div>\n        <div class=\"facet-group-content ${isOpen ? 'open' : ''}\">\n          ${this.facetsLoading\n            ? this.getTombstoneFacetGroupTemplate()\n            : html`\n                ${this.getFacetTemplate(facetGroup)}\n                ${this.searchMoreFacetsLink(facetGroup)}\n              `}\n        </div>\n      </div>\n    `;\n  }\n\n  private getTombstoneFacetGroupTemplate(): TemplateResult {\n    // Render five tombstone rows\n    return html`\n      ${map(\n        Array(5).fill(null),\n        () => html`<facet-tombstone-row></facet-tombstone-row>`\n      )}\n    `;\n  }\n\n  /**\n   * Generate the More... link button just below the facets group\n   *\n   * TODO: want to fire analytics?\n   */\n  private searchMoreFacetsLink(\n    facetGroup: FacetGroup\n  ): TemplateResult | typeof nothing {\n    // Don't render More... links for FTS searches\n    if (!this.moreLinksVisible) {\n      return nothing;\n    }\n\n    // Don't render More... links for lending facets\n    if (facetGroup.key === 'lending') {\n      return nothing;\n    }\n\n    // Don't render More... link if the number of facets < this.allowedFacetCount\n    if (Object.keys(facetGroup.buckets).length < this.allowedFacetCount) {\n      return nothing;\n    }\n\n    // We sort years in numeric order by default, rather than bucket count\n    const facetSort = defaultFacetSort[facetGroup.key];\n\n    return html`<button\n      class=\"more-link\"\n      @click=${() => {\n        this.showMoreFacetsModal(facetGroup, facetSort);\n        this.analyticsHandler?.sendEvent({\n          category: analyticsCategories.default,\n          action: analyticsActions.showMoreFacetsModal,\n          label: facetGroup.key,\n        });\n        this.dispatchEvent(\n          new CustomEvent('showMoreFacets', { detail: facetGroup.key })\n        );\n      }}\n    >\n      More...\n    </button>`;\n  }\n\n  async showMoreFacetsModal(\n    facetGroup: FacetGroup,\n    sortedBy: AggregationSortType\n  ): Promise<void> {\n    const facetAggrKey = facetGroup.key;\n\n    const customModalContent = html`\n      <more-facets-content\n        .analyticsHandler=${this.analyticsHandler}\n        .facetKey=${facetGroup.key}\n        .facetAggregationKey=${facetAggrKey}\n        .query=${this.query}\n        .filterMap=${this.filterMap}\n        .modalManager=${this.modalManager}\n        .searchService=${this.searchService}\n        .searchType=${this.searchType}\n        .collectionNameCache=${this.collectionNameCache}\n        .selectedFacets=${this.selectedFacets}\n        .sortedBy=${sortedBy}\n        @facetsChanged=${(e: CustomEvent) => {\n          const event = new CustomEvent<SelectedFacets>('facetsChanged', {\n            detail: e.detail,\n            bubbles: true,\n            composed: true,\n          });\n          this.dispatchEvent(event);\n        }}\n      >\n      </more-facets-content>\n    `;\n\n    const config = new ModalConfig({\n      bodyColor: '#fff',\n      headerColor: '#194880',\n      showHeaderLogo: false,\n      closeOnBackdropClick: true, // TODO: want to fire analytics\n      title: html`Select filters`,\n    });\n    this.modalManager?.classList.add('more-search-facets');\n    this.modalManager?.showModal({\n      config,\n      customModalContent,\n    });\n  }\n\n  /**\n   * Generate the list template for each bucket in a facet group\n   */\n  private getFacetTemplate(facetGroup: FacetGroup): TemplateResult {\n    return html`\n      <facets-template\n        .facetGroup=${facetGroup}\n        .selectedFacets=${this.selectedFacets}\n        .renderOn=${'page'}\n        .collectionNameCache=${this.collectionNameCache}\n        @selectedFacetsChanged=${(e: CustomEvent) => {\n          const event = new CustomEvent<SelectedFacets>('facetsChanged', {\n            detail: e.detail,\n            bubbles: true,\n            composed: true,\n          });\n          this.dispatchEvent(event);\n        }}\n      ></facets-template>\n    `;\n  }\n\n  static get styles() {\n    return css`\n      #container.loading {\n        opacity: 0.5;\n      }\n\n      .histogram-loading-indicator {\n        width: 100%;\n        height: 2.25rem;\n        margin-top: 1.75rem;\n        font-size: 1.4rem;\n        text-align: center;\n      }\n\n      .collapser {\n        display: inline-block;\n        cursor: pointer;\n        width: 10px;\n        height: 10px;\n      }\n\n      .collapser svg {\n        transition: transform 0.2s ease-in-out;\n      }\n\n      .collapser.open svg {\n        transform: rotate(90deg);\n      }\n\n      .facet-group:not(:last-child) {\n        margin-bottom: 2rem;\n      }\n\n      .facet-group h1 {\n        margin-bottom: 0.7rem;\n      }\n\n      .facet-group.mobile h1 {\n        cursor: pointer;\n      }\n\n      .facet-group-header {\n        display: flex;\n        margin-bottom: 0.7rem;\n        justify-content: space-between;\n        border-bottom: 1px solid rgb(232, 232, 232);\n      }\n\n      .facet-group-content {\n        transition: max-height 0.2s ease-in-out;\n      }\n\n      .facet-group.mobile .facet-group-content {\n        max-height: 0;\n        overflow: hidden;\n      }\n\n      .facet-group.mobile .facet-group-content.open {\n        max-height: 2000px;\n      }\n\n      h1 {\n        font-size: 1.4rem;\n        font-weight: 200\n        padding-bottom: 3px;\n        margin: 0;\n      }\n\n      .more-link {\n        font-size: 1.2rem;\n        text-decoration: none;\n        padding: 0;\n        background: inherit;\n        border: 0;\n        color: var(--ia-theme-link-color, #4b64ff);\n        cursor: pointer;\n      }\n\n      .sorting-icon {\n        height: 15px;\n        cursor: pointer;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"collection-facets.js","sourceRoot":"","sources":["../../src/collection-facets.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport {\n  css,\n  html,\n  LitElement,\n  PropertyValues,\n  nothing,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport type {\n  Aggregation,\n  AggregationSortType,\n  Bucket,\n  FilterMap,\n  SearchServiceInterface,\n  SearchType,\n} from '@internetarchive/search-service';\nimport '@internetarchive/histogram-date-range';\nimport '@internetarchive/feature-feedback';\nimport '@internetarchive/collection-name-cache';\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport {\n  ModalConfig,\n  ModalManagerInterface,\n} from '@internetarchive/modal-manager';\nimport type { FeatureFeedbackServiceInterface } from '@internetarchive/feature-feedback';\nimport type { RecaptchaManagerInterface } from '@internetarchive/recaptcha-manager';\nimport type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';\nimport type { SharedResizeObserverInterface } from '@internetarchive/shared-resize-observer';\nimport chevronIcon from './assets/img/icons/chevron';\nimport {\n  FacetOption,\n  SelectedFacets,\n  FacetGroup,\n  FacetBucket,\n  facetDisplayOrder,\n  facetTitles,\n  lendingFacetDisplayNames,\n  lendingFacetKeysVisibility,\n  LendingFacetKey,\n  suppressedCollections,\n  defaultFacetSort,\n} from './models';\nimport './collection-facets/more-facets-content';\nimport './collection-facets/facets-template';\nimport './collection-facets/facet-tombstone-row';\nimport {\n  analyticsActions,\n  analyticsCategories,\n} from './utils/analytics-events';\nimport { srOnlyStyle } from './styles/sr-only';\n\n@customElement('collection-facets')\nexport class CollectionFacets extends LitElement {\n  @property({ type: Object }) searchService?: SearchServiceInterface;\n\n  @property({ type: String }) searchType?: SearchType;\n\n  @property({ type: Object }) aggregations?: Record<string, Aggregation>;\n\n  @property({ type: Object }) fullYearsHistogramAggregation?: Aggregation;\n\n  @property({ type: String }) minSelectedDate?: string;\n\n  @property({ type: String }) maxSelectedDate?: string;\n\n  @property({ type: Boolean }) moreLinksVisible = true;\n\n  @property({ type: Boolean }) facetsLoading = false;\n\n  @property({ type: Boolean }) fullYearAggregationLoading = false;\n\n  @property({ type: Object }) selectedFacets?: SelectedFacets;\n\n  @property({ type: Boolean }) collapsableFacets = false;\n\n  @property({ type: Boolean }) showHistogramDatePicker = false;\n\n  @property({ type: String }) query?: string;\n\n  @property({ type: Object }) filterMap?: FilterMap;\n\n  @property({ type: Object, attribute: false })\n  modalManager?: ModalManagerInterface;\n\n  @property({ type: Object, attribute: false })\n  resizeObserver?: SharedResizeObserverInterface;\n\n  @property({ type: Object, attribute: false })\n  featureFeedbackService?: FeatureFeedbackServiceInterface;\n\n  @property({ type: Object, attribute: false })\n  recaptchaManager?: RecaptchaManagerInterface;\n\n  @property({ type: Object, attribute: false })\n  analyticsHandler?: AnalyticsManagerInterface;\n\n  @property({ type: Object, attribute: false })\n  collectionNameCache?: CollectionNameCacheInterface;\n\n  @state() openFacets: Record<FacetOption, boolean> = {\n    subject: false,\n    lending: false,\n    mediatype: false,\n    language: false,\n    creator: false,\n    collection: false,\n    year: false,\n  };\n\n  /**\n   * Maximum # of facet buckets to render per facet group\n   */\n  private allowedFacetCount = 6;\n\n  render() {\n    const datePickerLabelId = 'date-picker-label';\n    return html`\n      <div id=\"container\" class=\"${this.facetsLoading ? 'loading' : ''}\">\n        ${this.showHistogramDatePicker &&\n        (this.fullYearsHistogramAggregation || this.fullYearAggregationLoading)\n          ? html`\n              <section class=\"facet-group\" aria-labelledby=${datePickerLabelId}>\n                <h3 id=${datePickerLabelId}>\n                  Year Published <span class=\"sr-only\">range filter</span>\n                </h3>\n                ${this.histogramTemplate}\n              </section>\n            `\n          : nothing}\n        ${this.mergedFacets.map(facetGroup =>\n          this.getFacetGroupTemplate(facetGroup)\n        )}\n      </div>\n    `;\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('selectedFacets')) {\n      this.dispatchFacetsChangedEvent();\n    }\n  }\n\n  // TODO: want to fire analytics?\n  private dispatchFacetsChangedEvent() {\n    const event = new CustomEvent<SelectedFacets>('facetsChanged', {\n      detail: this.selectedFacets,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private get currentYearsHistogramAggregation(): Aggregation | undefined {\n    return this.aggregations?.year_histogram;\n  }\n\n  private get histogramTemplate() {\n    const { fullYearsHistogramAggregation } = this;\n    return this.fullYearAggregationLoading\n      ? html`<div class=\"histogram-loading-indicator\">&hellip;</div>` // Ellipsis block\n      : html`\n          <histogram-date-range\n            .minDate=${fullYearsHistogramAggregation?.first_bucket_key}\n            .maxDate=${fullYearsHistogramAggregation?.last_bucket_key}\n            .minSelectedDate=${this.minSelectedDate}\n            .maxSelectedDate=${this.maxSelectedDate}\n            .updateDelay=${100}\n            missingDataMessage=\"...\"\n            .width=${180}\n            .bins=${fullYearsHistogramAggregation?.buckets as number[]}\n            @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}\n          ></histogram-date-range>\n        `;\n  }\n\n  private histogramDateRangeUpdated(\n    e: CustomEvent<{\n      minDate: string;\n      maxDate: string;\n    }>\n  ) {\n    const { minDate, maxDate } = e.detail;\n    const event = new CustomEvent('histogramDateRangeUpdated', {\n      detail: { minDate, maxDate },\n    });\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * Combines the selected facets with the aggregations to create a single list of facets\n   */\n  private get mergedFacets(): FacetGroup[] {\n    const facetGroups: FacetGroup[] = [];\n\n    facetDisplayOrder.forEach(facetKey => {\n      const selectedFacetGroup = this.selectedFacetGroups.find(\n        group => group.key === facetKey\n      );\n      const aggregateFacetGroup = this.aggregationFacetGroups.find(\n        group => group.key === facetKey\n      );\n\n      // if the user selected a facet, but it's not in the aggregation, we add it as-is\n      if (selectedFacetGroup && !aggregateFacetGroup) {\n        facetGroups.push(selectedFacetGroup);\n        return;\n      }\n\n      // if we don't have an aggregate facet group, don't add this to the list\n      if (!aggregateFacetGroup) return;\n\n      // start with either the selected group if we have one, or the aggregate group\n      const facetGroup = selectedFacetGroup ?? aggregateFacetGroup;\n\n      // attach the counts to the selected buckets\n      let bucketsWithCount =\n        selectedFacetGroup?.buckets.map(bucket => {\n          const selectedBucket = aggregateFacetGroup.buckets.find(\n            b => b.key === bucket.key\n          );\n          return selectedBucket\n            ? {\n                ...bucket,\n                count: selectedBucket.count,\n              }\n            : bucket;\n        }) ?? [];\n\n      // append any additional buckets that were not selected\n      aggregateFacetGroup.buckets.forEach(bucket => {\n        const existingBucket = bucketsWithCount.find(b => b.key === bucket.key);\n        if (existingBucket) return;\n        bucketsWithCount.push(bucket);\n      });\n\n      // For lending facets, only include a specific subset of buckets\n      if (facetKey === 'lending') {\n        bucketsWithCount = bucketsWithCount.filter(\n          bucket => lendingFacetKeysVisibility[bucket.key as LendingFacetKey]\n        );\n      }\n\n      /**\n       * render limited facet items on page facet area\n       *\n       * - by-default we are showing 6 items\n       * - additionally want to show all items (selected/suppressed) in page facet area\n       */\n      let allowedFacetCount = Object.keys(\n        (selectedFacetGroup?.buckets as []) || []\n      )?.length;\n      if (allowedFacetCount < this.allowedFacetCount) {\n        allowedFacetCount = this.allowedFacetCount; // splice start index from 0th\n      }\n\n      // splice how many items we want to show in page facet area\n      facetGroup.buckets = bucketsWithCount.splice(0, allowedFacetCount);\n\n      facetGroups.push(facetGroup);\n    });\n\n    return facetGroups;\n  }\n\n  /**\n   * Converts the selected facets to a `FacetGroup` array,\n   * which is easier to work with\n   */\n  private get selectedFacetGroups(): FacetGroup[] {\n    if (!this.selectedFacets) return [];\n\n    const facetGroups: FacetGroup[] = Object.entries(this.selectedFacets).map(\n      ([key, selectedFacets]) => {\n        const option = key as FacetOption;\n        const title = facetTitles[option];\n\n        const buckets: FacetBucket[] = Object.entries(selectedFacets).map(\n          ([value, facetData]) => {\n            let displayText: string = value;\n            // for lending facets, convert the key to a readable format\n            if (option === 'lending') {\n              displayText =\n                lendingFacetDisplayNames[value as LendingFacetKey] ?? value;\n            }\n            return {\n              displayText,\n              key: value,\n              count: facetData.count,\n              state: facetData.state,\n            };\n          }\n        );\n\n        return {\n          title,\n          key: option,\n          buckets,\n        };\n      }\n    );\n\n    return facetGroups;\n  }\n\n  /**\n   * Converts the raw `aggregations` to `FacetGroups`, which are easier to use\n   */\n  private get aggregationFacetGroups(): FacetGroup[] {\n    const facetGroups: FacetGroup[] = [];\n    Object.entries(this.aggregations ?? []).forEach(([key, aggregation]) => {\n      // the year_histogram data is in a different format so can't be handled here\n      if (key === 'year_histogram') return;\n\n      const option = key as FacetOption;\n      const title = facetTitles[option];\n      if (!title) return;\n\n      let castedBuckets = aggregation.getSortedBuckets(\n        defaultFacetSort[option]\n      ) as Bucket[];\n\n      if (option === 'collection') {\n        // we are not showing fav- collections or certain deemphasized collections in facets\n        castedBuckets = castedBuckets?.filter(bucket => {\n          const bucketKey = bucket?.key?.toString();\n          return (\n            !suppressedCollections[bucketKey] && !bucketKey?.startsWith('fav-')\n          );\n        });\n      }\n\n      const facetBuckets: FacetBucket[] = castedBuckets.map(bucket => {\n        const bucketKey = bucket.key;\n        let displayText = `${bucket.key}`;\n        // for lending facets, convert the bucket key to a readable format\n        if (option === 'lending') {\n          displayText =\n            lendingFacetDisplayNames[bucket.key as LendingFacetKey] ??\n            `${bucket.key}`;\n        }\n        return {\n          displayText,\n          key: `${bucketKey}`,\n          count: bucket.doc_count,\n          state: 'none',\n        };\n      });\n      const group: FacetGroup = {\n        title,\n        key: option,\n        buckets: facetBuckets,\n      };\n      facetGroups.push(group);\n    });\n    return facetGroups;\n  }\n\n  /**\n   * Generate the template for a facet group with a header and the collapsible\n   * chevron for the mobile view\n   */\n  private getFacetGroupTemplate(\n    facetGroup: FacetGroup\n  ): TemplateResult | typeof nothing {\n    if (!this.facetsLoading && facetGroup.buckets.length === 0) return nothing;\n\n    const { key } = facetGroup;\n    const isOpen = this.openFacets[key];\n    const collapser = html`\n      <span class=\"collapser ${isOpen ? 'open' : ''}\"> ${chevronIcon} </span>\n    `;\n\n    const toggleCollapsed = () => {\n      const newOpenFacets = { ...this.openFacets };\n      newOpenFacets[key] = !isOpen;\n      this.openFacets = newOpenFacets;\n    };\n\n    const headerId = `facet-group-header-label-${facetGroup.key}`;\n    return html`\n      <section\n        class=\"facet-group ${this.collapsableFacets ? 'mobile' : ''}\"\n        aria-labelledby=${headerId}\n      >\n        <div class=\"facet-group-header\">\n          <h3\n            id=${headerId}\n            @click=${toggleCollapsed}\n            @keyup=${toggleCollapsed}\n          >\n            ${this.collapsableFacets ? collapser : nothing} ${facetGroup.title}\n            <span class=\"sr-only\">filters</span>\n          </h3>\n        </div>\n        <div class=\"facet-group-content ${isOpen ? 'open' : ''}\">\n          ${this.facetsLoading\n            ? this.getTombstoneFacetGroupTemplate()\n            : html`\n                ${this.getFacetTemplate(facetGroup)}\n                ${this.searchMoreFacetsLink(facetGroup)}\n              `}\n        </div>\n      </section>\n    `;\n  }\n\n  private getTombstoneFacetGroupTemplate(): TemplateResult {\n    // Render five tombstone rows\n    return html`\n      ${map(\n        Array(5).fill(null),\n        () => html`<facet-tombstone-row></facet-tombstone-row>`\n      )}\n    `;\n  }\n\n  /**\n   * Generate the More... link button just below the facets group\n   *\n   * TODO: want to fire analytics?\n   */\n  private searchMoreFacetsLink(\n    facetGroup: FacetGroup\n  ): TemplateResult | typeof nothing {\n    // Don't render More... links for FTS searches\n    if (!this.moreLinksVisible) {\n      return nothing;\n    }\n\n    // Don't render More... links for lending facets\n    if (facetGroup.key === 'lending') {\n      return nothing;\n    }\n\n    // Don't render More... link if the number of facets < this.allowedFacetCount\n    if (Object.keys(facetGroup.buckets).length < this.allowedFacetCount) {\n      return nothing;\n    }\n\n    // We sort years in numeric order by default, rather than bucket count\n    const facetSort = defaultFacetSort[facetGroup.key];\n\n    return html`<button\n      class=\"more-link\"\n      @click=${() => {\n        this.showMoreFacetsModal(facetGroup, facetSort);\n        this.analyticsHandler?.sendEvent({\n          category: analyticsCategories.default,\n          action: analyticsActions.showMoreFacetsModal,\n          label: facetGroup.key,\n        });\n        this.dispatchEvent(\n          new CustomEvent('showMoreFacets', { detail: facetGroup.key })\n        );\n      }}\n    >\n      More...\n    </button>`;\n  }\n\n  async showMoreFacetsModal(\n    facetGroup: FacetGroup,\n    sortedBy: AggregationSortType\n  ): Promise<void> {\n    const facetAggrKey = facetGroup.key;\n\n    const customModalContent = html`\n      <more-facets-content\n        .analyticsHandler=${this.analyticsHandler}\n        .facetKey=${facetGroup.key}\n        .facetAggregationKey=${facetAggrKey}\n        .query=${this.query}\n        .filterMap=${this.filterMap}\n        .modalManager=${this.modalManager}\n        .searchService=${this.searchService}\n        .searchType=${this.searchType}\n        .collectionNameCache=${this.collectionNameCache}\n        .selectedFacets=${this.selectedFacets}\n        .sortedBy=${sortedBy}\n        @facetsChanged=${(e: CustomEvent) => {\n          const event = new CustomEvent<SelectedFacets>('facetsChanged', {\n            detail: e.detail,\n            bubbles: true,\n            composed: true,\n          });\n          this.dispatchEvent(event);\n        }}\n      >\n      </more-facets-content>\n    `;\n\n    const config = new ModalConfig({\n      bodyColor: '#fff',\n      headerColor: '#194880',\n      showHeaderLogo: false,\n      closeOnBackdropClick: true, // TODO: want to fire analytics\n      title: html`Select filters`,\n    });\n    this.modalManager?.classList.add('more-search-facets');\n    this.modalManager?.showModal({\n      config,\n      customModalContent,\n      userClosedModalCallback: () => {\n        this.modalManager?.classList.remove('more-search-facets');\n      },\n    });\n  }\n\n  /**\n   * Generate the list template for each bucket in a facet group\n   */\n  private getFacetTemplate(facetGroup: FacetGroup): TemplateResult {\n    return html`\n      <facets-template\n        .facetGroup=${facetGroup}\n        .selectedFacets=${this.selectedFacets}\n        .renderOn=${'page'}\n        .collectionNameCache=${this.collectionNameCache}\n        @selectedFacetsChanged=${(e: CustomEvent) => {\n          const event = new CustomEvent<SelectedFacets>('facetsChanged', {\n            detail: e.detail,\n            bubbles: true,\n            composed: true,\n          });\n          this.dispatchEvent(event);\n        }}\n      ></facets-template>\n    `;\n  }\n\n  static get styles() {\n    return [\n      srOnlyStyle,\n      css`\n        #container.loading {\n          opacity: 0.5;\n        }\n\n        .histogram-loading-indicator {\n          width: 100%;\n          height: 2.25rem;\n          margin-top: 1.75rem;\n          font-size: 1.4rem;\n          text-align: center;\n        }\n\n        .collapser {\n          display: inline-block;\n          cursor: pointer;\n          width: 10px;\n          height: 10px;\n        }\n\n        .collapser svg {\n          transition: transform 0.2s ease-in-out;\n        }\n\n        .collapser.open svg {\n          transform: rotate(90deg);\n        }\n\n        .facet-group:not(:last-child) {\n          margin-bottom: 2rem;\n        }\n\n        .facet-group h3 {\n          margin-bottom: 0.7rem;\n        }\n\n        .facet-group.mobile h3 {\n          cursor: pointer;\n        }\n\n        .facet-group-header {\n          display: flex;\n          margin-bottom: 0.7rem;\n          justify-content: space-between;\n          border-bottom: 1px solid rgb(232, 232, 232);\n        }\n\n        .facet-group-content {\n          transition: max-height 0.2s ease-in-out;\n        }\n\n        .facet-group.mobile .facet-group-content {\n          max-height: 0;\n          overflow: hidden;\n        }\n\n        .facet-group.mobile .facet-group-content.open {\n          max-height: 2000px;\n        }\n\n        h3 {\n          font-size: 1.4rem;\n          font-weight: 200\n          padding-bottom: 3px;\n          margin: 0;\n        }\n\n        .more-link {\n          font-size: 1.2rem;\n          text-decoration: none;\n          padding: 0;\n          background: inherit;\n          border: 0;\n          color: var(--ia-theme-link-color, #4b64ff);\n          cursor: pointer;\n        }\n\n        .sorting-icon {\n          height: 15px;\n          cursor: pointer;\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/sort-filter-bar/alpha-bar.d.ts

@@ -4,13 +4,14 @@ import './alpha-bar-tooltip';
 export declare class AlphaBar extends LitElement {
     selectedLetter: string | null;
     letterCounts?: PrefixFilterCounts;
+    ariaLandmarkLabel?: string;
     private tooltipShown;
     private hoveredLetter?;
     private tooltip?;
     private readonly alphabet;
     private get selectedUppercaseLetter();
     render(): TemplateResult<1>;
-    private letterLinkTemplate;
+    private letterButtonTemplate;
     private tooltipTemplate;
     private letterClicked;
     private handleMouseMove;