@internetarchive/collection-browser 4.8.1-webdev-9227.4 → 4.9.1-webdev-9670.0

package/README.md

@@ -15,6 +15,17 @@ import '@internetarchive/collection-browser';
 </collection-browser>
 ```
 
+## Pinch zoom (prototype)
+
+Set the `enable-pinch-zoom` attribute (or `enablePinchZoom`) on `<collection-browser>` to let viewers zoom the tile grid, Apple Photos style. It's off by default and only applies to the grid display mode.
+
+- Pinch on a touch screen or a trackpad, or press ctrl/cmd + and - while the pointer is over the grid.
+- A slider next to the display mode buttons does the same thing.
+- The grid snaps to 1, 2, 3, 4, 6, 8 or 12 columns. The densest levels show only thumbnails.
+- The chosen level is remembered in `localStorage`.
+
+In the demo app, tick "Enable pinch zoom (prototype)" or add `?pinchZoom` to the URL.
+
 ## Local Demo with `web-dev-server`
 ```bash
 pnpm install
@@ -45,39 +56,6 @@ To automatically fix many linting errors, run
 pnpm run format
 ```
 
-## Localization
-
-Wrap user-facing text in `msg()` from `@lit/localize`, inside `render()` or a getter it calls. The first argument has to be a literal: a string, `` str`...${x}` `` when it has an expression, or `` html`...` `` when it has markup. A `msg()` that runs at module scope or in a static field resolves once at import, so it never changes language. A string that has to live outside `render()` goes in a getter, static or not, so it's read at render time.
-
-Every component that renders a `msg()` string, directly or through a helper, needs `@localized()` from `@lit/localize`. Without it the component doesn't re-render when the app switches locale.
-
-This package never calls `configureLocalization`. `@lit/localize` can only be configured once per page, so the app owns that call and loads one bundle holding its own messages and ours. We publish our translations for the app to merge in:
-
-```bash
-pnpm run strings:extract   # add new msg() strings to xliff/<locale>.xlf
-# translate the empty <target>s in xliff/<locale>.xlf
-pnpm run strings:build     # write src/locales/<locale>.ts
-```
-
-Commit all three: the XLIFF, the generated module and the source change.
-
-### What gets published
-
-`@internetarchive/collection-browser/locales/<locale>.js` exports `templates`, the same shape `lit-localize build` writes in runtime mode: an object keyed by message id (a hash of the English source) whose values are what `loadLocale` returns. It only holds messages that have a translation. A message with no translation is left out instead of falling back to English, so merging it can never override another package's or the app's translation of the same text.
-
-That path is a stub in `locales/` at the package root that re-exports `dist/src/locales/<locale>.js`. The package has no `exports` map, so a deep import resolves to a real file, and adding a map would break every other deep import. A new locale needs its own pair of stubs (`.js` and `.d.ts`).
-
-To merge it, an app spreads it under its own templates, app last so the app wins a conflict:
-
-```ts
-import { templates as collectionBrowser } from '@internetarchive/collection-browser/locales/es.js';
-import { templates as app } from './app-es';
-
-export const templates = { ...collectionBrowser, ...app };
-```
-
-The XLIFF in `xliff/` is where translations are edited. It isn't published.
-
 ## Tooling configs
 
 For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

package/dist/src/app-root.d.ts

@@ -2,6 +2,8 @@ import { AnalyticsEvent } from '@internetarchive/analytics-manager';
 import { LitElement, PropertyValues } from 'lit';
 import '../src/collection-browser';
 export declare class AppRoot extends LitElement {
+    private static readonly SOUND_KEY;
+    private static readSoundPreference;
     private searchService;
     private resizeObserver;
     private toggleSlots;
@@ -13,8 +15,12 @@ export declare class AppRoot extends LitElement {
     private rowGap;
     private colGap;
     private suppressFacets;
+    private enablePinchZoom;
     private lazyLoadFacets;
     private loggedIn;
+    /** Real video clips for movies, unless the page is opened with `?clips=0`. */
+    private tilePreviewOptions;
+    private enableTilePreviews;
     private searchType;
     private profileElement?;
     private withinProfile?;
@@ -50,6 +56,11 @@ export declare class AppRoot extends LitElement {
     private toggleFacetGroupOutline;
     private datePickerChanged;
     private facetsChanged;
+    /** Clicking the Sound checkbox is the user gesture that lets previews play audibly. */
+    private tilePreviewSoundChanged;
+    private tilePreviewClipsChanged;
+    private tilePreviewsChanged;
+    private pinchZoomChanged;
     private lazyLoadFacetsChanged;
     /**
      * Handler for when collection browser's manage mode changes.

package/dist/src/app-root.js

@@ -1,3 +1,4 @@
+var AppRoot_1;
 import { __decorate } from "tslib";
 import { AnalyticsManager, } from '@internetarchive/analytics-manager';
 import { SearchService, SearchType, } from '@internetarchive/search-service';
@@ -16,8 +17,15 @@ let AppRoot = class AppRoot extends LitElement {
         this.rowGap = 1.7;
         this.colGap = 1.7;
         this.suppressFacets = false;
+        this.enablePinchZoom = new URLSearchParams(window.location.search).has('pinchZoom');
         this.lazyLoadFacets = false;
         this.loggedIn = false;
+        /** Real video clips for movies, unless the page is opened with `?clips=0`. */
+        this.tilePreviewOptions = {
+            clips: new URLSearchParams(window.location.search).get('clips') !== '0',
+            sound: AppRoot_1.readSoundPreference(),
+        };
+        this.enableTilePreviews = new URLSearchParams(window.location.search).get('previews') !== '0';
         this.searchType = SearchType.METADATA;
         this.analyticsManager = new AnalyticsManager();
         this.analyticsHandler = {
@@ -26,6 +34,16 @@ let AppRoot = class AppRoot extends LitElement {
             sendEventNoSampling: this.sendAnalytics.bind(this),
         };
     }
+    static { AppRoot_1 = this; }
+    static { this.SOUND_KEY = 'iaux-cb-tile-preview-sound'; }
+    static readSoundPreference() {
+        try {
+            return localStorage.getItem(AppRoot_1.SOUND_KEY) === '1';
+        }
+        catch {
+            return false;
+        }
+    }
     sendAnalytics(ae) {
         console.log('Analytics Received ----', ae);
         this.latestAction = ae;
@@ -294,6 +312,48 @@ let AppRoot = class AppRoot extends LitElement {
               />
               <label for="lazy-load-facets">Lazy load facets</label>
             </div>
+            <div class="checkbox-control">
+              <input
+                type="checkbox"
+                id="enable-tile-previews"
+                ?checked=${this.enableTilePreviews}
+                @click=${this.tilePreviewsChanged}
+              />
+              <label for="enable-tile-previews">Live tile previews</label>
+            </div>
+            <div class="checkbox-control indent">
+              <input
+                type="checkbox"
+                id="tile-preview-clips"
+                ?checked=${this.tilePreviewOptions.clips}
+                ?disabled=${!this.enableTilePreviews}
+                @click=${this.tilePreviewClipsChanged}
+              />
+              <label for="tile-preview-clips"
+                >Real video (off: thumbnail frames)</label
+              >
+            </div>
+            <div class="checkbox-control indent">
+              <input
+                type="checkbox"
+                id="tile-preview-sound"
+                ?checked=${this.tilePreviewOptions.sound}
+                ?disabled=${!this.enableTilePreviews}
+                @click=${this.tilePreviewSoundChanged}
+              />
+              <label for="tile-preview-sound">Sound</label>
+            </div>
+            <div class="checkbox-control">
+              <input
+                type="checkbox"
+                id="enable-pinch-zoom"
+                ?checked=${this.enablePinchZoom}
+                @click=${this.pinchZoomChanged}
+              />
+              <label for="enable-pinch-zoom"
+                >Enable pinch zoom (prototype)</label
+              >
+            </div>
             <div class="checkbox-control">
               <input
                 type="checkbox"
@@ -511,8 +571,11 @@ let AppRoot = class AppRoot extends LitElement {
           .resizeObserver=${this.resizeObserver}
           .showHistogramDatePicker=${true}
           .suppressFacets=${this.suppressFacets}
+          ?enable-pinch-zoom=${this.enablePinchZoom}
           .lazyLoadFacets=${this.lazyLoadFacets}
           .loggedIn=${this.loggedIn}
+          .enableTilePreviews=${this.enableTilePreviews}
+          .tilePreviewOptions=${this.tilePreviewOptions}
           .modalManager=${this.modalManager}
           .analyticsHandler=${this.analyticsHandler}
           .withinProfile=${this.withinProfile}
@@ -647,6 +710,28 @@ let AppRoot = class AppRoot extends LitElement {
         const target = e.target;
         this.suppressFacets = !target.checked;
     }
+    /** Clicking the Sound checkbox is the user gesture that lets previews play audibly. */
+    tilePreviewSoundChanged(e) {
+        const sound = e.target.checked;
+        this.tilePreviewOptions = { ...this.tilePreviewOptions, sound };
+        try {
+            localStorage.setItem(AppRoot_1.SOUND_KEY, sound ? '1' : '0');
+        }
+        catch {
+            // Storage can be unavailable; the choice just isn't remembered.
+        }
+    }
+    tilePreviewClipsChanged(e) {
+        const clips = e.target.checked;
+        this.tilePreviewOptions = { ...this.tilePreviewOptions, clips };
+    }
+    tilePreviewsChanged(e) {
+        const target = e.target;
+        this.enableTilePreviews = target.checked;
+    }
+    pinchZoomChanged(e) {
+        this.enablePinchZoom = e.target.checked;
+    }
     lazyLoadFacetsChanged(e) {
         const target = e.target;
         this.lazyLoadFacets = target.checked;
@@ -1157,12 +1242,21 @@ __decorate([
 __decorate([
     state()
 ], AppRoot.prototype, "suppressFacets", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "enablePinchZoom", void 0);
 __decorate([
     state()
 ], AppRoot.prototype, "lazyLoadFacets", void 0);
 __decorate([
     state()
 ], AppRoot.prototype, "loggedIn", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "tilePreviewOptions", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "enableTilePreviews", void 0);
 __decorate([
     state()
 ], AppRoot.prototype, "searchType", void 0);
@@ -1190,7 +1284,7 @@ __decorate([
 __decorate([
     query('modal-manager')
 ], AppRoot.prototype, "modalManager", void 0);
-AppRoot = __decorate([
+AppRoot = AppRoot_1 = __decorate([
     customElement('app-root')
 ], AppRoot);
 export { AppRoot };

package/dist/src/app-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../src/app-root.ts"],"names":[],"mappings":";AAAA,OAAO,EAEL,gBAAgB,GACjB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAEL,aAAa,EAEb,UAAU,GACX,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAM/E,OAAO,2BAA2B,CAAC;AAK5B,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QACG,kBAAa,GACnB,IAAI,CAAC,8BAA8B,EAAE,CAAC;QAEhC,mBAAc,GAAG,IAAI,oBAAoB,EAAE,CAAC;QAEnC,gBAAW,GAAY,KAAK,CAAC;QAQ7B,cAAS,GAAW,EAAE,CAAC;QAEvB,eAAU,GAAW,EAAE,CAAC;QAExB,WAAM,GAAW,GAAG,CAAC;QAErB,WAAM,GAAW,GAAG,CAAC;QAErB,mBAAc,GAAY,KAAK,CAAC;QAEhC,mBAAc,GAAY,KAAK,CAAC;QAEhC,aAAQ,GAAY,KAAK,CAAC;QAE1B,eAAU,GAAe,UAAU,CAAC,QAAQ,CAAC;QAmBtD,qBAAgB,GAAG,IAAI,gBAAgB,EAAE,CAAC;QAE1C,qBAAgB,GAA8B;YACpD,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;YACvC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;YACxC,mBAAmB,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;SACnD,CAAC;IAqrCJ,CAAC;IAnrCS,aAAa,CAAC,EAAkB;QACtC,OAAO,CAAC,GAAG,CAAC,yBAAyB,EAAE,EAAE,CAAC,CAAC;QAC3C,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACvB,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAAE,CAAC,CAAC;IACvC,CAAC;IAEO,8BAA8B;QACpC,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC;QAC1D,OAAO,IAAI,aAAa,CAAC;YACvB,kBAAkB,EAAE,KAAK;YACzB,OAAO,EAAE,MAAM,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,SAAS;YACnD,WAAW,EAAE,MAAM,CAAC,GAAG,CAAC,qBAAqB,CAAC,IAAI,SAAS;YAC3D,gBAAgB,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC;SAC5C,CAAC,CAAC;IACL,CAAC;IAEO,aAAa,CAAC,CAAQ;QAC5B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;QAC7C,IAAI,CAAC,iBAAiB,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;QAEpD,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEO,iBAAiB,CAAC,CAAQ;QAChC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC;QACvD,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC;QAEhE,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEO,eAAe;QACrB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC;QACnC,IAAI,IAAI,GAAG,CAAC,EAAE,CAAC;YACb,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACxC,CAAC;aAAM,CAAC;YACN,mCAAmC;YACnC,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,GAAG,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;IAEO,iBAAiB,CAAC,CAAQ;QAChC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC;QACtD,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACpD,CAAC;IAEkB,OAAO,CAAC,OAAuB;QAChD,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACnD,IAAI,CAAC,eAAe,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC;QAC3D,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;YAC/B,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,iBAAiB,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC;IACtD,CAAC;IAED,IAAY,QAAQ;QAClB,MAAM,YAAY,GAAG,IAAI,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QAEjE,OAAO,YAAY,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5D,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;oCAEqB,IAAI,CAAC,QAAQ;;4BAErB,IAAI,CAAC,aAAa;;;;;yBAKrB,IAAI,CAAC,WAAW,IAAI,EAAE;;;;4BAInB,IAAI,CAAC,iBAAiB;;;;;;;4BAOtB,IAAI,CAAC,iBAAiB;;;;;yBAKzB,IAAI,CAAC,gBAAgB,IAAI,EAAE;;;;;;;;;;;;;;2BAczB,IAAI,CAAC,UAAU,KAAK,UAAU,CAAC,OAAO;yBACxC,IAAI,CAAC,kBAAkB;;;;;;;;;;2BAUrB,IAAI,CAAC,UAAU,KAAK,UAAU,CAAC,QAAQ;yBACzC,IAAI,CAAC,kBAAkB;;;;;;;;;;2BAUrB,IAAI,CAAC,UAAU,KAAK,UAAU,CAAC,QAAQ;yBACzC,IAAI,CAAC,kBAAkB;;;;;;;;;;2BAUrB,IAAI,CAAC,UAAU,KAAK,UAAU,CAAC,EAAE;yBACnC,IAAI,CAAC,kBAAkB;;;;;;;;;;2BAUrB,IAAI,CAAC,UAAU,KAAK,UAAU,CAAC,KAAK;yBACtC,IAAI,CAAC,kBAAkB;;;;;;;;uBAQzB,GAAG,EAAE;YACZ,MAAM,OAAO,GACX,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,mBAAmB,CAAC,CAAC;YACvD,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;YACpC,MAAM,cAAc,GAClB,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAAC;YACtD,cAAc,EAAE,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC7C,CAAC;;;;;uBAKQ,GAAG,EAAE;YACZ,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,cAAc,CAC7C,sBAAsB,CACvB,CAAC;YACF,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QACtC,CAAC;;;;;;;;gBAQC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;;;;;;;;;;;;;;;;yBAgBjC,IAAI,CAAC,YAAY;;sBAEpB,IAAI,CAAC,SAAS;;;;;;;;;;;yBAWX,IAAI,CAAC,aAAa;;sBAErB,IAAI,CAAC,UAAU;;;;;;;;;;;yBAWZ,IAAI,CAAC,aAAa;;sBAErB,IAAI,CAAC,MAAM;;;;;;;;;;;yBAWR,IAAI,CAAC,aAAa;;sBAErB,IAAI,CAAC,MAAM;;;;;;;;;;yBAUR,IAAI,CAAC,YAAY;;;;;;;;;yBASjB,IAAI,CAAC,iBAAiB;;;;;;;;;yBAStB,IAAI,CAAC,aAAa;;;;;;;;4BAQf,IAAI,CAAC,cAAc;yBACtB,IAAI,CAAC,qBAAqB;;;;;;;;yBAQ1B,IAAI,CAAC,yBAAyB;;;;;;;;yBAQ9B,IAAI,CAAC,+BAA+B;;;;;;;;yBAQpC,IAAI,CAAC,4BAA4B;;;;;;;;yBAQjC,IAAI,CAAC,0BAA0B;;;;;;;;;;;;;;yBAc/B,IAAI,CAAC,uBAAuB;;;;;;;;;;yBAU5B,IAAI,CAAC,cAAc;;;;;;;;yBAQnB,IAAI,CAAC,mBAAmB;;;;;;;;;;;;yBAYxB,IAAI,CAAC,2BAA2B;;;;;;;;yBAQhC,IAAI,CAAC,wBAAwB;;;;;;;;yBAQ7B,IAAI,CAAC,8BAA8B;;;;;;;;;;yBAUnC,IAAI,CAAC,+BAA+B;;;;;;;;;;yBAUpC,IAAI,CAAC,iCAAiC;;;;;;;;;;yBAUtC,IAAI,CAAC,yBAAyB;;;;;;;;;;;;0BAY7B,CAAC,CAAQ,EAAE,EAAE;YACrB,MAAM,GAAG,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YACxD,IAAI,CAAC,aAAa,GAAG,GAAG,IAAI,SAAS,CAAC;QACxC,CAAC;;;;;;kCAMiB,IAAI,CAAC,cAAc;YACnC,CAAC,CAAC,IAAI,CAAA,aAAa,IAAI,CAAC,cAAc,WAAW;YACjD,CAAC,CAAC,EAAE;;;;;;;;;;6BAUO,IAAI,CAAC,qBAAqB;;;;kBAKrC;YACE,SAAS;YACT,WAAW;YACX,SAAS;YACT,aAAa;YACb,SAAS;YACT,cAAc;YACd,aAAa;SAEhB,CAAC,GAAG,CACH,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA;;;;sCAIS,GAAG;;iCAER,GAAG;iCACH,IAAI,CAAC,qBAAqB;;4CAEf,GAAG,KAAK,GAAG;;mBAEpC,CACF;;;;;;;;;;;yBAWQ,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,qBAAqB,CAAC;;;;;;;;;;;yBAWpD,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,mBAAmB,CAAC;;;;;;;;mDAQxB,IAAI,CAAC,cAAc;;;;;;;+BAOvC,qBAAqB;0BAC1B,qBAAqB;2BACpB,IAAI,CAAC,aAAa;4BACjB,IAAI,CAAC,cAAc;qCACV,IAAI;4BACb,IAAI,CAAC,cAAc;4BACnB,IAAI,CAAC,cAAc;sBACzB,IAAI,CAAC,QAAQ;0BACT,IAAI,CAAC,YAAY;8BACb,IAAI,CAAC,gBAAgB;2BACxB,IAAI,CAAC,aAAa;4BACjB,IAAI,CAAC,cAAc;yBACtB,QAAQ;gCACD,IAAI,CAAC,kBAAkB;8BACzB,IAAI,CAAC,gBAAgB;+BACpB,IAAI,CAAC,iBAAiB;+BACtB,IAAI,CAAC,iBAAiB;kCACnB,IAAI,CAAC,wBAAwB;kCAC7B,IAAI,CAAC,wBAAwB;+BAChC,IAAI,CAAC,uBAAuB;;YAE/C,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA,+CAA+C;YACrD,CAAC,CAAC,OAAO;YACT,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA,6CAA6C;YACnD,CAAC,CAAC,OAAO;;;;KAIhB,CAAC;IACJ,CAAC;IAEO,KAAK,CAAC,kBAAkB,CAAC,IAAY;QAC3C,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,qBAAqB;gBACxB,IAAI,CAAC,iBAAiB,CAAC,SAAS,GAAG,EAAE,CAAC;gBACtC,IAAI,CAAC,iBAAiB,CAAC,oBAAoB,GAAG,IAAI,CAAC;gBACnD,IAAI,CAAC,iBAAiB,CAAC,wBAAwB,GAAG,IAAI,CAAC;gBACvD,IAAI,CAAC,aAAa,EAAE,CAAC;gBACrB,MAAM,IAAI,CAAC,iBAAiB,CAAC,cAAc,CAAC;gBAC5C,MAAM;YACR;gBACE,MAAM;QACV,CAAC;IACH,CAAC;IAEO,gBAAgB,CAAC,CAAsC;QAC7D,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC;IACxC,CAAC;IAED,qEAAqE;IAC7D,iBAAiB,CAAC,CAA0B;QAClD,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC;IAC7B,CAAC;IAED,qDAAqD;IAC7C,kBAAkB,CAAC,CAAQ;QACjC,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,4BAA4B,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACpE,CAAC;IAEO,4BAA4B,CAAC,MAAc;QACjD,QAAQ,MAAM,EAAE,CAAC;YACf,KAAK,UAAU;gBACb,OAAO,UAAU,CAAC,QAAQ,CAAC;YAC7B,KAAK,UAAU;gBACb,OAAO,UAAU,CAAC,QAAQ,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,UAAU,CAAC,EAAE,CAAC;YACvB,KAAK,OAAO;gBACV,OAAO,UAAU,CAAC,KAAK,CAAC;YAC1B;gBACE,OAAO,UAAU,CAAC,OAAO,CAAC;QAC9B,CAAC;IACH,CAAC;IAEO,YAAY,CAAC,CAAQ;QAC3B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACxB,CAAC;IACH,CAAC;IAEO,cAAc,CAAC,CAAQ;QAC7B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YACnB,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,+BAA+B,EAC/B,mBAAmB,CACpB,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CACzC,+BAA+B,CAChC,CAAC;QACJ,CAAC;IACH,CAAC;IAEO,mBAAmB,CAAC,CAAQ;QAClC,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,MAAM,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAW,CAAC,aAAa,CAChE,mBAAmB,CACA,CAAC;QACtB,MAAM,eAAe,GAAG;YACtB,GAAG,QAAQ,CAAC,UAAW,CAAC,gBAAgB,CAAC,iBAAiB,CAAC;SACxC,CAAC;QAEtB,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YACnB,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC;QAClE,CAAC;aAAM,CAAC;YACN,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC;QAClE,CAAC;IACH,CAAC;IAEO,cAAc;QACpB,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC9C,MAAM,EAAE,YAAY,EAAE,GAAG,OAAO,CAAC;QAEjC,IAAI,YAAY,CAAC,GAAG,CAAC,gBAAgB,CAAC,EAAE,CAAC;YACvC,YAAY,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;QACxC,CAAC;aAAM,CAAC;YACN,YAAY,CAAC,GAAG,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;QAC7C,CAAC;QAED,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAEzE,IAAI,MAAM,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC;YAChC,MAAM,CAAC,OAAO,CAAC,YAAY,CACzB;gBACE,IAAI,EAAE,OAAO,CAAC,QAAQ,EAAE;aACzB,EACD,EAAE,EACF,OAAO,CAAC,QAAQ,EAAE,CACnB,CAAC;QACJ,CAAC;IACH,CAAC;IAEO,uBAAuB,CAAC,CAAQ;QACtC,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YACnB,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;YAC/D,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;QAC5D,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC;YAClE,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC;QAC/D,CAAC;IACH,CAAC;IAEO,iBAAiB,CAAC,CAAQ;QAChC,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,CAAC,iBAAiB,CAAC,uBAAuB,GAAG,MAAM,CAAC,OAAO,CAAC;QAEhE,8FAA8F;QAC9F,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,uBAAuB,EAAE,CAAC;YACpD,IAAI,CAAC,iBAAiB,CAAC,eAAe,GAAG,SAAS,CAAC;YACnD,IAAI,CAAC,iBAAiB,CAAC,eAAe,GAAG,SAAS,CAAC;QACrD,CAAC;IACH,CAAC;IAEO,aAAa,CAAC,CAAQ;QAC5B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,CAAC,cAAc,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC;IACxC,CAAC;IAEO,qBAAqB,CAAC,CAAQ;QACpC,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,OAAO,CAAC;IACvC,CAAC;IAED;;;;OAIG;IACK,iBAAiB,CAAC,CAAuB;QAC/C,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CACnD,oBAAoB,CACD,CAAC;QACtB,IAAI,cAAc;YAAE,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC;IACxD,CAAC;IAED;;OAEG;IACK,wBAAwB,CAAC,CAAc;QAC7C,IAAI,CAAC,iBAAiB,CAAC,8BAA8B,EAAE,CAAC;QACxD,OAAO,CAAC,GAAG,CAAC,wBAAwB,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAEtD,UAAU,CAAC,GAAG,EAAE;YACd,qEAAqE;YACrE,MAAM,MAAM,GAAG,KAAK,CAAC;YAErB,IAAI,MAAM,EAAE,CAAC;gBACX,uBAAuB;gBACvB,IAAI,CAAC,iBAAiB,CAAC,YAAY,GAAG,KAAK,CAAC;gBAC5C,IAAI,CAAC,YAAY,EAAE,UAAU,EAAE,CAAC;gBAChC,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;YACtD,CAAC;iBAAM,CAAC;gBACN,uBAAuB;gBACvB,IAAI,CAAC,iBAAiB,CAAC,yBAAyB,EAAE,CAAC;YACrD,CAAC;QACH,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,qCAAqC;IACjD,CAAC;IAED;;OAEG;IACK,wBAAwB,CAAC,CAAc;QAC7C,OAAO,CAAC,GAAG,CAAC,wBAAwB,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACxD,CAAC;IAED;;OAEG;IACK,yBAAyB,CAAC,CAAQ;QACxC,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,CAAC,iBAAiB,CAAC,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC;QACrD,IAAI,CAAC,iBAAiB,CAAC,eAAe;YACpC,6CAA6C,CAAC;IAClD,CAAC;IAED;;OAEG;IACK,+BAA+B,CAAC,CAAQ;QAC9C,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,CAAC,iBAAiB,CAAC,WAAW,GAAG,MAAM,CAAC,OAAO;YACjD,CAAC,CAAC,QAAQ;YACV,CAAC,CAAC,YAAY,CAAC;IACnB,CAAC;IAED;;OAEG;IACK,4BAA4B,CAAC,CAAQ;QAC3C,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,GAAG,MAAM,CAAC,OAAO,CAAC;IAC5D,CAAC;IAED;;OAEG;IACK,0BAA0B,CAAC,CAAQ;QACzC,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,CAAC,iBAAiB,CAAC,WAAW,GAAG,MAAM,CAAC,OAAO;YACjD,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;YAC1C,CAAC,CAAC,EAAE,CAAC;IACT,CAAC;IAED;;OAEG;IACK,uBAAuB,CAC7B,CAAoD;QAEpD,OAAO,CAAC,GAAG,CAAC,sBAAsB,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACzE,CAAC;IAED;;OAEG;IACK,2BAA2B,CAAC,CAAQ;QAC1C,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAE5C,MAAM,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACtC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;QAChD,CAAC,CAAC,WAAW,GAAG,uBAAuB,CAAC;QACxC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QACvC,CAAC,CAAC,KAAK,CAAC,eAAe,GAAG,QAAQ,CAAC;QACnC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;QAEzC,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YACnB,IAAI,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QACxC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,iBAAiB,CAAC,WAAW,CAChC,IAAI,CAAC,iBAAiB,CAAC,gBAA2B,CACnD,CAAC;QACJ,CAAC;IACH,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;IACvC,CAAC;IAEO,iCAAiC,CAAC,CAAQ;QAChD,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAE5C,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC3C,KAAK,CAAC,WAAW,GAAG,QAAQ,CAAC;QAE7B,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;QAC7C,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;QAC9C,GAAG,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAEvB,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YACnB,IAAI,CAAC,iBAAiB,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QAC1C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,iBAAiB,CAAC,WAAW,CAChC,IAAI,CAAC,iBAAiB,CAAC,gBAA2B,CACnD,CAAC;QACJ,CAAC;IACH,CAAC;IAED;;OAEG;IACK,wBAAwB,CAAC,CAAQ;QACvC,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAE5C,MAAM,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACtC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;QAChD,CAAC,CAAC,WAAW,GAAG,0BAA0B,CAAC;QAC3C,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QACvC,CAAC,CAAC,KAAK,CAAC,eAAe,GAAG,QAAQ,CAAC;QACnC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;QAEtC,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YACnB,IAAI,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QACxC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,iBAAiB,CAAC,WAAW,CAChC,IAAI,CAAC,iBAAiB,CAAC,gBAA2B,CACnD,CAAC;QACJ,CAAC;IACH,CAAC;IAED;;OAEG;IACK,8BAA8B,CAAC,CAAQ;QAC7C,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAE5C,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YACnB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC1C,GAAG,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;YAClD,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC;YACxB,GAAG,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;YACxC,GAAG,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;YACvC,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;YAE9C,IAAI,CAAC,iBAAiB,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QAC1C,CAAC;aAAM,CAAC;YACN,MAAM,SAAS,GAAG,IAAI,CAAC,iBAAiB,CAAC,aAAa,CACpD,4BAA4B,CAC7B,CAAC;YACF,IAAI,SAAS;gBAAE,IAAI,CAAC,iBAAiB,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QAC/D,CAAC;IACH,CAAC;IAED;;OAEG;IACK,+BAA+B,CAAC,CAAQ;QAC9C,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAE5C,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YACnB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC1C,GAAG,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;YAClD,GAAG,CAAC,WAAW,GAAG,YAAY,CAAC;YAC/B,GAAG,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;YACxC,GAAG,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;YACxC,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;YAE/C,IAAI,CAAC,iBAAiB,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QAC1C,CAAC;aAAM,CAAC;YACN,MAAM,SAAS,GAAG,IAAI,CAAC,iBAAiB,CAAC,aAAa,CACpD,6BAA6B,CAC9B,CAAC;YACF,IAAI,SAAS;gBAAE,IAAI,CAAC,iBAAiB,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QAC/D,CAAC;IACH,CAAC;IAEO,aAAa,CAAC,CAAQ;QAC5B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACtC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,2BAA2B,EAC3B,GAAG,KAAK,CAAC,KAAK,KAAK,CACpB,CAAC;IACJ,CAAC;IAEO,aAAa,CAAC,CAAQ;QAC5B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACtC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,2BAA2B,EAC3B,GAAG,KAAK,CAAC,KAAK,KAAK,CACpB,CAAC;IACJ,CAAC;IAEO,YAAY,CAAC,CAAQ;QAC3B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACzC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,iCAAiC,EACjC,GAAG,KAAK,CAAC,KAAK,KAAK,CACpB,CAAC;IACJ,CAAC;IAEO,aAAa,CAAC,CAAQ;QAC5B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC1C,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,kCAAkC,EAClC,GAAG,KAAK,CAAC,KAAK,KAAK,CACpB,CAAC;QACF,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,kCAAkC,EAClC,GAAG,KAAK,CAAC,KAAK,KAAK,CACpB,CAAC;IACJ,CAAC;IAEO,kBAAkB,CAAC,CAAsC;QAC/D,MAAM,EAAE,UAAU,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QAChC,IAAI,UAAU,KAAK,IAAI,CAAC,WAAW;YAAE,OAAO;QAC5C,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC;IAChC,CAAC;IAED;;OAEG;IACK,yBAAyB,CAAC,CAAQ;QACxC,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAE5C,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YACnB,MAAM,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;YACtC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;YAChD,CAAC,CAAC,WAAW,GAAG,uBAAuB,CAAC;YACxC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;YACtC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;YAEvC,IAAI,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;YACtC,IAAI,CAAC,iBAAiB,CAAC,qBAAqB,GAAG,IAAI,CAAC;QACtD,CAAC;aAAM,CAAC;YACN,MAAM,SAAS,GAAG,IAAI,CAAC,iBAAiB,CAAC,aAAa,CACpD,uBAAuB,CACxB,CAAC;YACF,IAAI,SAAS;gBAAE,IAAI,CAAC,iBAAiB,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;YAC7D,IAAI,CAAC,iBAAiB,CAAC,qBAAqB,GAAG,KAAK,CAAC;QACvD,CAAC;IACH,CAAC;IAEO,qBAAqB,CAAC,CAAQ;QACpC,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,cAAc,GAAI,KAAK,CAAC,KAAyB,IAAI,SAAS,CAAC;IACtE,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8PlB,AA9PY,CA8PX;;AAnuCe;IAAhB,KAAK,EAAE;4CAAsC;AAE7B;IAAhB,KAAK,EAAE;4CAA8B;AAErB;IAAhB,KAAK,EAAE;4CAA8B;AAErB;IAAhB,KAAK,EAAE;iDAAmC;AAE1B;IAAhB,KAAK,EAAE;0CAAgC;AAEvB;IAAhB,KAAK,EAAE;2CAAiC;AAExB;IAAhB,KAAK,EAAE;uCAA8B;AAErB;IAAhB,KAAK,EAAE;uCAA8B;AAErB;IAAhB,KAAK,EAAE;+CAAyC;AAEhC;IAAhB,KAAK,EAAE;+CAAyC;AAEhC;IAAhB,KAAK,EAAE;yCAAmC;AAE1B;IAAhB,KAAK,EAAE;2CAAsD;AAE7C;IAAhB,KAAK,EAAE;+CAA0C;AAEjC;IAAhB,KAAK,EAAE;8CAAgC;AAEI;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;6CAA+B;AAEtC;IAAnC,KAAK,CAAC,mBAAmB,CAAC;+CAA2C;AAG9D;IADP,KAAK,CAAC,wBAAwB,CAAC;oDACe;AAEV;IAApC,KAAK,CAAC,oBAAoB,CAAC;gDAA4C;AAEnC;IAApC,KAAK,CAAC,oBAAoB,CAAC;kDAA+C;AAE3C;IAA/B,KAAK,CAAC,eAAe,CAAC;6CAA8C;AA7C1D,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA0uCnB","sourcesContent":["import {\n  AnalyticsEvent,\n  AnalyticsManager,\n} from '@internetarchive/analytics-manager';\nimport {\n  PageElementName,\n  SearchService,\n  SearchServiceInterface,\n  SearchType,\n} from '@internetarchive/search-service';\nimport { html, css, LitElement, PropertyValues, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\n\nimport type { ModalManagerInterface } from '@internetarchive/modal-manager';\nimport type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';\nimport type { CollectionBrowser } from '../src/collection-browser';\n\nimport '../src/collection-browser';\nimport { InfiniteScroller } from '@internetarchive/infinite-scroller';\nimport { TileDispatcher } from './tiles/tile-dispatcher';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n  private searchService: SearchServiceInterface =\n    this.initSearchServiceFromUrlParams();\n\n  private resizeObserver = new SharedResizeObserver();\n\n  @state() private toggleSlots: boolean = false;\n\n  @state() private currentPage?: number;\n\n  @state() private searchQuery?: string;\n\n  @state() private withinCollection?: string;\n\n  @state() private cellWidth: number = 18;\n\n  @state() private cellHeight: number = 29;\n\n  @state() private rowGap: number = 1.7;\n\n  @state() private colGap: number = 1.7;\n\n  @state() private suppressFacets: boolean = false;\n\n  @state() private lazyLoadFacets: boolean = false;\n\n  @state() private loggedIn: boolean = false;\n\n  @state() private searchType: SearchType = SearchType.METADATA;\n\n  @state() private profileElement?: PageElementName;\n\n  @state() private withinProfile?: string;\n\n  @property({ type: Object, reflect: false }) latestAction?: AnalyticsEvent;\n\n  @query('#base-query-field') private baseQueryField!: HTMLInputElement;\n\n  @query('#base-collection-field')\n  private baseCollectionField!: HTMLInputElement;\n\n  @query('#page-number-input') private pageNumberInput!: HTMLInputElement;\n\n  @query('collection-browser') private collectionBrowser!: CollectionBrowser;\n\n  @query('modal-manager') private modalManager!: ModalManagerInterface;\n\n  private analyticsManager = new AnalyticsManager();\n\n  private analyticsHandler: AnalyticsManagerInterface = {\n    sendPing: this.sendAnalytics.bind(this),\n    sendEvent: this.sendAnalytics.bind(this),\n    sendEventNoSampling: this.sendAnalytics.bind(this),\n  };\n\n  private sendAnalytics(ae: AnalyticsEvent) {\n    console.log('Analytics Received ----', ae);\n    this.latestAction = ae;\n    this.analyticsManager?.sendEvent(ae);\n  }\n\n  private initSearchServiceFromUrlParams() {\n    const params = new URL(window.location.href).searchParams;\n    return new SearchService({\n      includeCredentials: false,\n      baseUrl: params.get('search_base_url') ?? undefined,\n      servicePath: params.get('search_service_path') ?? undefined,\n      debuggingEnabled: !!params.get('debugging'),\n    });\n  }\n\n  private searchPressed(e: Event) {\n    e.preventDefault();\n    this.searchQuery = this.baseQueryField.value;\n    this.collectionBrowser.searchType = this.searchType;\n\n    this.goToCurrentPage();\n  }\n\n  private collectionChanged(e: Event) {\n    e.preventDefault();\n    this.withinCollection = this.baseCollectionField.value;\n    this.collectionBrowser.withinCollection = this.withinCollection;\n\n    this.goToCurrentPage();\n  }\n\n  private goToCurrentPage() {\n    const page = this.currentPage ?? 1;\n    if (page > 1) {\n      this.collectionBrowser.goToPage(page);\n    } else {\n      // Ensure we reset the initial page\n      this.collectionBrowser.initialPageNumber = 1;\n    }\n  }\n\n  private changePagePressed(e: Event) {\n    e.preventDefault();\n    this.currentPage = this.pageNumberInput.valueAsNumber;\n    this.collectionBrowser.goToPage(this.currentPage);\n  }\n\n  protected override updated(changed: PropertyValues): void {\n    if (changed.has('currentPage') && this.currentPage) {\n      this.pageNumberInput.value = this.currentPage.toString();\n    }\n\n    if (changed.has('searchQuery')) {\n      this.queryUpdated();\n    }\n  }\n\n  private queryUpdated() {\n    this.collectionBrowser.baseQuery = this.searchQuery;\n  }\n\n  private get getClass() {\n    const searchParams = new URLSearchParams(window.location.search);\n\n    return searchParams.get('hide-dev-tools') ? 'hidden' : '';\n  }\n\n  render() {\n    return html`\n      <div class=\"dev-tool-container\">\n        <div id=\"dev-tools\" class=${this.getClass}>\n          <div id=\"search-and-page-inputs\">\n            <form @submit=${this.searchPressed}>\n              <label for=\"base-query-field\"> Query: </label>\n              <input\n                type=\"text\"\n                id=\"base-query-field\"\n                .value=${this.searchQuery ?? ''}\n              />\n              <input type=\"submit\" value=\"Search\" />\n            </form>\n            <form @submit=${this.changePagePressed}>\n              <label for=\"page-number-input\"> Page: </label>\n              <input type=\"number\" value=\"1\" id=\"page-number-input\" />\n              <input type=\"submit\" value=\"Go\" />\n            </form>\n          </div>\n          <div>\n            <form @submit=${this.collectionChanged}>\n              <label for=\"base-collection-field\"> Within collection: </label>\n              <input\n                type=\"text\"\n                id=\"base-collection-field\"\n                .value=${this.withinCollection ?? ''}\n              />\n              <input type=\"submit\" value=\"Search\" />\n            </form>\n          </div>\n\n          <div id=\"search-types\">\n            Search type:\n            <span class=\"search-type\">\n              <input\n                type=\"radio\"\n                id=\"default-search\"\n                name=\"search-type\"\n                value=\"default\"\n                .checked=${this.searchType === SearchType.DEFAULT}\n                @click=${this.searchTypeSelected}\n              />\n              <label for=\"default-search\">Default</label>\n            </span>\n            <span class=\"search-type\">\n              <input\n                type=\"radio\"\n                id=\"metadata-search\"\n                name=\"search-type\"\n                value=\"metadata\"\n                .checked=${this.searchType === SearchType.METADATA}\n                @click=${this.searchTypeSelected}\n              />\n              <label for=\"metadata-search\">Metadata</label>\n            </span>\n            <span class=\"search-type\">\n              <input\n                type=\"radio\"\n                id=\"fulltext-search\"\n                name=\"search-type\"\n                value=\"fulltext\"\n                .checked=${this.searchType === SearchType.FULLTEXT}\n                @click=${this.searchTypeSelected}\n              />\n              <label for=\"fulltext-search\">Full text</label>\n            </span>\n            <span class=\"search-type\">\n              <input\n                type=\"radio\"\n                id=\"tv-search\"\n                name=\"search-type\"\n                value=\"tv\"\n                .checked=${this.searchType === SearchType.TV}\n                @click=${this.searchTypeSelected}\n              />\n              <label for=\"tv-search\">TV</label>\n            </span>\n            <span class=\"search-type\">\n              <input\n                type=\"radio\"\n                id=\"radio-search\"\n                name=\"search-type\"\n                value=\"radio\"\n                .checked=${this.searchType === SearchType.RADIO}\n                @click=${this.searchTypeSelected}\n              />\n              <label for=\"radio-search\">Radio</label>\n            </span>\n          </div>\n\n          <div id=\"toggle-controls\">\n            <button\n              @click=${() => {\n                const details =\n                  this.shadowRoot?.getElementById('cell-size-control');\n                details?.classList.toggle('hidden');\n                const rowGapControls =\n                  this.shadowRoot?.getElementById('cell-gap-control');\n                rowGapControls?.classList.toggle('hidden');\n              }}\n            >\n              Toggle Cell Controls\n            </button>\n            <button\n              @click=${() => {\n                const details = this.shadowRoot?.getElementById(\n                  'latest-event-details',\n                );\n                details?.classList.toggle('hidden');\n              }}\n            >\n              Last Event Captured\n            </button>\n          </div>\n\n          <div id=\"last-event\">\n            <pre id=\"latest-event-details\" class=\"hidden\">\n              ${JSON.stringify(this.latestAction, null, 2)}\n            </pre\n            >\n          </div>\n\n          <fieldset class=\"cell-controls\">\n            <legend>Cell Controls</legend>\n            <div>\n              <label for=\"cell-width-slider\">Cell width:</label>\n              <input\n                type=\"range\"\n                min=\"10\"\n                max=\"100\"\n                value=\"18\"\n                step=\"0.1\"\n                id=\"cell-width-slider\"\n                @input=${this.widthChanged}\n              />\n              <span>${this.cellWidth}rem</span>\n            </div>\n            <div>\n              <label for=\"cell-height-slider\">Cell height:</label>\n              <input\n                type=\"range\"\n                min=\"10\"\n                max=\"100\"\n                value=\"29\"\n                step=\"0.1\"\n                id=\"cell-height-slider\"\n                @input=${this.heightChanged}\n              />\n              <span>${this.cellHeight}rem</span>\n            </div>\n            <div>\n              <label for=\"cell-row-gap-slider\">Row gap:</label>\n              <input\n                type=\"range\"\n                min=\"0\"\n                max=\"5\"\n                value=\"1.7\"\n                step=\"0.1\"\n                id=\"cell-row-gap-slider\"\n                @input=${this.rowGapChanged}\n              />\n              <span>${this.rowGap}rem</span>\n            </div>\n            <div>\n              <label for=\"cell-col-gap-slider\">Col gap:</label>\n              <input\n                type=\"range\"\n                min=\"0\"\n                max=\"5\"\n                value=\"1.7\"\n                step=\"0.1\"\n                id=\"cell-col-gap-slider\"\n                @input=${this.colGapChanged}\n              />\n              <span>${this.colGap}rem</span>\n            </div>\n          </fieldset>\n\n          <fieldset class=\"other-controls\">\n            <legend>Other Controls</legend>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"simulate-login\"\n                @click=${this.loginChanged}\n              />\n              <label for=\"simulate-login\">Simulate login</label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-date-picker\"\n                checked\n                @click=${this.datePickerChanged}\n              />\n              <label for=\"enable-date-picker\">Enable date picker</label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-facets\"\n                checked\n                @click=${this.facetsChanged}\n              />\n              <label for=\"enable-facets\">Enable facets</label>\n            </div>\n            <div class=\"checkbox-control indent\">\n              <input\n                type=\"checkbox\"\n                id=\"lazy-load-facets\"\n                ?disabled=${this.suppressFacets}\n                @click=${this.lazyLoadFacetsChanged}\n              />\n              <label for=\"lazy-load-facets\">Lazy load facets</label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-management\"\n                @click=${this.manageModeCheckboxChanged}\n              />\n              <label for=\"enable-management\">Enable manage mode</label>\n            </div>\n            <div class=\"checkbox-control indent\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-search-management\"\n                @click=${this.SearchManageModeCheckboxChanged}\n              />\n              <label for=\"enable-search-management\">Search</label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-smart-facet-bar\"\n                @click=${this.smartFacetBarCheckboxChanged}\n              />\n              <label for=\"enable-smart-facet-bar\">Enable smart facet bar</label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-tile-actions\"\n                @click=${this.tileActionsCheckboxChanged}\n              />\n              <label for=\"enable-tile-actions\"\n                >Enable tile action buttons</label\n              >\n            </div>\n          </fieldset>\n\n          <fieldset class=\"cb-visual-appearance\">\n            <legend>CB Visual Appearance</legend>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"show-facet-group-outline-check\"\n                @click=${this.toggleFacetGroupOutline}\n              />\n              <label for=\"show-facet-group-outline-check\">\n                Show facet group outlines\n              </label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"show-outline-check\"\n                @click=${this.outlineChanged}\n              />\n              <label for=\"show-outline-check\">Show cell outlines</label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"minimal-tiles-check\"\n                @click=${this.minimalTilesChanged}\n              />\n              <label for=\"minimal-tiles-check\">Minimal tile layouts</label>\n            </div>\n          </fieldset>\n\n          <fieldset class=\"user-profile-controls\">\n            <legend>User Profile Controls</legend>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-facet-top-slot\"\n                @click=${this.facetTopSlotCheckboxChanged}\n              />\n              <label for=\"enable-facet-top-slot\">Show facet top slot</label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-cb-top-slot\"\n                @click=${this.cbTopSlotCheckboxChanged}\n              />\n              <label for=\"enable-cb-top-slot\">Show CB top slot</label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-sortbar-left-slot\"\n                @click=${this.sortBarLeftSlotCheckboxChanged}\n              />\n              <label for=\"enable-sortbar-left-slot\"\n                >Show sortbar left slot</label\n              >\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-sortbar-right-slot\"\n                @click=${this.sortBarRightSlotCheckboxChanged}\n              />\n              <label for=\"enable-sortbar-right-slot\"\n                >Show sortbar right slot</label\n              >\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-result-last-tile-slot\"\n                @click=${this.resultLastTileSlotCheckboxChanged}\n              />\n              <label for=\"enable-result-last-tile-slot\">\n                Show result last tile slot\n              </label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-replaced-sort-options\"\n                @click=${this.replaceSortOptionsChanged}\n              />\n              <label for=\"enable-replaced-sort-options\">\n                Show replaced sort options\n              </label>\n            </div>\n            <div class=\"text-input-control\">\n              <label for=\"within-profile-input\">withinProfile</label>\n              <input\n                type=\"text\"\n                id=\"within-profile-input\"\n                placeholder=\"e.g. @foobar\"\n                @change=${(e: Event) => {\n                  const val = (e.target as HTMLInputElement).value.trim();\n                  this.withinProfile = val || undefined;\n                }}\n              />\n            </div>\n            <details class=\"profile-element-controls\">\n              <summary>\n                Profile tab\n                (profileElement)${this.profileElement\n                  ? html`: <strong>${this.profileElement}</strong>`\n                  : ''}\n              </summary>\n              <div class=\"profile-element-options\">\n                <div class=\"checkbox-control\">\n                  <input\n                    type=\"radio\"\n                    id=\"profile-none\"\n                    name=\"profile-element\"\n                    value=\"\"\n                    checked\n                    @click=${this.profileElementChanged}\n                  />\n                  <label for=\"profile-none\">None</label>\n                </div>\n                ${(\n                  [\n                    'uploads',\n                    'favorites',\n                    'reviews',\n                    'collections',\n                    'lending',\n                    'web_archives',\n                    'forum_posts',\n                  ] as PageElementName[]\n                ).map(\n                  tab => html`\n                    <div class=\"checkbox-control\">\n                      <input\n                        type=\"radio\"\n                        id=\"profile-${tab}\"\n                        name=\"profile-element\"\n                        value=\"${tab}\"\n                        @click=${this.profileElementChanged}\n                      />\n                      <label for=\"profile-${tab}\">${tab}</label>\n                    </div>\n                  `,\n                )}\n              </div>\n            </details>\n          </fieldset>\n\n          <fieldset class=\"user-profile-controls\">\n            <legend>Set Placeholder Types</legend>\n            <div class=\"checkbox-control\">\n              <input\n                id=\"enable-loading-placeholder\"\n                type=\"radio\"\n                @click=${() => this.setPlaceholderType('loading-placeholder')}\n                name=\"placeholder-radio\"\n              />\n              <label for=\"enable-loading-placeholder\"\n                >Loading Placeholder</label\n              >\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                id=\"enable-empty-placeholder\"\n                type=\"radio\"\n                @click=${() => this.setPlaceholderType('error-placeholder')}\n                value=\"empty-placeholder\"\n                name=\"placeholder-radio\"\n              />\n              <label for=\"enable-empty-placeholder\">Empty Placeholder</label>\n            </div>\n          </fieldset>\n        </div>\n        <button id=\"toggle-dev-tools-btn\" @click=${this.toggleDevTools}>\n          Toggle Search Controls\n        </button>\n      </div>\n      <div id=\"collection-browser-container\">\n        <collection-browser\n          facetPaneVisible\n          .baseNavigationUrl=${'https://archive.org'}\n          .baseImageUrl=${'https://archive.org'}\n          .searchService=${this.searchService}\n          .resizeObserver=${this.resizeObserver}\n          .showHistogramDatePicker=${true}\n          .suppressFacets=${this.suppressFacets}\n          .lazyLoadFacets=${this.lazyLoadFacets}\n          .loggedIn=${this.loggedIn}\n          .modalManager=${this.modalManager}\n          .analyticsHandler=${this.analyticsHandler}\n          .withinProfile=${this.withinProfile}\n          .profileElement=${this.profileElement}\n          .pageContext=${'search'}\n          @visiblePageChanged=${this.visiblePageChanged}\n          @baseQueryChanged=${this.baseQueryChanged}\n          @searchTypeChanged=${this.searchTypeChanged}\n          @manageModeChanged=${this.manageModeChanged}\n          @itemRemovalRequested=${this.handleItemRemovalRequest}\n          @itemManagerRequested=${this.handleItemManagerRequest}\n          @tileActionClicked=${this.handleTileActionClicked}\n        >\n          ${this.toggleSlots\n            ? html`<div slot=\"sortbar-left-slot\">Sort Slot</div>`\n            : nothing}\n          ${this.toggleSlots\n            ? html`<div slot=\"facet-top-slot\">Facet Slot</div>`\n            : nothing}\n        </collection-browser>\n      </div>\n      <modal-manager></modal-manager>\n    `;\n  }\n\n  private async setPlaceholderType(type: string) {\n    switch (type) {\n      case 'loading-placeholder':\n        this.collectionBrowser.baseQuery = '';\n        this.collectionBrowser.suppressPlaceholders = true;\n        this.collectionBrowser.clearResultsOnEmptyQuery = true;\n        this.requestUpdate();\n        await this.collectionBrowser.updateComplete;\n        break;\n      default:\n        break;\n    }\n  }\n\n  private baseQueryChanged(e: CustomEvent<{ baseQuery?: string }>): void {\n    this.searchQuery = e.detail.baseQuery;\n  }\n\n  /** Handler for search type changes coming from collection browser */\n  private searchTypeChanged(e: CustomEvent<SearchType>): void {\n    this.searchType = e.detail;\n  }\n\n  /** Handler for user input selecting a search type */\n  private searchTypeSelected(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.searchType = this.searchTypeFromSelectedOption(target.value);\n  }\n\n  private searchTypeFromSelectedOption(option: string): SearchType {\n    switch (option) {\n      case 'metadata':\n        return SearchType.METADATA;\n      case 'fulltext':\n        return SearchType.FULLTEXT;\n      case 'tv':\n        return SearchType.TV;\n      case 'radio':\n        return SearchType.RADIO;\n      default:\n        return SearchType.DEFAULT;\n    }\n  }\n\n  private loginChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      this.loggedIn = true;\n    } else {\n      this.loggedIn = false;\n    }\n  }\n\n  private outlineChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      this.collectionBrowser.style.setProperty(\n        '--infiniteScrollerCellOutline',\n        '1px solid #33D1FF',\n      );\n    } else {\n      this.collectionBrowser.style.removeProperty(\n        '--infiniteScrollerCellOutline',\n      );\n    }\n  }\n\n  private minimalTilesChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    const scroller = this.collectionBrowser?.shadowRoot!.querySelector(\n      'infinite-scroller',\n    ) as InfiniteScroller;\n    const tileDispatchers = [\n      ...scroller.shadowRoot!.querySelectorAll('tile-dispatcher'),\n    ] as TileDispatcher[];\n\n    if (target.checked) {\n      tileDispatchers?.forEach(tile => (tile.layoutType = 'minimal'));\n    } else {\n      tileDispatchers?.forEach(tile => (tile.layoutType = 'default'));\n    }\n  }\n\n  private toggleDevTools() {\n    const pageUrl = new URL(window.location.href);\n    const { searchParams } = pageUrl;\n\n    if (searchParams.get('hide-dev-tools')) {\n      searchParams.delete('hide-dev-tools');\n    } else {\n      searchParams.set('hide-dev-tools', 'true');\n    }\n\n    this.shadowRoot?.getElementById('dev-tools')?.classList.toggle('hidden');\n\n    if (window.history.replaceState) {\n      window.history.replaceState(\n        {\n          path: pageUrl.toString(),\n        },\n        '',\n        pageUrl.toString(),\n      );\n    }\n  }\n\n  private toggleFacetGroupOutline(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      this.collectionBrowser.classList.add('showFacetGroupOutlines');\n      this.modalManager.classList.add('showFacetGroupOutlines');\n    } else {\n      this.collectionBrowser.classList.remove('showFacetGroupOutlines');\n      this.modalManager.classList.remove('showFacetGroupOutlines');\n    }\n  }\n\n  private datePickerChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.collectionBrowser.showHistogramDatePicker = target.checked;\n\n    // When disabling the date picker from the demo app, also clear any existing date range params\n    if (!this.collectionBrowser.showHistogramDatePicker) {\n      this.collectionBrowser.minSelectedDate = undefined;\n      this.collectionBrowser.maxSelectedDate = undefined;\n    }\n  }\n\n  private facetsChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.suppressFacets = !target.checked;\n  }\n\n  private lazyLoadFacetsChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.lazyLoadFacets = target.checked;\n  }\n\n  /**\n   * Handler for when collection browser's manage mode changes.\n   * This lets us disable the checkbox in the dev panel when the user cancels out\n   * of manage mode from within collection browser.\n   */\n  private manageModeChanged(e: CustomEvent<boolean>): void {\n    const manageCheckbox = this.shadowRoot?.querySelector(\n      '#enable-management',\n    ) as HTMLInputElement;\n    if (manageCheckbox) manageCheckbox.checked = e.detail;\n  }\n\n  /**\n   * Handler for item removal\n   */\n  private handleItemRemovalRequest(e: CustomEvent) {\n    this.collectionBrowser.showRemoveItemsProcessingModal();\n    console.log('itemRemovalRequested: ', e.detail.items);\n\n    setTimeout(() => {\n      // execute item-removal-service, and response is successfully deleted\n      const status = false;\n\n      if (status) {\n        // looking for success?\n        this.collectionBrowser.isManageView = false;\n        this.modalManager?.closeModal();\n        this.modalManager?.classList.remove('remove-items');\n      } else {\n        // looking for failure?\n        this.collectionBrowser.showRemoveItemsErrorModal();\n      }\n    }, 2000); // let's wait to see processing modal\n  }\n\n  /**\n   * Handler when item manage requested\n   */\n  private handleItemManagerRequest(e: CustomEvent) {\n    console.log('itemManagerRequested: ', e.detail.items);\n  }\n\n  /**\n   * Handler for when the dev panel's \"Enable manage mode\" checkbox is changed.\n   */\n  private manageModeCheckboxChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.collectionBrowser.isManageView = target.checked;\n    this.collectionBrowser.manageViewLabel =\n      'Select items to remove (customizable texts)';\n  }\n\n  /**\n   * Handler when the dev panel's \"Enable manage mode -> Search\" checkbox is changed.\n   */\n  private SearchManageModeCheckboxChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.collectionBrowser.pageContext = target.checked\n      ? 'search'\n      : 'collection';\n  }\n\n  /**\n   * Handler for when the dev panel's \"Enable smart facet bar\" checkbox is changed.\n   */\n  private smartFacetBarCheckboxChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.collectionBrowser.showSmartFacetBar = target.checked;\n  }\n\n  /**\n   * Handler for when the dev panel's \"Enable tile action buttons\" checkbox is changed.\n   */\n  private tileActionsCheckboxChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.collectionBrowser.tileActions = target.checked\n      ? [{ id: 'demo-action', label: 'Return' }]\n      : [];\n  }\n\n  /**\n   * Handler for tile action button clicks (logs to console for QA).\n   */\n  private handleTileActionClicked(\n    e: CustomEvent<{ actionId: string; model: unknown }>,\n  ) {\n    console.log('Tile action clicked:', e.detail.actionId, e.detail.model);\n  }\n\n  /**\n   * Handler for when the dev panel's \"Show facet top slot\" checkbox is changed.\n   */\n  private facetTopSlotCheckboxChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n\n    const p = document.createElement('p');\n    p.style.setProperty('border', '1px solid #000');\n    p.textContent = 'New stuff as a child.';\n    p.style.setProperty('height', '20rem');\n    p.style.backgroundColor = '#00000';\n    p.setAttribute('slot', 'facet-top-slot');\n\n    if (target.checked) {\n      this.collectionBrowser.appendChild(p);\n    } else {\n      this.collectionBrowser.removeChild(\n        this.collectionBrowser.lastElementChild as Element,\n      );\n    }\n  }\n\n  private toggleSlotOptions() {\n    this.toggleSlots = !this.toggleSlots;\n  }\n\n  private resultLastTileSlotCheckboxChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n\n    const div = document.createElement('div');\n    const title = document.createElement('h3');\n    title.textContent = 'Upload';\n\n    div.setAttribute('slot', 'result-last-tile');\n    div.setAttribute('class', 'result-last-tile');\n    div.appendChild(title);\n\n    if (target.checked) {\n      this.collectionBrowser.appendChild(div);\n    } else {\n      this.collectionBrowser.removeChild(\n        this.collectionBrowser.lastElementChild as Element,\n      );\n    }\n  }\n\n  /**\n   * Handler for when the dev panel's \"Show cb top slot\" checkbox is changed.\n   */\n  private cbTopSlotCheckboxChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n\n    const p = document.createElement('p');\n    p.style.setProperty('border', '1px solid #000');\n    p.textContent = 'My Favorite list header.';\n    p.style.setProperty('height', '10rem');\n    p.style.backgroundColor = '#00000';\n    p.setAttribute('slot', 'cb-top-slot');\n\n    if (target.checked) {\n      this.collectionBrowser.appendChild(p);\n    } else {\n      this.collectionBrowser.removeChild(\n        this.collectionBrowser.lastElementChild as Element,\n      );\n    }\n  }\n\n  /**\n   * Handler for when the dev panel's \"Show sort bar top left slot\" checkbox is changed.\n   */\n  private sortBarLeftSlotCheckboxChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n\n    if (target.checked) {\n      const div = document.createElement('div');\n      div.style.setProperty('border', '1px solid #000');\n      div.textContent = 'Btn';\n      div.style.setProperty('height', '3rem');\n      div.style.setProperty('width', '3rem');\n      div.setAttribute('slot', 'sort-options-left');\n\n      this.collectionBrowser.appendChild(div);\n    } else {\n      const slottedEl = this.collectionBrowser.querySelector(\n        '[slot=\"sort-options-left\"]',\n      );\n      if (slottedEl) this.collectionBrowser.removeChild(slottedEl);\n    }\n  }\n\n  /**\n   * Handler for when the dev panel's \"Show sort bar top right slot\" checkbox is changed.\n   */\n  private sortBarRightSlotCheckboxChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n\n    if (target.checked) {\n      const div = document.createElement('div');\n      div.style.setProperty('border', '1px solid #000');\n      div.textContent = 'Search bar';\n      div.style.setProperty('height', '3rem');\n      div.style.setProperty('width', '15rem');\n      div.setAttribute('slot', 'sort-options-right');\n\n      this.collectionBrowser.appendChild(div);\n    } else {\n      const slottedEl = this.collectionBrowser.querySelector(\n        '[slot=\"sort-options-right\"]',\n      );\n      if (slottedEl) this.collectionBrowser.removeChild(slottedEl);\n    }\n  }\n\n  private rowGapChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.rowGap = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserRowGap',\n      `${input.value}rem`,\n    );\n  }\n\n  private colGapChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.colGap = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserColGap',\n      `${input.value}rem`,\n    );\n  }\n\n  private widthChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.cellWidth = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMinWidth',\n      `${input.value}rem`,\n    );\n  }\n\n  private heightChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.cellHeight = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMinHeight',\n      `${input.value}rem`,\n    );\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMaxHeight',\n      `${input.value}rem`,\n    );\n  }\n\n  private visiblePageChanged(e: CustomEvent<{ pageNumber: number }>) {\n    const { pageNumber } = e.detail;\n    if (pageNumber === this.currentPage) return;\n    this.currentPage = pageNumber;\n  }\n\n  /**\n   * Handler for when the dev panel's \"Replace sort options\" checkbox is changed.\n   */\n  private replaceSortOptionsChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n\n    if (target.checked) {\n      const p = document.createElement('p');\n      p.style.setProperty('border', '1px solid #000');\n      p.textContent = 'New stuff as a child.';\n      p.style.setProperty('height', '20px');\n      p.setAttribute('slot', 'sort-options');\n\n      this.collectionBrowser.appendChild(p);\n      this.collectionBrowser.enableSortOptionsSlot = true;\n    } else {\n      const slottedEl = this.collectionBrowser.querySelector(\n        '[slot=\"sort-options\"]',\n      );\n      if (slottedEl) this.collectionBrowser.removeChild(slottedEl);\n      this.collectionBrowser.enableSortOptionsSlot = false;\n    }\n  }\n\n  private profileElementChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.profileElement = (input.value as PageElementName) || undefined;\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n      --primaryButtonBGColor: #194880;\n      --ia-theme-link-color: #4b64ff;\n    }\n\n    /* add the following styles to ensure proper modal visibility */\n    body.modal-manager-open {\n      overflow: hidden;\n    }\n    modal-manager {\n      display: none;\n    }\n    modal-manager[mode='open'] {\n      display: block;\n    }\n    modal-manager.remove-items {\n      --modalWidth: 58rem;\n      --modalBorder: 2px solid var(--primaryButtonBGColor, #194880);\n      --modalTitleLineHeight: 4rem;\n      --modalTitleFontSize: 1.8rem;\n    }\n    modal-manager.more-search-facets {\n      --modalWidth: 85rem;\n      --modalBorder: 2px solid var(--primaryButtonBGColor, #194880);\n      --modalTitleLineHeight: 4rem;\n      --modalTitleFontSize: 1.8rem;\n      --modalBottomPadding: 0;\n      --modalScrollOffset: 0;\n      --modalCornerRadius: 0.5rem;\n    }\n    modal-manager.expanded-date-picker {\n      --modalWidth: 58rem;\n      --modalBorder: 2px solid var(--primaryButtonBGColor, #194880);\n      --modalTitleLineHeight: 4rem;\n      --modalTitleFontSize: 1.8rem;\n      --modalCornerRadius: 0;\n      --modalBottomPadding: 0;\n      --modalBottomMargin: 0;\n      --modalScrollOffset: 0;\n      --modalCornerRadius: 0.5rem;\n    }\n\n    input,\n    button {\n      font-size: 1.6rem;\n    }\n\n    modal-manager.showFacetGroupOutlines,\n    collection-browser.showFacetGroupOutlines {\n      --facet-row-border-top: 1px solid red;\n      --facet-row-border-bottom: 1px solid blue;\n    }\n\n    collection-browser {\n      /* Same as production */\n      max-width: 135rem;\n      margin: auto;\n    }\n\n    #collection-browser-container {\n      /* Same as production */\n      padding-left: 0.5rem;\n      margin-bottom: 2rem;\n    }\n\n    #base-query-field {\n      width: 300px;\n    }\n\n    .dev-tool-container {\n      position: relative;\n    }\n    #dev-tools {\n      position: relative;\n      top: 0;\n      left: 0;\n      z-index: 1;\n      -webkit-backdrop-filter: blur(10px);\n      backdrop-filter: blur(10px);\n      padding: 0.5rem 1rem;\n      border: 1px solid black;\n      font-size: 1.4rem;\n      background: #ffffffb3;\n    }\n\n    #dev-tools > * {\n      display: flex;\n    }\n\n    #toggle-dev-tools-btn {\n      position: fixed;\n      left: 77.4%;\n      top: 0;\n      background: red;\n      padding: 5px;\n      color: white;\n      font-size: 1.4rem;\n      margin: 0;\n      z-index: 1;\n      cursor: pointer;\n    }\n\n    #search-and-page-inputs {\n      flex-wrap: wrap;\n      row-gap: 2px;\n    }\n\n    #search-and-page-inputs > form {\n      margin-right: 1rem;\n    }\n\n    #search-and-page-inputs label {\n      display: inline-block;\n      min-width: 50px;\n    }\n\n    #page-number-input {\n      width: 75px;\n    }\n\n    .search-type {\n      margin-right: 1rem;\n    }\n\n    .cell-controls {\n      display: flex;\n      flex-wrap: wrap;\n    }\n    .cell-controls div {\n      display: flex;\n      align-items: center;\n    }\n    .cell-controls input[type='range'] {\n      width: 120px;\n    }\n    #cell-controls label {\n      display: inline-block;\n      width: 10rem;\n    }\n\n    #cell-size-control,\n    #cell-gap-control {\n      flex-basis: calc(50% - 1rem);\n      flex-grow: 1;\n    }\n\n    #cell-gap-control {\n      margin-left: 1rem;\n    }\n\n    #checkbox-controls {\n      padding-top: 0.5rem;\n      flex-wrap: wrap;\n    }\n\n    .checkbox-control {\n      flex-basis: 50%;\n    }\n    .checkbox-control.indent {\n      margin-left: 10px;\n    }\n    .checkbox-control label {\n      user-select: none;\n    }\n\n    #last-event {\n      background-color: aliceblue;\n      padding: 5px;\n      margin: 5px auto;\n    }\n\n    .hidden {\n      display: none;\n    }\n\n    #toggle-controls {\n      background-color: lightskyblue;\n      padding: 5px;\n      margin: 5px auto;\n    }\n\n    #search-types {\n      margin: 5px auto;\n      background-color: aliceblue;\n      font-size: 1.6rem;\n    }\n\n    // slots\n    div[slot='cb-top-slot'] {\n      height: 50px;\n      border: 1px solid red;\n      background: bisque;\n    }\n    div[slot='facet-top-slot'] {\n      border: 1px solid red;\n      width: 100%;\n      height: 150px;\n      background-color: darkseagreen;\n    }\n    div[slot='sort-slot-left'] {\n      height: 50px;\n      border: 1px solid red;\n      background: bisque;\n    }\n\n    /* user profile controls */\n    .user-profile-controls {\n      width: fit-content;\n    }\n\n    .profile-element-controls {\n      margin-top: 4px;\n    }\n\n    .profile-element-controls summary {\n      cursor: pointer;\n      user-select: none;\n    }\n\n    .profile-element-options {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      column-gap: 8px;\n      margin-top: 4px;\n    }\n\n    fieldset {\n      display: inline-block !important;\n    }\n\n    .result-last-tile {\n      border-radius: 4px;\n      background-color: white;\n      border: 3px dashed #555;\n      box-shadow: none;\n      display: grid;\n      align-content: center;\n    }\n    .result-last-tile:hover {\n      box-shadow: rgba(8, 8, 32, 0.8) 0 0 6px 2px;\n      transition: box-shadow 0.1s ease 0s;\n      cursor: pointer;\n      border: 3px dashed #4b64ff;\n    }\n    .result-last-tile h3 {\n      margin-bottom: 4rem;\n      margin: 0px auto;\n      font-size: 2.8rem;\n      color: rgb(44, 44, 44);\n      font-weight: 200;\n      text-align: center;\n    }\n  `;\n}\n"]}
+{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../src/app-root.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  AnalyticsEvent,\n  AnalyticsManager,\n} from '@internetarchive/analytics-manager';\nimport {\n  PageElementName,\n  SearchService,\n  SearchServiceInterface,\n  SearchType,\n} from '@internetarchive/search-service';\nimport { html, css, LitElement, PropertyValues, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\n\nimport type { ModalManagerInterface } from '@internetarchive/modal-manager';\nimport type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';\nimport type { CollectionBrowser } from '../src/collection-browser';\n\nimport '../src/collection-browser';\nimport { InfiniteScroller } from '@internetarchive/infinite-scroller';\nimport { TileDispatcher } from './tiles/tile-dispatcher';\nimport type { TilePreviewOptions } from './tiles/preview/tile-preview-media';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n  private static readonly SOUND_KEY = 'iaux-cb-tile-preview-sound';\n\n  private static readSoundPreference(): boolean {\n    try {\n      return localStorage.getItem(AppRoot.SOUND_KEY) === '1';\n    } catch {\n      return false;\n    }\n  }\n\n  private searchService: SearchServiceInterface =\n    this.initSearchServiceFromUrlParams();\n\n  private resizeObserver = new SharedResizeObserver();\n\n  @state() private toggleSlots: boolean = false;\n\n  @state() private currentPage?: number;\n\n  @state() private searchQuery?: string;\n\n  @state() private withinCollection?: string;\n\n  @state() private cellWidth: number = 18;\n\n  @state() private cellHeight: number = 29;\n\n  @state() private rowGap: number = 1.7;\n\n  @state() private colGap: number = 1.7;\n\n  @state() private suppressFacets: boolean = false;\n\n  @state() private enablePinchZoom: boolean = new URLSearchParams(\n    window.location.search,\n  ).has('pinchZoom');\n\n  @state() private lazyLoadFacets: boolean = false;\n\n  @state() private loggedIn: boolean = false;\n\n  /** Real video clips for movies, unless the page is opened with `?clips=0`. */\n  @state() private tilePreviewOptions: TilePreviewOptions = {\n    clips: new URLSearchParams(window.location.search).get('clips') !== '0',\n    sound: AppRoot.readSoundPreference(),\n  };\n\n  @state() private enableTilePreviews: boolean =\n    new URLSearchParams(window.location.search).get('previews') !== '0';\n\n  @state() private searchType: SearchType = SearchType.METADATA;\n\n  @state() private profileElement?: PageElementName;\n\n  @state() private withinProfile?: string;\n\n  @property({ type: Object, reflect: false }) latestAction?: AnalyticsEvent;\n\n  @query('#base-query-field') private baseQueryField!: HTMLInputElement;\n\n  @query('#base-collection-field')\n  private baseCollectionField!: HTMLInputElement;\n\n  @query('#page-number-input') private pageNumberInput!: HTMLInputElement;\n\n  @query('collection-browser') private collectionBrowser!: CollectionBrowser;\n\n  @query('modal-manager') private modalManager!: ModalManagerInterface;\n\n  private analyticsManager = new AnalyticsManager();\n\n  private analyticsHandler: AnalyticsManagerInterface = {\n    sendPing: this.sendAnalytics.bind(this),\n    sendEvent: this.sendAnalytics.bind(this),\n    sendEventNoSampling: this.sendAnalytics.bind(this),\n  };\n\n  private sendAnalytics(ae: AnalyticsEvent) {\n    console.log('Analytics Received ----', ae);\n    this.latestAction = ae;\n    this.analyticsManager?.sendEvent(ae);\n  }\n\n  private initSearchServiceFromUrlParams() {\n    const params = new URL(window.location.href).searchParams;\n    return new SearchService({\n      includeCredentials: false,\n      baseUrl: params.get('search_base_url') ?? undefined,\n      servicePath: params.get('search_service_path') ?? undefined,\n      debuggingEnabled: !!params.get('debugging'),\n    });\n  }\n\n  private searchPressed(e: Event) {\n    e.preventDefault();\n    this.searchQuery = this.baseQueryField.value;\n    this.collectionBrowser.searchType = this.searchType;\n\n    this.goToCurrentPage();\n  }\n\n  private collectionChanged(e: Event) {\n    e.preventDefault();\n    this.withinCollection = this.baseCollectionField.value;\n    this.collectionBrowser.withinCollection = this.withinCollection;\n\n    this.goToCurrentPage();\n  }\n\n  private goToCurrentPage() {\n    const page = this.currentPage ?? 1;\n    if (page > 1) {\n      this.collectionBrowser.goToPage(page);\n    } else {\n      // Ensure we reset the initial page\n      this.collectionBrowser.initialPageNumber = 1;\n    }\n  }\n\n  private changePagePressed(e: Event) {\n    e.preventDefault();\n    this.currentPage = this.pageNumberInput.valueAsNumber;\n    this.collectionBrowser.goToPage(this.currentPage);\n  }\n\n  protected override updated(changed: PropertyValues): void {\n    if (changed.has('currentPage') && this.currentPage) {\n      this.pageNumberInput.value = this.currentPage.toString();\n    }\n\n    if (changed.has('searchQuery')) {\n      this.queryUpdated();\n    }\n  }\n\n  private queryUpdated() {\n    this.collectionBrowser.baseQuery = this.searchQuery;\n  }\n\n  private get getClass() {\n    const searchParams = new URLSearchParams(window.location.search);\n\n    return searchParams.get('hide-dev-tools') ? 'hidden' : '';\n  }\n\n  render() {\n    return html`\n      <div class=\"dev-tool-container\">\n        <div id=\"dev-tools\" class=${this.getClass}>\n          <div id=\"search-and-page-inputs\">\n            <form @submit=${this.searchPressed}>\n              <label for=\"base-query-field\"> Query: </label>\n              <input\n                type=\"text\"\n                id=\"base-query-field\"\n                .value=${this.searchQuery ?? ''}\n              />\n              <input type=\"submit\" value=\"Search\" />\n            </form>\n            <form @submit=${this.changePagePressed}>\n              <label for=\"page-number-input\"> Page: </label>\n              <input type=\"number\" value=\"1\" id=\"page-number-input\" />\n              <input type=\"submit\" value=\"Go\" />\n            </form>\n          </div>\n          <div>\n            <form @submit=${this.collectionChanged}>\n              <label for=\"base-collection-field\"> Within collection: </label>\n              <input\n                type=\"text\"\n                id=\"base-collection-field\"\n                .value=${this.withinCollection ?? ''}\n              />\n              <input type=\"submit\" value=\"Search\" />\n            </form>\n          </div>\n\n          <div id=\"search-types\">\n            Search type:\n            <span class=\"search-type\">\n              <input\n                type=\"radio\"\n                id=\"default-search\"\n                name=\"search-type\"\n                value=\"default\"\n                .checked=${this.searchType === SearchType.DEFAULT}\n                @click=${this.searchTypeSelected}\n              />\n              <label for=\"default-search\">Default</label>\n            </span>\n            <span class=\"search-type\">\n              <input\n                type=\"radio\"\n                id=\"metadata-search\"\n                name=\"search-type\"\n                value=\"metadata\"\n                .checked=${this.searchType === SearchType.METADATA}\n                @click=${this.searchTypeSelected}\n              />\n              <label for=\"metadata-search\">Metadata</label>\n            </span>\n            <span class=\"search-type\">\n              <input\n                type=\"radio\"\n                id=\"fulltext-search\"\n                name=\"search-type\"\n                value=\"fulltext\"\n                .checked=${this.searchType === SearchType.FULLTEXT}\n                @click=${this.searchTypeSelected}\n              />\n              <label for=\"fulltext-search\">Full text</label>\n            </span>\n            <span class=\"search-type\">\n              <input\n                type=\"radio\"\n                id=\"tv-search\"\n                name=\"search-type\"\n                value=\"tv\"\n                .checked=${this.searchType === SearchType.TV}\n                @click=${this.searchTypeSelected}\n              />\n              <label for=\"tv-search\">TV</label>\n            </span>\n            <span class=\"search-type\">\n              <input\n                type=\"radio\"\n                id=\"radio-search\"\n                name=\"search-type\"\n                value=\"radio\"\n                .checked=${this.searchType === SearchType.RADIO}\n                @click=${this.searchTypeSelected}\n              />\n              <label for=\"radio-search\">Radio</label>\n            </span>\n          </div>\n\n          <div id=\"toggle-controls\">\n            <button\n              @click=${() => {\n                const details =\n                  this.shadowRoot?.getElementById('cell-size-control');\n                details?.classList.toggle('hidden');\n                const rowGapControls =\n                  this.shadowRoot?.getElementById('cell-gap-control');\n                rowGapControls?.classList.toggle('hidden');\n              }}\n            >\n              Toggle Cell Controls\n            </button>\n            <button\n              @click=${() => {\n                const details = this.shadowRoot?.getElementById(\n                  'latest-event-details',\n                );\n                details?.classList.toggle('hidden');\n              }}\n            >\n              Last Event Captured\n            </button>\n          </div>\n\n          <div id=\"last-event\">\n            <pre id=\"latest-event-details\" class=\"hidden\">\n              ${JSON.stringify(this.latestAction, null, 2)}\n            </pre\n            >\n          </div>\n\n          <fieldset class=\"cell-controls\">\n            <legend>Cell Controls</legend>\n            <div>\n              <label for=\"cell-width-slider\">Cell width:</label>\n              <input\n                type=\"range\"\n                min=\"10\"\n                max=\"100\"\n                value=\"18\"\n                step=\"0.1\"\n                id=\"cell-width-slider\"\n                @input=${this.widthChanged}\n              />\n              <span>${this.cellWidth}rem</span>\n            </div>\n            <div>\n              <label for=\"cell-height-slider\">Cell height:</label>\n              <input\n                type=\"range\"\n                min=\"10\"\n                max=\"100\"\n                value=\"29\"\n                step=\"0.1\"\n                id=\"cell-height-slider\"\n                @input=${this.heightChanged}\n              />\n              <span>${this.cellHeight}rem</span>\n            </div>\n            <div>\n              <label for=\"cell-row-gap-slider\">Row gap:</label>\n              <input\n                type=\"range\"\n                min=\"0\"\n                max=\"5\"\n                value=\"1.7\"\n                step=\"0.1\"\n                id=\"cell-row-gap-slider\"\n                @input=${this.rowGapChanged}\n              />\n              <span>${this.rowGap}rem</span>\n            </div>\n            <div>\n              <label for=\"cell-col-gap-slider\">Col gap:</label>\n              <input\n                type=\"range\"\n                min=\"0\"\n                max=\"5\"\n                value=\"1.7\"\n                step=\"0.1\"\n                id=\"cell-col-gap-slider\"\n                @input=${this.colGapChanged}\n              />\n              <span>${this.colGap}rem</span>\n            </div>\n          </fieldset>\n\n          <fieldset class=\"other-controls\">\n            <legend>Other Controls</legend>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"simulate-login\"\n                @click=${this.loginChanged}\n              />\n              <label for=\"simulate-login\">Simulate login</label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-date-picker\"\n                checked\n                @click=${this.datePickerChanged}\n              />\n              <label for=\"enable-date-picker\">Enable date picker</label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-facets\"\n                checked\n                @click=${this.facetsChanged}\n              />\n              <label for=\"enable-facets\">Enable facets</label>\n            </div>\n            <div class=\"checkbox-control indent\">\n              <input\n                type=\"checkbox\"\n                id=\"lazy-load-facets\"\n                ?disabled=${this.suppressFacets}\n                @click=${this.lazyLoadFacetsChanged}\n              />\n              <label for=\"lazy-load-facets\">Lazy load facets</label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-tile-previews\"\n                ?checked=${this.enableTilePreviews}\n                @click=${this.tilePreviewsChanged}\n              />\n              <label for=\"enable-tile-previews\">Live tile previews</label>\n            </div>\n            <div class=\"checkbox-control indent\">\n              <input\n                type=\"checkbox\"\n                id=\"tile-preview-clips\"\n                ?checked=${this.tilePreviewOptions.clips}\n                ?disabled=${!this.enableTilePreviews}\n                @click=${this.tilePreviewClipsChanged}\n              />\n              <label for=\"tile-preview-clips\"\n                >Real video (off: thumbnail frames)</label\n              >\n            </div>\n            <div class=\"checkbox-control indent\">\n              <input\n                type=\"checkbox\"\n                id=\"tile-preview-sound\"\n                ?checked=${this.tilePreviewOptions.sound}\n                ?disabled=${!this.enableTilePreviews}\n                @click=${this.tilePreviewSoundChanged}\n              />\n              <label for=\"tile-preview-sound\">Sound</label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-pinch-zoom\"\n                ?checked=${this.enablePinchZoom}\n                @click=${this.pinchZoomChanged}\n              />\n              <label for=\"enable-pinch-zoom\"\n                >Enable pinch zoom (prototype)</label\n              >\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-management\"\n                @click=${this.manageModeCheckboxChanged}\n              />\n              <label for=\"enable-management\">Enable manage mode</label>\n            </div>\n            <div class=\"checkbox-control indent\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-search-management\"\n                @click=${this.SearchManageModeCheckboxChanged}\n              />\n              <label for=\"enable-search-management\">Search</label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-smart-facet-bar\"\n                @click=${this.smartFacetBarCheckboxChanged}\n              />\n              <label for=\"enable-smart-facet-bar\">Enable smart facet bar</label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-tile-actions\"\n                @click=${this.tileActionsCheckboxChanged}\n              />\n              <label for=\"enable-tile-actions\"\n                >Enable tile action buttons</label\n              >\n            </div>\n          </fieldset>\n\n          <fieldset class=\"cb-visual-appearance\">\n            <legend>CB Visual Appearance</legend>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"show-facet-group-outline-check\"\n                @click=${this.toggleFacetGroupOutline}\n              />\n              <label for=\"show-facet-group-outline-check\">\n                Show facet group outlines\n              </label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"show-outline-check\"\n                @click=${this.outlineChanged}\n              />\n              <label for=\"show-outline-check\">Show cell outlines</label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"minimal-tiles-check\"\n                @click=${this.minimalTilesChanged}\n              />\n              <label for=\"minimal-tiles-check\">Minimal tile layouts</label>\n            </div>\n          </fieldset>\n\n          <fieldset class=\"user-profile-controls\">\n            <legend>User Profile Controls</legend>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-facet-top-slot\"\n                @click=${this.facetTopSlotCheckboxChanged}\n              />\n              <label for=\"enable-facet-top-slot\">Show facet top slot</label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-cb-top-slot\"\n                @click=${this.cbTopSlotCheckboxChanged}\n              />\n              <label for=\"enable-cb-top-slot\">Show CB top slot</label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-sortbar-left-slot\"\n                @click=${this.sortBarLeftSlotCheckboxChanged}\n              />\n              <label for=\"enable-sortbar-left-slot\"\n                >Show sortbar left slot</label\n              >\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-sortbar-right-slot\"\n                @click=${this.sortBarRightSlotCheckboxChanged}\n              />\n              <label for=\"enable-sortbar-right-slot\"\n                >Show sortbar right slot</label\n              >\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-result-last-tile-slot\"\n                @click=${this.resultLastTileSlotCheckboxChanged}\n              />\n              <label for=\"enable-result-last-tile-slot\">\n                Show result last tile slot\n              </label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-replaced-sort-options\"\n                @click=${this.replaceSortOptionsChanged}\n              />\n              <label for=\"enable-replaced-sort-options\">\n                Show replaced sort options\n              </label>\n            </div>\n            <div class=\"text-input-control\">\n              <label for=\"within-profile-input\">withinProfile</label>\n              <input\n                type=\"text\"\n                id=\"within-profile-input\"\n                placeholder=\"e.g. @foobar\"\n                @change=${(e: Event) => {\n                  const val = (e.target as HTMLInputElement).value.trim();\n                  this.withinProfile = val || undefined;\n                }}\n              />\n            </div>\n            <details class=\"profile-element-controls\">\n              <summary>\n                Profile tab\n                (profileElement)${this.profileElement\n                  ? html`: <strong>${this.profileElement}</strong>`\n                  : ''}\n              </summary>\n              <div class=\"profile-element-options\">\n                <div class=\"checkbox-control\">\n                  <input\n                    type=\"radio\"\n                    id=\"profile-none\"\n                    name=\"profile-element\"\n                    value=\"\"\n                    checked\n                    @click=${this.profileElementChanged}\n                  />\n                  <label for=\"profile-none\">None</label>\n                </div>\n                ${(\n                  [\n                    'uploads',\n                    'favorites',\n                    'reviews',\n                    'collections',\n                    'lending',\n                    'web_archives',\n                    'forum_posts',\n                  ] as PageElementName[]\n                ).map(\n                  tab => html`\n                    <div class=\"checkbox-control\">\n                      <input\n                        type=\"radio\"\n                        id=\"profile-${tab}\"\n                        name=\"profile-element\"\n                        value=\"${tab}\"\n                        @click=${this.profileElementChanged}\n                      />\n                      <label for=\"profile-${tab}\">${tab}</label>\n                    </div>\n                  `,\n                )}\n              </div>\n            </details>\n          </fieldset>\n\n          <fieldset class=\"user-profile-controls\">\n            <legend>Set Placeholder Types</legend>\n            <div class=\"checkbox-control\">\n              <input\n                id=\"enable-loading-placeholder\"\n                type=\"radio\"\n                @click=${() => this.setPlaceholderType('loading-placeholder')}\n                name=\"placeholder-radio\"\n              />\n              <label for=\"enable-loading-placeholder\"\n                >Loading Placeholder</label\n              >\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                id=\"enable-empty-placeholder\"\n                type=\"radio\"\n                @click=${() => this.setPlaceholderType('error-placeholder')}\n                value=\"empty-placeholder\"\n                name=\"placeholder-radio\"\n              />\n              <label for=\"enable-empty-placeholder\">Empty Placeholder</label>\n            </div>\n          </fieldset>\n        </div>\n        <button id=\"toggle-dev-tools-btn\" @click=${this.toggleDevTools}>\n          Toggle Search Controls\n        </button>\n      </div>\n      <div id=\"collection-browser-container\">\n        <collection-browser\n          facetPaneVisible\n          .baseNavigationUrl=${'https://archive.org'}\n          .baseImageUrl=${'https://archive.org'}\n          .searchService=${this.searchService}\n          .resizeObserver=${this.resizeObserver}\n          .showHistogramDatePicker=${true}\n          .suppressFacets=${this.suppressFacets}\n          ?enable-pinch-zoom=${this.enablePinchZoom}\n          .lazyLoadFacets=${this.lazyLoadFacets}\n          .loggedIn=${this.loggedIn}\n          .enableTilePreviews=${this.enableTilePreviews}\n          .tilePreviewOptions=${this.tilePreviewOptions}\n          .modalManager=${this.modalManager}\n          .analyticsHandler=${this.analyticsHandler}\n          .withinProfile=${this.withinProfile}\n          .profileElement=${this.profileElement}\n          .pageContext=${'search'}\n          @visiblePageChanged=${this.visiblePageChanged}\n          @baseQueryChanged=${this.baseQueryChanged}\n          @searchTypeChanged=${this.searchTypeChanged}\n          @manageModeChanged=${this.manageModeChanged}\n          @itemRemovalRequested=${this.handleItemRemovalRequest}\n          @itemManagerRequested=${this.handleItemManagerRequest}\n          @tileActionClicked=${this.handleTileActionClicked}\n        >\n          ${this.toggleSlots\n            ? html`<div slot=\"sortbar-left-slot\">Sort Slot</div>`\n            : nothing}\n          ${this.toggleSlots\n            ? html`<div slot=\"facet-top-slot\">Facet Slot</div>`\n            : nothing}\n        </collection-browser>\n      </div>\n      <modal-manager></modal-manager>\n    `;\n  }\n\n  private async setPlaceholderType(type: string) {\n    switch (type) {\n      case 'loading-placeholder':\n        this.collectionBrowser.baseQuery = '';\n        this.collectionBrowser.suppressPlaceholders = true;\n        this.collectionBrowser.clearResultsOnEmptyQuery = true;\n        this.requestUpdate();\n        await this.collectionBrowser.updateComplete;\n        break;\n      default:\n        break;\n    }\n  }\n\n  private baseQueryChanged(e: CustomEvent<{ baseQuery?: string }>): void {\n    this.searchQuery = e.detail.baseQuery;\n  }\n\n  /** Handler for search type changes coming from collection browser */\n  private searchTypeChanged(e: CustomEvent<SearchType>): void {\n    this.searchType = e.detail;\n  }\n\n  /** Handler for user input selecting a search type */\n  private searchTypeSelected(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.searchType = this.searchTypeFromSelectedOption(target.value);\n  }\n\n  private searchTypeFromSelectedOption(option: string): SearchType {\n    switch (option) {\n      case 'metadata':\n        return SearchType.METADATA;\n      case 'fulltext':\n        return SearchType.FULLTEXT;\n      case 'tv':\n        return SearchType.TV;\n      case 'radio':\n        return SearchType.RADIO;\n      default:\n        return SearchType.DEFAULT;\n    }\n  }\n\n  private loginChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      this.loggedIn = true;\n    } else {\n      this.loggedIn = false;\n    }\n  }\n\n  private outlineChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      this.collectionBrowser.style.setProperty(\n        '--infiniteScrollerCellOutline',\n        '1px solid #33D1FF',\n      );\n    } else {\n      this.collectionBrowser.style.removeProperty(\n        '--infiniteScrollerCellOutline',\n      );\n    }\n  }\n\n  private minimalTilesChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    const scroller = this.collectionBrowser?.shadowRoot!.querySelector(\n      'infinite-scroller',\n    ) as InfiniteScroller;\n    const tileDispatchers = [\n      ...scroller.shadowRoot!.querySelectorAll('tile-dispatcher'),\n    ] as TileDispatcher[];\n\n    if (target.checked) {\n      tileDispatchers?.forEach(tile => (tile.layoutType = 'minimal'));\n    } else {\n      tileDispatchers?.forEach(tile => (tile.layoutType = 'default'));\n    }\n  }\n\n  private toggleDevTools() {\n    const pageUrl = new URL(window.location.href);\n    const { searchParams } = pageUrl;\n\n    if (searchParams.get('hide-dev-tools')) {\n      searchParams.delete('hide-dev-tools');\n    } else {\n      searchParams.set('hide-dev-tools', 'true');\n    }\n\n    this.shadowRoot?.getElementById('dev-tools')?.classList.toggle('hidden');\n\n    if (window.history.replaceState) {\n      window.history.replaceState(\n        {\n          path: pageUrl.toString(),\n        },\n        '',\n        pageUrl.toString(),\n      );\n    }\n  }\n\n  private toggleFacetGroupOutline(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      this.collectionBrowser.classList.add('showFacetGroupOutlines');\n      this.modalManager.classList.add('showFacetGroupOutlines');\n    } else {\n      this.collectionBrowser.classList.remove('showFacetGroupOutlines');\n      this.modalManager.classList.remove('showFacetGroupOutlines');\n    }\n  }\n\n  private datePickerChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.collectionBrowser.showHistogramDatePicker = target.checked;\n\n    // When disabling the date picker from the demo app, also clear any existing date range params\n    if (!this.collectionBrowser.showHistogramDatePicker) {\n      this.collectionBrowser.minSelectedDate = undefined;\n      this.collectionBrowser.maxSelectedDate = undefined;\n    }\n  }\n\n  private facetsChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.suppressFacets = !target.checked;\n  }\n\n  /** Clicking the Sound checkbox is the user gesture that lets previews play audibly. */\n  private tilePreviewSoundChanged(e: Event) {\n    const sound = (e.target as HTMLInputElement).checked;\n    this.tilePreviewOptions = { ...this.tilePreviewOptions, sound };\n    try {\n      localStorage.setItem(AppRoot.SOUND_KEY, sound ? '1' : '0');\n    } catch {\n      // Storage can be unavailable; the choice just isn't remembered.\n    }\n  }\n\n  private tilePreviewClipsChanged(e: Event) {\n    const clips = (e.target as HTMLInputElement).checked;\n    this.tilePreviewOptions = { ...this.tilePreviewOptions, clips };\n  }\n\n  private tilePreviewsChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.enableTilePreviews = target.checked;\n  }\n\n  private pinchZoomChanged(e: Event) {\n    this.enablePinchZoom = (e.target as HTMLInputElement).checked;\n  }\n\n  private lazyLoadFacetsChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.lazyLoadFacets = target.checked;\n  }\n\n  /**\n   * Handler for when collection browser's manage mode changes.\n   * This lets us disable the checkbox in the dev panel when the user cancels out\n   * of manage mode from within collection browser.\n   */\n  private manageModeChanged(e: CustomEvent<boolean>): void {\n    const manageCheckbox = this.shadowRoot?.querySelector(\n      '#enable-management',\n    ) as HTMLInputElement;\n    if (manageCheckbox) manageCheckbox.checked = e.detail;\n  }\n\n  /**\n   * Handler for item removal\n   */\n  private handleItemRemovalRequest(e: CustomEvent) {\n    this.collectionBrowser.showRemoveItemsProcessingModal();\n    console.log('itemRemovalRequested: ', e.detail.items);\n\n    setTimeout(() => {\n      // execute item-removal-service, and response is successfully deleted\n      const status = false;\n\n      if (status) {\n        // looking for success?\n        this.collectionBrowser.isManageView = false;\n        this.modalManager?.closeModal();\n        this.modalManager?.classList.remove('remove-items');\n      } else {\n        // looking for failure?\n        this.collectionBrowser.showRemoveItemsErrorModal();\n      }\n    }, 2000); // let's wait to see processing modal\n  }\n\n  /**\n   * Handler when item manage requested\n   */\n  private handleItemManagerRequest(e: CustomEvent) {\n    console.log('itemManagerRequested: ', e.detail.items);\n  }\n\n  /**\n   * Handler for when the dev panel's \"Enable manage mode\" checkbox is changed.\n   */\n  private manageModeCheckboxChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.collectionBrowser.isManageView = target.checked;\n    this.collectionBrowser.manageViewLabel =\n      'Select items to remove (customizable texts)';\n  }\n\n  /**\n   * Handler when the dev panel's \"Enable manage mode -> Search\" checkbox is changed.\n   */\n  private SearchManageModeCheckboxChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.collectionBrowser.pageContext = target.checked\n      ? 'search'\n      : 'collection';\n  }\n\n  /**\n   * Handler for when the dev panel's \"Enable smart facet bar\" checkbox is changed.\n   */\n  private smartFacetBarCheckboxChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.collectionBrowser.showSmartFacetBar = target.checked;\n  }\n\n  /**\n   * Handler for when the dev panel's \"Enable tile action buttons\" checkbox is changed.\n   */\n  private tileActionsCheckboxChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.collectionBrowser.tileActions = target.checked\n      ? [{ id: 'demo-action', label: 'Return' }]\n      : [];\n  }\n\n  /**\n   * Handler for tile action button clicks (logs to console for QA).\n   */\n  private handleTileActionClicked(\n    e: CustomEvent<{ actionId: string; model: unknown }>,\n  ) {\n    console.log('Tile action clicked:', e.detail.actionId, e.detail.model);\n  }\n\n  /**\n   * Handler for when the dev panel's \"Show facet top slot\" checkbox is changed.\n   */\n  private facetTopSlotCheckboxChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n\n    const p = document.createElement('p');\n    p.style.setProperty('border', '1px solid #000');\n    p.textContent = 'New stuff as a child.';\n    p.style.setProperty('height', '20rem');\n    p.style.backgroundColor = '#00000';\n    p.setAttribute('slot', 'facet-top-slot');\n\n    if (target.checked) {\n      this.collectionBrowser.appendChild(p);\n    } else {\n      this.collectionBrowser.removeChild(\n        this.collectionBrowser.lastElementChild as Element,\n      );\n    }\n  }\n\n  private toggleSlotOptions() {\n    this.toggleSlots = !this.toggleSlots;\n  }\n\n  private resultLastTileSlotCheckboxChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n\n    const div = document.createElement('div');\n    const title = document.createElement('h3');\n    title.textContent = 'Upload';\n\n    div.setAttribute('slot', 'result-last-tile');\n    div.setAttribute('class', 'result-last-tile');\n    div.appendChild(title);\n\n    if (target.checked) {\n      this.collectionBrowser.appendChild(div);\n    } else {\n      this.collectionBrowser.removeChild(\n        this.collectionBrowser.lastElementChild as Element,\n      );\n    }\n  }\n\n  /**\n   * Handler for when the dev panel's \"Show cb top slot\" checkbox is changed.\n   */\n  private cbTopSlotCheckboxChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n\n    const p = document.createElement('p');\n    p.style.setProperty('border', '1px solid #000');\n    p.textContent = 'My Favorite list header.';\n    p.style.setProperty('height', '10rem');\n    p.style.backgroundColor = '#00000';\n    p.setAttribute('slot', 'cb-top-slot');\n\n    if (target.checked) {\n      this.collectionBrowser.appendChild(p);\n    } else {\n      this.collectionBrowser.removeChild(\n        this.collectionBrowser.lastElementChild as Element,\n      );\n    }\n  }\n\n  /**\n   * Handler for when the dev panel's \"Show sort bar top left slot\" checkbox is changed.\n   */\n  private sortBarLeftSlotCheckboxChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n\n    if (target.checked) {\n      const div = document.createElement('div');\n      div.style.setProperty('border', '1px solid #000');\n      div.textContent = 'Btn';\n      div.style.setProperty('height', '3rem');\n      div.style.setProperty('width', '3rem');\n      div.setAttribute('slot', 'sort-options-left');\n\n      this.collectionBrowser.appendChild(div);\n    } else {\n      const slottedEl = this.collectionBrowser.querySelector(\n        '[slot=\"sort-options-left\"]',\n      );\n      if (slottedEl) this.collectionBrowser.removeChild(slottedEl);\n    }\n  }\n\n  /**\n   * Handler for when the dev panel's \"Show sort bar top right slot\" checkbox is changed.\n   */\n  private sortBarRightSlotCheckboxChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n\n    if (target.checked) {\n      const div = document.createElement('div');\n      div.style.setProperty('border', '1px solid #000');\n      div.textContent = 'Search bar';\n      div.style.setProperty('height', '3rem');\n      div.style.setProperty('width', '15rem');\n      div.setAttribute('slot', 'sort-options-right');\n\n      this.collectionBrowser.appendChild(div);\n    } else {\n      const slottedEl = this.collectionBrowser.querySelector(\n        '[slot=\"sort-options-right\"]',\n      );\n      if (slottedEl) this.collectionBrowser.removeChild(slottedEl);\n    }\n  }\n\n  private rowGapChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.rowGap = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserRowGap',\n      `${input.value}rem`,\n    );\n  }\n\n  private colGapChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.colGap = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserColGap',\n      `${input.value}rem`,\n    );\n  }\n\n  private widthChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.cellWidth = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMinWidth',\n      `${input.value}rem`,\n    );\n  }\n\n  private heightChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.cellHeight = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMinHeight',\n      `${input.value}rem`,\n    );\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMaxHeight',\n      `${input.value}rem`,\n    );\n  }\n\n  private visiblePageChanged(e: CustomEvent<{ pageNumber: number }>) {\n    const { pageNumber } = e.detail;\n    if (pageNumber === this.currentPage) return;\n    this.currentPage = pageNumber;\n  }\n\n  /**\n   * Handler for when the dev panel's \"Replace sort options\" checkbox is changed.\n   */\n  private replaceSortOptionsChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n\n    if (target.checked) {\n      const p = document.createElement('p');\n      p.style.setProperty('border', '1px solid #000');\n      p.textContent = 'New stuff as a child.';\n      p.style.setProperty('height', '20px');\n      p.setAttribute('slot', 'sort-options');\n\n      this.collectionBrowser.appendChild(p);\n      this.collectionBrowser.enableSortOptionsSlot = true;\n    } else {\n      const slottedEl = this.collectionBrowser.querySelector(\n        '[slot=\"sort-options\"]',\n      );\n      if (slottedEl) this.collectionBrowser.removeChild(slottedEl);\n      this.collectionBrowser.enableSortOptionsSlot = false;\n    }\n  }\n\n  private profileElementChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.profileElement = (input.value as PageElementName) || undefined;\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n      --primaryButtonBGColor: #194880;\n      --ia-theme-link-color: #4b64ff;\n    }\n\n    /* add the following styles to ensure proper modal visibility */\n    body.modal-manager-open {\n      overflow: hidden;\n    }\n    modal-manager {\n      display: none;\n    }\n    modal-manager[mode='open'] {\n      display: block;\n    }\n    modal-manager.remove-items {\n      --modalWidth: 58rem;\n      --modalBorder: 2px solid var(--primaryButtonBGColor, #194880);\n      --modalTitleLineHeight: 4rem;\n      --modalTitleFontSize: 1.8rem;\n    }\n    modal-manager.more-search-facets {\n      --modalWidth: 85rem;\n      --modalBorder: 2px solid var(--primaryButtonBGColor, #194880);\n      --modalTitleLineHeight: 4rem;\n      --modalTitleFontSize: 1.8rem;\n      --modalBottomPadding: 0;\n      --modalScrollOffset: 0;\n      --modalCornerRadius: 0.5rem;\n    }\n    modal-manager.expanded-date-picker {\n      --modalWidth: 58rem;\n      --modalBorder: 2px solid var(--primaryButtonBGColor, #194880);\n      --modalTitleLineHeight: 4rem;\n      --modalTitleFontSize: 1.8rem;\n      --modalCornerRadius: 0;\n      --modalBottomPadding: 0;\n      --modalBottomMargin: 0;\n      --modalScrollOffset: 0;\n      --modalCornerRadius: 0.5rem;\n    }\n\n    input,\n    button {\n      font-size: 1.6rem;\n    }\n\n    modal-manager.showFacetGroupOutlines,\n    collection-browser.showFacetGroupOutlines {\n      --facet-row-border-top: 1px solid red;\n      --facet-row-border-bottom: 1px solid blue;\n    }\n\n    collection-browser {\n      /* Same as production */\n      max-width: 135rem;\n      margin: auto;\n    }\n\n    #collection-browser-container {\n      /* Same as production */\n      padding-left: 0.5rem;\n      margin-bottom: 2rem;\n    }\n\n    #base-query-field {\n      width: 300px;\n    }\n\n    .dev-tool-container {\n      position: relative;\n    }\n    #dev-tools {\n      position: relative;\n      top: 0;\n      left: 0;\n      z-index: 1;\n      -webkit-backdrop-filter: blur(10px);\n      backdrop-filter: blur(10px);\n      padding: 0.5rem 1rem;\n      border: 1px solid black;\n      font-size: 1.4rem;\n      background: #ffffffb3;\n    }\n\n    #dev-tools > * {\n      display: flex;\n    }\n\n    #toggle-dev-tools-btn {\n      position: fixed;\n      left: 77.4%;\n      top: 0;\n      background: red;\n      padding: 5px;\n      color: white;\n      font-size: 1.4rem;\n      margin: 0;\n      z-index: 1;\n      cursor: pointer;\n    }\n\n    #search-and-page-inputs {\n      flex-wrap: wrap;\n      row-gap: 2px;\n    }\n\n    #search-and-page-inputs > form {\n      margin-right: 1rem;\n    }\n\n    #search-and-page-inputs label {\n      display: inline-block;\n      min-width: 50px;\n    }\n\n    #page-number-input {\n      width: 75px;\n    }\n\n    .search-type {\n      margin-right: 1rem;\n    }\n\n    .cell-controls {\n      display: flex;\n      flex-wrap: wrap;\n    }\n    .cell-controls div {\n      display: flex;\n      align-items: center;\n    }\n    .cell-controls input[type='range'] {\n      width: 120px;\n    }\n    #cell-controls label {\n      display: inline-block;\n      width: 10rem;\n    }\n\n    #cell-size-control,\n    #cell-gap-control {\n      flex-basis: calc(50% - 1rem);\n      flex-grow: 1;\n    }\n\n    #cell-gap-control {\n      margin-left: 1rem;\n    }\n\n    #checkbox-controls {\n      padding-top: 0.5rem;\n      flex-wrap: wrap;\n    }\n\n    .checkbox-control {\n      flex-basis: 50%;\n    }\n    .checkbox-control.indent {\n      margin-left: 10px;\n    }\n    .checkbox-control label {\n      user-select: none;\n    }\n\n    #last-event {\n      background-color: aliceblue;\n      padding: 5px;\n      margin: 5px auto;\n    }\n\n    .hidden {\n      display: none;\n    }\n\n    #toggle-controls {\n      background-color: lightskyblue;\n      padding: 5px;\n      margin: 5px auto;\n    }\n\n    #search-types {\n      margin: 5px auto;\n      background-color: aliceblue;\n      font-size: 1.6rem;\n    }\n\n    // slots\n    div[slot='cb-top-slot'] {\n      height: 50px;\n      border: 1px solid red;\n      background: bisque;\n    }\n    div[slot='facet-top-slot'] {\n      border: 1px solid red;\n      width: 100%;\n      height: 150px;\n      background-color: darkseagreen;\n    }\n    div[slot='sort-slot-left'] {\n      height: 50px;\n      border: 1px solid red;\n      background: bisque;\n    }\n\n    /* user profile controls */\n    .user-profile-controls {\n      width: fit-content;\n    }\n\n    .profile-element-controls {\n      margin-top: 4px;\n    }\n\n    .profile-element-controls summary {\n      cursor: pointer;\n      user-select: none;\n    }\n\n    .profile-element-options {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      column-gap: 8px;\n      margin-top: 4px;\n    }\n\n    fieldset {\n      display: inline-block !important;\n    }\n\n    .result-last-tile {\n      border-radius: 4px;\n      background-color: white;\n      border: 3px dashed #555;\n      box-shadow: none;\n      display: grid;\n      align-content: center;\n    }\n    .result-last-tile:hover {\n      box-shadow: rgba(8, 8, 32, 0.8) 0 0 6px 2px;\n      transition: box-shadow 0.1s ease 0s;\n      cursor: pointer;\n      border: 3px dashed #4b64ff;\n    }\n    .result-last-tile h3 {\n      margin-bottom: 4rem;\n      margin: 0px auto;\n      font-size: 2.8rem;\n      color: rgb(44, 44, 44);\n      font-weight: 200;\n      text-align: center;\n    }\n  `;\n}\n"]}