npm - @internetarchive/collection-browser - Versions diffs - 0.2.22 → 0.2.23-fa1 - Mend

@internetarchive/collection-browser 0.2.22 → 0.2.23-fa1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/dist/src/app-root.d.ts +1 -0
package/dist/src/app-root.js +69 -17
package/dist/src/app-root.js.map +1 -1
package/dist/src/collection-facets/facet-group.d.ts +0 -0
package/dist/src/collection-facets/facet-group.js +72 -0
package/dist/src/collection-facets/facet-group.js.map +1 -0
package/dist/src/collection-facets/facets-template.js +18 -7
package/dist/src/collection-facets/facets-template.js.map +1 -1
package/dist/src/styles/facet-group-styles.d.ts +0 -0
package/dist/src/styles/facet-group-styles.js +2 -0
package/dist/src/styles/facet-group-styles.js.map +1 -0
package/package.json +1 -1
package/src/app-root.ts +70 -17
package/src/collection-facets/facet-group.ts +85 -0
package/src/collection-facets/facets-template.ts +18 -7
package/src/styles/facet-group-styles.ts +0 -0

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

@@ -29,6 +29,7 @@ export declare class AppRoot extends LitElement {
     private baseQueryChanged;
     private loginChanged;
     private outlineChanged;
+    private toggleFacetGroupOutline;
     private snippetsChanged;
     private rowGapChanged;
     private colGapChanged;

package/dist/src/app-root.js CHANGED Viewed

@@ -63,22 +63,33 @@ let AppRoot = class AppRoot extends LitElement {
         var _a;
         return html `
       <div id="dev-tools">
-        <form @submit=${this.searchPressed}>
-          Query:
-          <input
-            type="text"
-            id="base-query-field"
-            .value=${(_a = this.searchQuery) !== null && _a !== void 0 ? _a : ''}
-          />
-          <input type="submit" value="Search" />
-        </form>
-        <form @submit=${this.changePagePressed}>
-          Page: <input type="number" value="1" id="page-number-input" />
-          <input type="submit" value="Go" />
-        </form>
-        <div id="last-event">
+        <div id="search-and-page-inputs">
+          <form @submit=${this.searchPressed}>
+            Query:
+            <input
+              type="text"
+              id="base-query-field"
+              .value=${(_a = this.searchQuery) !== null && _a !== void 0 ? _a : ''}
+            />
+            <input type="submit" value="Search" />
+          </form>
+          <form @submit=${this.changePagePressed}>
+            Page: <input type="number" value="1" id="page-number-input" />
+            <input type="submit" value="Go" />
+          </form>
+        </div>
+        <div id="toggle-controls">
+          <button
+            @click=${() => {
+            var _a, _b;
+            const details = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('cell-size-control');
+            details === null || details === void 0 ? void 0 : details.classList.toggle('hidden');
+            const rowGapControls = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById('cell-gap-control');
+            rowGapControls === null || rowGapControls === void 0 ? void 0 : rowGapControls.classList.toggle('hidden');
+        }}
+          >
+            Toggle Cell Controls
+          </button>
           <button
             @click=${() => {
             var _a;
@@ -88,13 +99,16 @@ let AppRoot = class AppRoot extends LitElement {
           >
             Last Event Captured
           </button>
+        </div>
+        <div id="last-event">
           <pre id="latest-event-details" class="hidden">
             ${JSON.stringify(this.latestAction, null, 2)}
           </pre
           >
         </div>
-        <div id="cell-controls">
+        <div id="cell-controls" class="hidden">
           <div id="cell-size-control">
             <div>
               <label for="cell-width-slider">Minimum cell width:</label>
@@ -130,6 +144,16 @@ let AppRoot = class AppRoot extends LitElement {
                 @click=${this.outlineChanged}
               />
             </div>
+            <div>
+              <label for="show-facet-group-outline-check"
+                >Show Facet Group Outlines:</label
+              >
+              <input
+                type="checkbox"
+                id="show-facet-group-outline-check"
+                @click=${this.toggleFacetGroupOutline}
+              />
+            </div>
             <div>
               <label for="simulate-login">Simulate Login:</label>
               <input
@@ -218,6 +242,17 @@ let AppRoot = class AppRoot extends LitElement {
             this.collectionBrowser.style.removeProperty('--infiniteScrollerCellOutline');
         }
     }
+    toggleFacetGroupOutline(e) {
+        const target = e.target;
+        if (target.checked) {
+            this.collectionBrowser.classList.add('showFacetGroupOutlines');
+            this.modalManager.classList.add('showFacetGroupOutlines');
+        }
+        else {
+            this.collectionBrowser.classList.remove('showFacetGroupOutlines');
+            this.modalManager.classList.remove('showFacetGroupOutlines');
+        }
+    }
     async snippetsChanged(e) {
         const target = e.target;
         if (target.checked) {
@@ -328,6 +363,12 @@ AppRoot.styles = css `
       margin-top: 20rem;
     }
+    modal-manager.showFacetGroupOutlines,
+    collection-browser.showFacetGroupOutlines {
+      --facet-row-border-top: 1px solid red;
+      --facet-row-border-bottom: 1px solid blue;
+    }
     #base-query-field {
       width: 300px;
     }
@@ -341,6 +382,11 @@ AppRoot.styles = css `
       backdrop-filter: blur(10px);
       padding: 0.5rem 1rem;
       border: 1px solid black;
+      font-size: 1.4rem;
+    }
+    #dev-tools > * {
+      display: flex;
     }
     #cell-controls {
@@ -365,6 +411,12 @@ AppRoot.styles = css `
     .hidden {
       display: none;
     }
+    #toggle-controls {
+      background-color: lightskyblue;
+      padding: 5px;
+      margin: 5px auto;
+    }
   `;
 __decorate([
     state()

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

	@@ -1 +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,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAC/E,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAM7E,OAAO,2BAA2B,CAAC;AAGnC,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,UAAU;IAAvC;;QACU,kBAAa,GAAG,aAAa,CAAC,OAAO,CAAC;QAEtC,mBAAc,GAAG,IAAI,oBAAoB,EAAE,CAAC;QAE5C,eAAU,GAAG,IAAI,UAAU,EAAE,CAAC;QAE9B,wBAAmB,GAAG,IAAI,mBAAmB,CAAC;YACpD,aAAa,EAAE,IAAI,CAAC,aAAa;YACjC,UAAU,EAAE,IAAI,CAAC,UAAU;SAC5B,CAAC,CAAC;QAMc,cAAS,GAAW,EAAE,CAAC;QAEvB,eAAU,GAAW,EAAE,CAAC;QAExB,WAAM,GAAW,GAAG,CAAC;QAErB,WAAM,GAAW,GAAG,CAAC;QAErB,aAAQ,GAAY,KAAK,CAAC;QAYnC,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;IAgXJ,CAAC;IA9WS,aAAa,CAAC,EAAkB;;QACtC,OAAO,CAAC,GAAG,CAAC,yBAAyB,EAAE,EAAE,CAAC,CAAC;QAC3C,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACvB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,mBAAmB,CAAC,EAAE,CAAC,CAAC;IACjD,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,MAAA,IAAI,CAAC,WAAW,mCAAI,CAAC,CAAC,GAAG,CAAC,EAAE;YAC/B,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,CAAC,CAAC,CAAC;SACxD;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;YAClD,IAAI,CAAC,eAAe,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC;SAC1D;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE;YAC9B,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,iBAAiB,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC;IACtD,CAAC;IAED,MAAM;;QACJ,OAAO,IAAI,CAAA;;wBAES,IAAI,CAAC,aAAa;;;;;qBAKrB,MAAA,IAAI,CAAC,WAAW,mCAAI,EAAE;;;;;wBAKnB,IAAI,CAAC,iBAAiB;;;;;;;qBAOzB,GAAG,EAAE;;YACZ,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,cAAc,CAC7C,sBAAsB,CACvB,CAAC;YACF,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QACtC,CAAC;;;;;cAKC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;;;;;;;;;;;;;;;;yBAgB/B,IAAI,CAAC,YAAY;;sBAEpB,IAAI,CAAC,SAAS;;;;;;;;;;;yBAWX,IAAI,CAAC,aAAa;;sBAErB,IAAI,CAAC,UAAU;;;;;;;yBAOZ,IAAI,CAAC,cAAc;;;;;;;;yBAQnB,IAAI,CAAC,YAAY;;;;;;;;yBAQjB,IAAI,CAAC,eAAe;;;;;;;;;;;;;;yBAcpB,IAAI,CAAC,aAAa;;sBAErB,IAAI,CAAC,MAAM;;;;;;;;;;;yBAWR,IAAI,CAAC,aAAa;;sBAErB,IAAI,CAAC,MAAM;;;;;;;;+BAQF,qBAAqB;0BAC1B,qBAAqB;2BACpB,IAAI,CAAC,aAAa;4BACjB,IAAI,CAAC,cAAc;iCACd,IAAI,CAAC,mBAAmB;qCACpB,IAAI;sBACnB,IAAI,CAAC,QAAQ;0BACT,IAAI,CAAC,YAAY;8BACb,IAAI,CAAC,gBAAgB;gCACnB,IAAI,CAAC,kBAAkB;8BACzB,IAAI,CAAC,gBAAgB;;;;;KAK9C,CAAC;IACJ,CAAC;IAEO,gBAAgB,CAAC,CAAsC;QAC7D,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC;IACxC,CAAC;IAEO,YAAY,CAAC,CAAQ;QAC3B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,MAAM,CAAC,OAAO,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;SACvB;IACH,CAAC;IAEO,cAAc,CAAC,CAAQ;QAC7B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,MAAM,CAAC,OAAO,EAAE;YAClB,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,+BAA+B,EAC/B,mBAAmB,CACpB,CAAC;SACH;aAAM;YACL,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CACzC,+BAA+B,CAChC,CAAC;SACH;IACH,CAAC;IAEO,KAAK,CAAC,eAAe,CAAC,CAAQ;QACpC,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,MAAM,CAAC,OAAO,EAAE;YAClB,+DAA+D;YAC/D,4CAA4C;YAC5C,IAAI,CAAC,aAAa,GAAG;gBACnB,GAAG,aAAa,CAAC,OAAO;gBACxB,KAAK,CAAC,MAAM,CAAC,MAAM;;oBACjB,MAAM,MAAM,GAAG,MAAM,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;oBAC1D,MAAA,MAAM,CAAC,OAAO,0CAAE,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;wBAC1C,MAAM,QAAQ,GAAG,GAAG,CAAC,WAAW,CAAC;wBACjC,IAAI,QAAQ,EAAE;4BACZ,QAAQ,CAAC,QAAQ,GAAG;gCAClB,qDAAqD;gCACrD,kCAAkC;gCAClC,uDAAuD;gCACvD,uDAAuD;gCACvD,uDAAuD;gCACvD,mDAAmD;gCACnD,qDAAqD;gCACrD,qDAAqD;gCACrD,mEAAmE;6BACpE,CAAC;yBACH;oBACH,CAAC,CAAC,CAAC;oBACH,OAAO,MAAM,CAAC;gBAChB,CAAC;aACF,CAAC;SACH;aAAM;YACL,oCAAoC;YACpC,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC,OAAO,CAAC;SAC5C;QAED,sEAAsE;QACtE,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC;QAClC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,CAAC,uCAAuC;QAC9D,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,4FAA4F;QAC5F,MAAM,IAAI,OAAO,CAAC,GAAG,CAAC,EAAE;YACtB,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;QACrB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,CAAC,8BAA8B;IAC7D,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;CA8EF,CAAA;AA5EQ,cAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2ElB,CAAC;AA7YO;IAAR,KAAK,EAAE;4CAA8B;AAE7B;IAAR,KAAK,EAAE;4CAA8B;AAE7B;IAAR,KAAK,EAAE;0CAAgC;AAE/B;IAAR,KAAK,EAAE;2CAAiC;AAEhC;IAAR,KAAK,EAAE;uCAA8B;AAE7B;IAAR,KAAK,EAAE;uCAA8B;AAE7B;IAAR,KAAK,EAAE;yCAAmC;AAEC;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;6CAA+B;AAE9C;IAA3B,KAAK,CAAC,mBAAmB,CAAC;+CAA2C;AAEzC;IAA5B,KAAK,CAAC,oBAAoB,CAAC;gDAA4C;AAE3C;IAA5B,KAAK,CAAC,oBAAoB,CAAC;kDAA+C;AAEnD;IAAvB,KAAK,CAAC,eAAe,CAAC;6CAA8C;AAlC1D,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA0ZnB;SA1ZY,OAAO","sourcesContent":["import {\n AnalyticsEvent,\n AnalyticsManager,\n} from '@internetarchive/analytics-manager';\nimport { SearchService } from '@internetarchive/search-service';\nimport { LocalCache } from '@internetarchive/local-cache';\nimport { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport { CollectionNameCache } from '@internetarchive/collection-name-cache';\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';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n private searchService = SearchService.default;\n\n private resizeObserver = new SharedResizeObserver();\n\n private localCache = new LocalCache();\n\n private collectionNameCache = new CollectionNameCache({\n searchService: this.searchService,\n localCache: this.localCache,\n });\n\n @state() private currentPage?: number;\n\n @state() private searchQuery?: 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 loggedIn: boolean = false;\n\n @property({ type: Object, reflect: false }) latestAction?: AnalyticsEvent;\n\n @query('#base-query-field') private baseQueryField!: 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?.sendEventNoSampling(ae);\n }\n\n private searchPressed(e: Event) {\n e.preventDefault();\n this.searchQuery = this.baseQueryField.value;\n if ((this.currentPage ?? 1) > 1) {\n this.collectionBrowser.goToPage(this.currentPage ?? 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 render() {\n return html`\n <div id=\"dev-tools\">\n <form @submit=${this.searchPressed}>\n Query:\n <input\n type=\"text\"\n id=\"base-query-field\"\n .value=${this.searchQuery ?? ''}\n />\n <input type=\"submit\" value=\"Search\" />\n </form>\n\n <form @submit=${this.changePagePressed}>\n Page: <input type=\"number\" value=\"1\" id=\"page-number-input\" />\n <input type=\"submit\" value=\"Go\" />\n </form>\n\n <div id=\"last-event\">\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 <pre id=\"latest-event-details\" class=\"hidden\">\n ${JSON.stringify(this.latestAction, null, 2)}\n </pre\n >\n </div>\n\n <div id=\"cell-controls\">\n <div id=\"cell-size-control\">\n <div>\n <label for=\"cell-width-slider\">Minimum 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=\"show-outline-check\">Show outlines:</label>\n <input\n type=\"checkbox\"\n id=\"show-outline-check\"\n @click=${this.outlineChanged}\n />\n </div>\n <div>\n <label for=\"simulate-login\">Simulate Login:</label>\n <input\n type=\"checkbox\"\n id=\"simulate-login\"\n @click=${this.loginChanged}\n />\n </div>\n <div>\n <label for=\"show-dummy-snippets\">Show dummy snippets:</label>\n <input\n type=\"checkbox\"\n id=\"show-dummy-snippets\"\n @click=${this.snippetsChanged}\n />\n </div>\n </div>\n <div id=\"cell-gap-control\">\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 </div>\n </div>\n </div>\n\n <div id=\"collection-browser-container\">\n <collection-browser\n .baseNavigationUrl=${'https://archive.org'}\n .baseImageUrl=${'https://archive.org'}\n .searchService=${this.searchService}\n .resizeObserver=${this.resizeObserver}\n .collectionNameCache=${this.collectionNameCache}\n .showHistogramDatePicker=${true}\n .loggedIn=${this.loggedIn}\n .modalManager=${this.modalManager}\n .analyticsHandler=${this.analyticsHandler}\n @visiblePageChanged=${this.visiblePageChanged}\n @baseQueryChanged=${this.baseQueryChanged}\n >\n </collection-browser>\n </div>\n <modal-manager></modal-manager>\n `;\n }\n\n private baseQueryChanged(e: CustomEvent<{ baseQuery?: string }>) {\n this.searchQuery = e.detail.baseQuery;\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 async snippetsChanged(e: Event) {\n const target = e.target as HTMLInputElement;\n if (target.checked) {\n // Decorate the default search service with a wrapper that adds\n // dummy snippets to any successful searches\n this.searchService = {\n ...SearchService.default,\n async search(params) {\n const result = await SearchService.default.search(params);\n result.success?.response.docs.forEach(doc => {\n const metadata = doc.rawMetadata;\n if (metadata) {\n metadata.snippets = [\n 'this is a text {{{snippet}}} block with potentially',\n 'multiple {{{snippets}}} and such',\n 'but the {{{snippet}}} block may be quite long perhaps',\n 'depending on how many {{{snippet}}} matches there are',\n 'there may be multiple lines of {{{snippets}}} to show',\n 'but each {{{snippet}}} should be relatively short',\n 'and {{{snippets}}} are each a {{{snippet}}} of text',\n 'but every {{{snippet}}} might have multiple matches',\n 'the {{{snippets}}} should be separated and surrounded by ellipses',\n ];\n }\n });\n return result;\n },\n };\n } else {\n // Restore the default seach service\n this.searchService = SearchService.default;\n }\n\n // Re-perform the current search to show/hide the snippets immediately\n const oldQuery = this.searchQuery;\n this.searchQuery = ''; // Should just reset to the placeholder\n await this.updateComplete;\n // For unclear reasons, Safari refuses to re-apply the old query until the next tick, hence:\n await new Promise(res => {\n setTimeout(res, 0);\n });\n this.searchQuery = oldQuery; // Re-apply the original query\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 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.more-search-facets {\n --modalWidth: 85rem;\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 collection-browser {\n margin-top: 20rem;\n }\n\n #base-query-field {\n width: 300px;\n }\n\n #dev-tools {\n position: fixed;\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 }\n\n #cell-controls {\n display: flex;\n }\n\n #cell-controls label {\n display: inline-block;\n width: 10rem;\n }\n\n #cell-gap-control {\n margin-left: 1rem;\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}\n"]}
1	+ {"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 { SearchService } from '@internetarchive/search-service';\nimport { LocalCache } from '@internetarchive/local-cache';\nimport { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport { CollectionNameCache } from '@internetarchive/collection-name-cache';\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';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n private searchService = SearchService.default;\n\n private resizeObserver = new SharedResizeObserver();\n\n private localCache = new LocalCache();\n\n private collectionNameCache = new CollectionNameCache({\n searchService: this.searchService,\n localCache: this.localCache,\n });\n\n @state() private currentPage?: number;\n\n @state() private searchQuery?: 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 loggedIn: boolean = false;\n\n @property({ type: Object, reflect: false }) latestAction?: AnalyticsEvent;\n\n @query('#base-query-field') private baseQueryField!: 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?.sendEventNoSampling(ae);\n }\n\n private searchPressed(e: Event) {\n e.preventDefault();\n this.searchQuery = this.baseQueryField.value;\n if ((this.currentPage ?? 1) > 1) {\n this.collectionBrowser.goToPage(this.currentPage ?? 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 render() {\n return html`\n <div id=\"dev-tools\">\n <div id=\"search-and-page-inputs\">\n <form @submit=${this.searchPressed}>\n Query:\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 Page: <input type=\"number\" value=\"1\" id=\"page-number-input\" />\n <input type=\"submit\" value=\"Go\" />\n </form>\n </div>\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 <div id=\"cell-controls\" class=\"hidden\">\n <div id=\"cell-size-control\">\n <div>\n <label for=\"cell-width-slider\">Minimum 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=\"show-outline-check\">Show outlines:</label>\n <input\n type=\"checkbox\"\n id=\"show-outline-check\"\n @click=${this.outlineChanged}\n />\n </div>\n <div>\n <label for=\"show-facet-group-outline-check\"\n >Show Facet Group Outlines:</label\n >\n <input\n type=\"checkbox\"\n id=\"show-facet-group-outline-check\"\n @click=${this.toggleFacetGroupOutline}\n />\n </div>\n <div>\n <label for=\"simulate-login\">Simulate Login:</label>\n <input\n type=\"checkbox\"\n id=\"simulate-login\"\n @click=${this.loginChanged}\n />\n </div>\n <div>\n <label for=\"show-dummy-snippets\">Show dummy snippets:</label>\n <input\n type=\"checkbox\"\n id=\"show-dummy-snippets\"\n @click=${this.snippetsChanged}\n />\n </div>\n </div>\n <div id=\"cell-gap-control\">\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 </div>\n </div>\n </div>\n\n <div id=\"collection-browser-container\">\n <collection-browser\n .baseNavigationUrl=${'https://archive.org'}\n .baseImageUrl=${'https://archive.org'}\n .searchService=${this.searchService}\n .resizeObserver=${this.resizeObserver}\n .collectionNameCache=${this.collectionNameCache}\n .showHistogramDatePicker=${true}\n .loggedIn=${this.loggedIn}\n .modalManager=${this.modalManager}\n .analyticsHandler=${this.analyticsHandler}\n @visiblePageChanged=${this.visiblePageChanged}\n @baseQueryChanged=${this.baseQueryChanged}\n >\n </collection-browser>\n </div>\n <modal-manager></modal-manager>\n `;\n }\n\n private baseQueryChanged(e: CustomEvent<{ baseQuery?: string }>) {\n this.searchQuery = e.detail.baseQuery;\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 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 async snippetsChanged(e: Event) {\n const target = e.target as HTMLInputElement;\n if (target.checked) {\n // Decorate the default search service with a wrapper that adds\n // dummy snippets to any successful searches\n this.searchService = {\n ...SearchService.default,\n async search(params) {\n const result = await SearchService.default.search(params);\n result.success?.response.docs.forEach(doc => {\n const metadata = doc.rawMetadata;\n if (metadata) {\n metadata.snippets = [\n 'this is a text {{{snippet}}} block with potentially',\n 'multiple {{{snippets}}} and such',\n 'but the {{{snippet}}} block may be quite long perhaps',\n 'depending on how many {{{snippet}}} matches there are',\n 'there may be multiple lines of {{{snippets}}} to show',\n 'but each {{{snippet}}} should be relatively short',\n 'and {{{snippets}}} are each a {{{snippet}}} of text',\n 'but every {{{snippet}}} might have multiple matches',\n 'the {{{snippets}}} should be separated and surrounded by ellipses',\n ];\n }\n });\n return result;\n },\n };\n } else {\n // Restore the default seach service\n this.searchService = SearchService.default;\n }\n\n // Re-perform the current search to show/hide the snippets immediately\n const oldQuery = this.searchQuery;\n this.searchQuery = ''; // Should just reset to the placeholder\n await this.updateComplete;\n // For unclear reasons, Safari refuses to re-apply the old query until the next tick, hence:\n await new Promise(res => {\n setTimeout(res, 0);\n });\n this.searchQuery = oldQuery; // Re-apply the original query\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 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.more-search-facets {\n --modalWidth: 85rem;\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 collection-browser {\n margin-top: 20rem;\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 #base-query-field {\n width: 300px;\n }\n\n #dev-tools {\n position: fixed;\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 }\n\n #dev-tools > {\n display: flex;\n }\n\n #cell-controls {\n display: flex;\n }\n\n #cell-controls label {\n display: inline-block;\n width: 10rem;\n }\n\n #cell-gap-control {\n margin-left: 1rem;\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}\n"]}

package/dist/src/collection-facets/facet-group.d.ts ADDED Viewed

File without changes

package/dist/src/collection-facets/facet-group.js ADDED Viewed

@@ -0,0 +1,72 @@
+"use strict";
+// import { LitElement, html, css, CSSResultGroup } from "lit";
+// import { query, property, customElement } from "lit/decorators.js";
+// @customElement('facet-group')
+// export class FacetGroup extends LitElement {
+//   override render() {
+//     return html`
+//       <slot></slot>
+//       <slot></slot>
+//     `
+//   }
+//   static get styles(): CSSResultGroup {
+//     return css`
+//       :host {
+//         margin-bottom: 1rem;
+//         display: flex;
+//         align-items: start;
+//         font-weight: 500;
+//         font-size: 1.2rem;
+//         cursor: pointer;
+//       }
+//       ::slotted(.facet-checkbox) {
+//         border: 1px solid red;
+//         margin-right: 0.5rem;
+//         display: flex;
+//         align-items: center;
+//       }
+//       ::slotted(.select-facet-checkbox) {
+//         cursor: pointer;
+//         margin-right: 5px;
+//       }
+//       ::slotted(.hide-facet-checkbox) {
+//         display: none;
+//       }
+//       ::slotted(.hide-facet-icon) {
+//         width: 15px;
+//         height: 15px;
+//         cursor: pointer;
+//         opacity: 0.3;
+//       }
+//       ::slotted(.facet-info-display) {
+//         border: 1px solid blue;
+//         display: flex;
+//         flex: 1;
+//       }
+//       ::slotted(.facet-title) {
+//         flex: 1;
+//       }
+//     `
+//   }
+// )
+// /**
+// <div class="facet-row">
+//                   <div class="facet-checkbox">
+//                     <input type="checkbox" class="select-facet-checkbox" name="mediatype" value="texts" title="Only show mediatype: texts" id="mediatype:texts-show-only">
+//                     <input type="checkbox" class="hide-facet-checkbox" id="mediatype:texts-negative" name="mediatype" value="texts">
+//                     <label for="mediatype:texts-negative" class="hide-facet-icon" title="Hide mediatype: texts">
+//                       <span class="eye"><!--?lit$141655362$-->
+// <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m98 50.5704143c-.2830293-.471515-.671154-1.1088947-1.1643742-1.9121392s-1.6003642-2.3617474-3.3214321-4.6755089c-1.7210678-2.3137614-3.522258-4.5325939-5.4035703-6.6564975-1.8813124-2.1239037-4.2828993-4.473133-7.2047606-7.0476881-2.9218612-2.5745551-5.8895067-4.7933876-8.9029363-6.6564976-3.0134295-1.86311-6.4628491-3.4330878-10.3482587-4.7099336-3.8854095-1.2768458-7.7822651-1.9142256-11.6905667-1.9121443-3.9083017.0020914-7.8051573.6154781-11.6905668 1.8401652-3.8854096 1.2246871-7.3702078 2.8301329-10.4543947 4.8163375-3.0841869 1.9862045-6.0278997 4.1695691-8.8311384 6.5500937s-5.2048256 4.7652219-7.2047605 7.1540919c-1.99993501 2.38887-3.75430043 4.5722346-5.26309632 6.5500938s-2.63883199 3.583305-3.39010829 4.8163374l-1.13003609 1.8401602c.2830293.4715149.67115403 1.1088946 1.16437421 1.9121391.49322017.8032445 1.5878776 2.3617475 3.28397229 4.6755089s3.47439274 4.521119 5.3348942 6.6220728c1.8605014 2.1009538 4.2506422 4.4387083 7.1704224 7.0132633 2.9197801 2.5745551 5.8874256 4.7819127 8.9029363 6.6220729 3.0155106 1.8401601 6.4774168 3.398663 10.3857184 4.6755088 3.9083017 1.2768458 7.8176438 1.9142256 11.7280266 1.9121443 3.9103827-.0020914 7.7957922-.6154781 11.6562286-1.8401652s7.3337886-2.818658 10.4200566-4.7819127 6.0299808-4.1351444 8.8311384-6.515669 5.2152311-4.7652219 7.2422203-7.1540919 3.8052873-4.5607597 5.3348942-6.515669c1.5296068-1.9549093 2.6721295-3.5488802 3.427568-4.7819127zm-24.5142913 0c0 6.467683-2.3079374 12.0152859-6.9238123 16.6428087s-10.1495139 6.9412843-16.600917 6.9412843c-6.4992683 0-12.0453939-2.3137615-16.6383767-6.9412843s-6.8894742-10.1751257-6.8894742-16.6428087 2.2964914-12.003811 6.8894742-16.608384 10.1391084-6.9068595 16.6383767-6.9068595c6.4534842 0 11.9871232 2.3022865 16.600917 6.9068595s6.9217312 10.140701 6.9238123 16.608384zm-23.5247293-10.552755c2.8261308 0 5.2870289 1.0619518 7.3826944 3.1858555 2.0956655 2.1239036 3.1434982 4.5795368 3.1434982 7.3668995 0 2.8332624-1.0478327 5.2888956-3.1434982 7.3668995-2.0956655 2.078004-4.5565636 3.1170059-7.3826944 3.1170059-2.873996 0-5.3348941-1.0264838-7.3826944-3.0794516-2.0478002-2.0529677-3.0717003-4.5200758-3.0717003-7.4013243 0-2.8332624 1.0239001-5.3003705 3.0717003-7.4013243 2.0478003-2.1009538 4.5086984-3.1514307 7.3826944-3.1514307z" fill="#000"></path></svg>
+// </span>
+//                       <span class="eye-closed"><!--?lit$141655362$-->
+// <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m97.5245976 14.5407294-15.0809624 14.6188347c3.3026825 2.8601369 6.4111526 6.0234269 9.3254105 9.48987 2.9142578 3.4664431 5.0023086 6.2183876 6.2641522 8.2558335l1.9668021 3.1268688c-.291855.4841879-.6920826 1.1386987-1.2006828 1.9635322s-1.6502683 2.4252247-3.4250041 4.8011737c-1.7747358 2.3759489-3.6202894 4.6426342-5.5366607 6.8000558-1.9163713 2.1574217-4.3810437 4.5580085-7.3940172 7.2017606-3.0129735 2.643752-6.0731589 4.9104373-9.180556 6.8000558-3.1073972 1.8896186-6.6643798 3.4900098-10.6709478 4.8011737-4.0065681 1.3111639-8.0249391 1.9656747-12.055113 1.9635322-6.7019347 0-13.2343359-1.6732336-19.5972037-5.019701l-17.1185824 16.6562806-10.27179318-10.6917703 14.93288898-14.5449211c-3.2533247-2.8601369-6.3371159-6.0116436-9.25137378-9.45452-2.91425785-3.4428764-5.02698749-6.1819664-6.33818892-8.2172698l-1.8927654-3.0529552c.29185498-.4841879.69208259-1.1386987 1.20068282-1.9635322.50860022-.8248335 1.65026824-2.437008 3.42500406-4.8365236 1.77473582-2.3995157 3.62028938-4.6908389 5.53666072-6.8739696 1.9163713-2.1831307 4.3810437-4.5955009 7.3940172-7.2371105s6.0731589-4.9200783 9.180556-6.8354059c3.1073972-1.9153277 6.6772558-3.5275022 10.7095757-4.8365237 4.03232-1.3090215 8.0635669-1.9635322 12.0937409-1.9635322 6.5560071 0 13.0637294 1.6968003 19.5231669 5.090401l17.1185824-16.5823669zm-46.478979 24.584323 10.7803934-10.473243c-3.5451796-1.891761-7.3092505-2.8376415-11.2922126-2.8376415-6.6547228 0-12.3609169 2.3641657-17.1185824 7.0924969-4.7576654 4.7283312-7.1375711 10.437893-7.1397171 17.1286852 0 3.8306553.8251341 7.3945787 2.4754024 10.6917703l10.9284669-10.5471566v-.1446137c0-2.9094127 1.0687043-5.4546132 3.2061128-7.6356015 2.1374086-2.1809883 4.6868477-3.2714825 7.6483174-3.2714825h.5086002zm-1.1652739 21.5988543-10.7803935 10.6178566c3.5945375 1.9388943 7.4068932 2.9083415 11.4370672 2.9083415 6.6547228 0 12.3491139-2.375949 17.0831734-7.1278469s7.1021623-10.4486051 7.1043083-17.0901215c0-4.0234736-.874492-7.6356015-2.6234759-10.836384l-10.7095757 10.473243v.363141c0 2.9586884-1.0687042 5.4803223-3.2061128 7.5649015-2.1374085 2.0845792-4.6868476 3.1268688-7.6483173 3.1268688z" fill="#000"></path></svg>
+// </span>
+//                     </label>
+//                   </div>
+//                   <label class="facet-info-display" for="mediatype:texts-show-only" title="Only show mediatype: texts">
+//                     <div class="facet-title"><!--?lit$141655362$--><!--?lit$141655362$-->texts<!--?--></div>
+//                     <div class="facet-count"><!--?lit$141655362$-->51</div>
+//                   </label>
+//                 </div>
+//  */
+//# sourceMappingURL=facet-group.js.map

package/dist/src/collection-facets/facet-group.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"facet-group.js","sourceRoot":"","sources":["../../../src/collection-facets/facet-group.ts"],"names":[],"mappings":";AAAA,+DAA+D;AAC/D,sEAAsE;AAEtE,gCAAgC;AAChC,+CAA+C;AAE/C,wBAAwB;AACxB,mBAAmB;AACnB,sBAAsB;AACtB,sBAAsB;AACtB,QAAQ;AACR,MAAM;AAEN,0CAA0C;AAC1C,kBAAkB;AAClB,gBAAgB;AAChB,+BAA+B;AAC/B,yBAAyB;AACzB,8BAA8B;AAC9B,4BAA4B;AAC5B,6BAA6B;AAC7B,2BAA2B;AAC3B,UAAU;AAEV,qCAAqC;AACrC,iCAAiC;AACjC,gCAAgC;AAChC,yBAAyB;AACzB,+BAA+B;AAC/B,UAAU;AAEV,4CAA4C;AAC5C,2BAA2B;AAC3B,6BAA6B;AAC7B,UAAU;AAEV,0CAA0C;AAC1C,yBAAyB;AACzB,UAAU;AAEV,sCAAsC;AACtC,uBAAuB;AACvB,wBAAwB;AACxB,2BAA2B;AAC3B,wBAAwB;AACxB,UAAU;AAEV,yCAAyC;AACzC,kCAAkC;AAClC,yBAAyB;AACzB,mBAAmB;AACnB,UAAU;AAEV,kCAAkC;AAClC,mBAAmB;AACnB,UAAU;AAGV,QAAQ;AACR,MAAM;AACN,IAAI;AAEJ,MAAM;AAEN,0BAA0B;AAC1B,iDAAiD;AACjD,6KAA6K;AAC7K,uIAAuI;AACvI,mHAAmH;AACnH,iEAAiE;AACjE,60EAA60E;AAC70E,UAAU;AACV,wEAAwE;AACxE,8rEAA8rE;AAC9rE,UAAU;AACV,+BAA+B;AAC/B,2BAA2B;AAE3B,0HAA0H;AAC1H,+GAA+G;AAC/G,8EAA8E;AAC9E,6BAA6B;AAC7B,yBAAyB;AAEzB,MAAM","sourcesContent":["// import { LitElement, html, css, CSSResultGroup } from \"lit\";\n// import { query, property, customElement } from \"lit/decorators.js\";\n\n// @customElement('facet-group')\n// export class FacetGroup extends LitElement {\n\n// override render() {\n// return html`\n// <slot></slot>\n// <slot></slot>\n// `\n// }\n\n// static get styles(): CSSResultGroup {\n// return css`\n// :host {\n// margin-bottom: 1rem;\n// display: flex;\n// align-items: start;\n// font-weight: 500;\n// font-size: 1.2rem;\n// cursor: pointer;\n// }\n\n// ::slotted(.facet-checkbox) {\n// border: 1px solid red;\n// margin-right: 0.5rem;\n// display: flex;\n// align-items: center;\n// }\n\n// ::slotted(.select-facet-checkbox) {\n// cursor: pointer;\n// margin-right: 5px;\n// }\n\n// ::slotted(.hide-facet-checkbox) {\n// display: none;\n// }\n\n// ::slotted(.hide-facet-icon) {\n// width: 15px;\n// height: 15px;\n// cursor: pointer;\n// opacity: 0.3;\n// }\n\n// ::slotted(.facet-info-display) {\n// border: 1px solid blue;\n// display: flex;\n// flex: 1;\n// }\n\n// ::slotted(.facet-title) {\n// flex: 1;\n// }\n\n\n// `\n// }\n// )\n\n// /**\n\n// <div class=\"facet-row\">\n// <div class=\"facet-checkbox\">\n// <input type=\"checkbox\" class=\"select-facet-checkbox\" name=\"mediatype\" value=\"texts\" title=\"Only show mediatype: texts\" id=\"mediatype:texts-show-only\">\n// <input type=\"checkbox\" class=\"hide-facet-checkbox\" id=\"mediatype:texts-negative\" name=\"mediatype\" value=\"texts\">\n// <label for=\"mediatype:texts-negative\" class=\"hide-facet-icon\" title=\"Hide mediatype: texts\">\n// <span class=\"eye\">\n// <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m98 50.5704143c-.2830293-.471515-.671154-1.1088947-1.1643742-1.9121392s-1.6003642-2.3617474-3.3214321-4.6755089c-1.7210678-2.3137614-3.522258-4.5325939-5.4035703-6.6564975-1.8813124-2.1239037-4.2828993-4.473133-7.2047606-7.0476881-2.9218612-2.5745551-5.8895067-4.7933876-8.9029363-6.6564976-3.0134295-1.86311-6.4628491-3.4330878-10.3482587-4.7099336-3.8854095-1.2768458-7.7822651-1.9142256-11.6905667-1.9121443-3.9083017.0020914-7.8051573.6154781-11.6905668 1.8401652-3.8854096 1.2246871-7.3702078 2.8301329-10.4543947 4.8163375-3.0841869 1.9862045-6.0278997 4.1695691-8.8311384 6.5500937s-5.2048256 4.7652219-7.2047605 7.1540919c-1.99993501 2.38887-3.75430043 4.5722346-5.26309632 6.5500938s-2.63883199 3.583305-3.39010829 4.8163374l-1.13003609 1.8401602c.2830293.4715149.67115403 1.1088946 1.16437421 1.9121391.49322017.8032445 1.5878776 2.3617475 3.28397229 4.6755089s3.47439274 4.521119 5.3348942 6.6220728c1.8605014 2.1009538 4.2506422 4.4387083 7.1704224 7.0132633 2.9197801 2.5745551 5.8874256 4.7819127 8.9029363 6.6220729 3.0155106 1.8401601 6.4774168 3.398663 10.3857184 4.6755088 3.9083017 1.2768458 7.8176438 1.9142256 11.7280266 1.9121443 3.9103827-.0020914 7.7957922-.6154781 11.6562286-1.8401652s7.3337886-2.818658 10.4200566-4.7819127 6.0299808-4.1351444 8.8311384-6.515669 5.2152311-4.7652219 7.2422203-7.1540919 3.8052873-4.5607597 5.3348942-6.515669c1.5296068-1.9549093 2.6721295-3.5488802 3.427568-4.7819127zm-24.5142913 0c0 6.467683-2.3079374 12.0152859-6.9238123 16.6428087s-10.1495139 6.9412843-16.600917 6.9412843c-6.4992683 0-12.0453939-2.3137615-16.6383767-6.9412843s-6.8894742-10.1751257-6.8894742-16.6428087 2.2964914-12.003811 6.8894742-16.608384 10.1391084-6.9068595 16.6383767-6.9068595c6.4534842 0 11.9871232 2.3022865 16.600917 6.9068595s6.9217312 10.140701 6.9238123 16.608384zm-23.5247293-10.552755c2.8261308 0 5.2870289 1.0619518 7.3826944 3.1858555 2.0956655 2.1239036 3.1434982 4.5795368 3.1434982 7.3668995 0 2.8332624-1.0478327 5.2888956-3.1434982 7.3668995-2.0956655 2.078004-4.5565636 3.1170059-7.3826944 3.1170059-2.873996 0-5.3348941-1.0264838-7.3826944-3.0794516-2.0478002-2.0529677-3.0717003-4.5200758-3.0717003-7.4013243 0-2.8332624 1.0239001-5.3003705 3.0717003-7.4013243 2.0478003-2.1009538 4.5086984-3.1514307 7.3826944-3.1514307z\" fill=\"#000\"></path></svg>\n// </span>\n// <span class=\"eye-closed\">\n// <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m97.5245976 14.5407294-15.0809624 14.6188347c3.3026825 2.8601369 6.4111526 6.0234269 9.3254105 9.48987 2.9142578 3.4664431 5.0023086 6.2183876 6.2641522 8.2558335l1.9668021 3.1268688c-.291855.4841879-.6920826 1.1386987-1.2006828 1.9635322s-1.6502683 2.4252247-3.4250041 4.8011737c-1.7747358 2.3759489-3.6202894 4.6426342-5.5366607 6.8000558-1.9163713 2.1574217-4.3810437 4.5580085-7.3940172 7.2017606-3.0129735 2.643752-6.0731589 4.9104373-9.180556 6.8000558-3.1073972 1.8896186-6.6643798 3.4900098-10.6709478 4.8011737-4.0065681 1.3111639-8.0249391 1.9656747-12.055113 1.9635322-6.7019347 0-13.2343359-1.6732336-19.5972037-5.019701l-17.1185824 16.6562806-10.27179318-10.6917703 14.93288898-14.5449211c-3.2533247-2.8601369-6.3371159-6.0116436-9.25137378-9.45452-2.91425785-3.4428764-5.02698749-6.1819664-6.33818892-8.2172698l-1.8927654-3.0529552c.29185498-.4841879.69208259-1.1386987 1.20068282-1.9635322.50860022-.8248335 1.65026824-2.437008 3.42500406-4.8365236 1.77473582-2.3995157 3.62028938-4.6908389 5.53666072-6.8739696 1.9163713-2.1831307 4.3810437-4.5955009 7.3940172-7.2371105s6.0731589-4.9200783 9.180556-6.8354059c3.1073972-1.9153277 6.6772558-3.5275022 10.7095757-4.8365237 4.03232-1.3090215 8.0635669-1.9635322 12.0937409-1.9635322 6.5560071 0 13.0637294 1.6968003 19.5231669 5.090401l17.1185824-16.5823669zm-46.478979 24.584323 10.7803934-10.473243c-3.5451796-1.891761-7.3092505-2.8376415-11.2922126-2.8376415-6.6547228 0-12.3609169 2.3641657-17.1185824 7.0924969-4.7576654 4.7283312-7.1375711 10.437893-7.1397171 17.1286852 0 3.8306553.8251341 7.3945787 2.4754024 10.6917703l10.9284669-10.5471566v-.1446137c0-2.9094127 1.0687043-5.4546132 3.2061128-7.6356015 2.1374086-2.1809883 4.6868477-3.2714825 7.6483174-3.2714825h.5086002zm-1.1652739 21.5988543-10.7803935 10.6178566c3.5945375 1.9388943 7.4068932 2.9083415 11.4370672 2.9083415 6.6547228 0 12.3491139-2.375949 17.0831734-7.1278469s7.1021623-10.4486051 7.1043083-17.0901215c0-4.0234736-.874492-7.6356015-2.6234759-10.836384l-10.7095757 10.473243v.363141c0 2.9586884-1.0687042 5.4803223-3.2061128 7.5649015-2.1374085 2.0845792-4.6868476 3.1268688-7.6483173 3.1268688z\" fill=\"#000\"></path></svg>\n// </span>\n// </label>\n// </div>\n\n// <label class=\"facet-info-display\" for=\"mediatype:texts-show-only\" title=\"Only show mediatype: texts\">\n// <div class=\"facet-title\">texts</div>\n// <div class=\"facet-count\">51</div>\n// </label>\n// </div>\n\n// */"]}

package/dist/src/collection-facets/facets-template.js CHANGED Viewed

@@ -163,9 +163,6 @@ let FacetsTemplate = class FacetsTemplate extends LitElement {
         column-width: 25rem;
         column-gap: 15px;
       }
-      .facets-on-page .select-facet-checkbox {
-        margin-left: 0;
-      }
       async-collection-name {
         display: contents;
       }
@@ -180,20 +177,33 @@ let FacetsTemplate = class FacetsTemplate extends LitElement {
       }
       .facet-checkbox {
         margin: 0 5px 0 0;
-        display: inline-block;
-        align-items: baseline;
+        display: flex;
+      }
+      .facet-checkbox input:first-child {
+        margin-right: 5px;
+      }
+      .facet-checkbox input {
+        height: inherit;
+        width: 15px;
+        margin: 0;
       }
       .facet-row {
         display: flex;
         font-weight: 500;
         font-size: 1.2rem;
+        margin: 2.5px auto;
+        height: 15px;
+        border-top: var(--facet-row-border-top, none);
+        border-bottom: var(--facet-row-border-bottom, none);
+      }
+      .facet-row > * {
+        height: inherit;
       }
       .facet-info-display {
         display: flex;
         flex: 1 1 0%;
         cursor: pointer;
         flex-wrap: wrap;
-        align-content: center;
       }
       .facet-title {
         word-break: break-word;
@@ -212,10 +222,11 @@ let FacetsTemplate = class FacetsTemplate extends LitElement {
       }
       .hide-facet-icon {
         width: 15px;
-        height: 15px;
+        height: inherit;
         cursor: pointer;
         opacity: 0.3;
         display: inline-block;
+        margin-top: -1px;
       }
       .hide-facet-icon:hover,
       .active {

package/dist/src/collection-facets/facets-template.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"facets-template.js","sourceRoot":"","sources":["../../../src/collection-facets/facets-template.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport eyeIcon from '../assets/img/icons/eye';\nimport eyeClosedIcon from '../assets/img/icons/eye-closed';\nimport {\n FacetGroup,\n FacetOption,\n FacetBucket,\n SelectedFacets,\n defaultSelectedFacets,\n} from '../models';\n\n@customElement('facets-template')\nexport class FacetsTemplate extends LitElement {\n @property({ type: Object }) facetGroup?: FacetGroup;\n\n @property({ type: Object }) selectedFacets?: SelectedFacets;\n\n @property({ type: String }) renderOn?: string;\n\n @property({ type: Object })\n collectionNameCache?: CollectionNameCacheInterface;\n\n private facetClicked(e: Event, count: number, negative: boolean) {\n const target = e.target as HTMLInputElement;\n const { checked, name, value } = target;\n if (checked) {\n this.facetChecked(name as FacetOption, value, count, negative);\n } else {\n this.facetUnchecked(name as FacetOption, value);\n }\n }\n\n private facetChecked(\n key: FacetOption,\n value: string,\n count: number,\n negative: boolean\n ) {\n const { selectedFacets } = this;\n let newFacets: SelectedFacets;\n if (selectedFacets) {\n newFacets = {\n ...selectedFacets,\n };\n } else {\n newFacets = defaultSelectedFacets;\n }\n newFacets[key][value] = {\n state: negative ? 'hidden' : 'selected',\n count,\n } as FacetBucket;\n\n this.selectedFacets = newFacets;\n this.dispatchSelectedFacetsChanged();\n }\n\n private facetUnchecked(key: FacetOption, value: string) {\n const { selectedFacets } = this;\n let newFacets: SelectedFacets;\n if (selectedFacets) {\n newFacets = {\n ...selectedFacets,\n };\n } else {\n newFacets = defaultSelectedFacets;\n }\n delete newFacets[key][value];\n\n this.selectedFacets = newFacets;\n this.dispatchSelectedFacetsChanged();\n }\n\n private dispatchSelectedFacetsChanged() {\n const event = new CustomEvent<SelectedFacets>('selectedFacetsChanged', {\n detail: this.selectedFacets,\n bubbles: true,\n composed: true,\n });\n this.dispatchEvent(event);\n }\n\n private getFacetsTemplate(facetGroup: FacetGroup): TemplateResult {\n let facetsBucket = facetGroup?.buckets as FacetBucket[];\n\n /*\n sorting FacetBucket before render page / modal\n * - first, selected items should be at top having sorted\n * - second, suppressed/hidden items should be after selected having sorted\n * - and then no-selected / not suppressed items should render having sorted\n /\n facetsBucket = [\n ...facetsBucket\n .filter(x => x.state === 'selected')\n .sort((a, b) => (a.count < b.count ? 1 : -1)),\n ...facetsBucket\n .filter(x => x.state === 'hidden')\n .sort((a, b) => (a.count < b.count ? 1 : -1)),\n ...facetsBucket.filter(x => x.state === 'none'),\n ];\n\n return html`\n <div class=\"facets-on-${this.renderOn}\">\n ${repeat(\n facetsBucket,\n bucket => `${facetGroup.key}:${bucket.key}`,\n bucket => {\n const showOnlyCheckboxId = `${facetGroup.key}:${bucket.key}-show-only`;\n const negativeCheckboxId = `${facetGroup.key}:${bucket.key}-negative`;\n // for collections, we need to asynchronously load the collection name\n // so we use the `async-collection-name` widget and for the rest, we have\n // a static value to use\n const bucketTextDisplay =\n facetGroup.key !== 'collection'\n ? html`${bucket.displayText ?? bucket.key}`\n : html`<a href=\"/details/${bucket.key}\">\n <async-collection-name\n .collectionNameCache=${this.collectionNameCache}\n .identifier=${bucket.key}\n placeholder=\"-\"\n ></async-collection-name>\n </a> `;\n const facetHidden = bucket.state === 'hidden';\n const facetSelected = bucket.state === 'selected';\n const titleText = `${facetGroup.key}: ${\n bucket.displayText ?? bucket.key\n }`;\n const onlyShowText = facetSelected\n ? `Show all ${facetGroup.key}s`\n : `Only show ${titleText}`;\n const hideText = `Hide ${titleText}`;\n const unhideText = `Unhide ${titleText}`;\n const showHideText = facetHidden ? unhideText : hideText;\n return html`\n <div class=\"facet-row\">\n <div class=\"facet-checkbox\">\n <input\n type=\"checkbox\"\n .name=${facetGroup.key}\n .value=${bucket.key}\n @click=${(e: Event) => {\n this.facetClicked(e, bucket.count, false);\n }}\n .checked=${facetSelected}\n class=\"select-facet-checkbox\"\n title=${onlyShowText}\n id=${showOnlyCheckboxId}\n />\n <input\n type=\"checkbox\"\n id=${negativeCheckboxId}\n .name=${facetGroup.key}\n .value=${bucket.key}\n @click=${(e: Event) => {\n this.facetClicked(e, bucket.count, true);\n }}\n .checked=${facetHidden}\n class=\"hide-facet-checkbox\"\n />\n <label\n for=${negativeCheckboxId}\n class=\"hide-facet-icon${facetHidden ? ' active' : ''}\"\n title=${showHideText}\n >\n <span class=\"eye\">${eyeIcon}</span>\n <span class=\"eye-closed\">${eyeClosedIcon}</span>\n </label>\n </div>\n <div\n for=${showOnlyCheckboxId}\n class=\"facet-info-display\"\n title=${onlyShowText}\n >\n <div class=\"facet-title\">${bucketTextDisplay}</div>\n <div class=\"facet-count\">${bucket.count}</div>\n </div>\n </div>\n `;\n }\n )}\n </div>\n `;\n }\n\n render() {\n return html`${this.getFacetsTemplate(this.facetGroup as FacetGroup)}`;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n .facets-on-modal {\n / For Chrome, Safari, Opera browsers /\n -webkit-column-width: 100px;\n / For Firefox browser */\n -moz-column-width: 100px;\n column-width: 25rem;\n column-gap: 15px;\n }\n .facets-on-page .select-facet-checkbox {\n margin-left: 0;\n }\n async-collection-name {\n display: contents;\n }\n ul.facet-list {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n ul.facet-list li {\n margin-bottom: 0.2rem;\n display: grid;\n }\n .facet-checkbox {\n margin: 0 5px 0 0;\n display: inline-block;\n align-items: baseline;\n }\n .facet-row {\n display: flex;\n font-weight: 500;\n font-size: 1.2rem;\n }\n .facet-info-display {\n display: flex;\n flex: 1 1 0%;\n cursor: pointer;\n flex-wrap: wrap;\n align-content: center;\n }\n .facet-title {\n word-break: break-word;\n display: inline-block;\n flex: 1 1 0%;\n }\n .facet-count {\n text-align: right;\n }\n .select-facet-checkbox {\n cursor: pointer;\n display: inline-block;\n }\n .hide-facet-checkbox {\n display: none;\n }\n .hide-facet-icon {\n width: 15px;\n height: 15px;\n cursor: pointer;\n opacity: 0.3;\n display: inline-block;\n }\n .hide-facet-icon:hover,\n .active {\n opacity: 1;\n }\n .hide-facet-icon:hover .eye,\n .hide-facet-icon .eye-closed {\n display: none;\n }\n .hide-facet-icon:hover .eye-closed,\n .hide-facet-icon.active .eye-closed {\n display: inline;\n }\n .hide-facet-icon.active .eye {\n display: none;\n }\n .sorting-icon {\n cursor: pointer;\n }\n\n a:link,\n a:visited {\n text-decoration: none;\n color: var(--ia-theme-link-color, #4b64ff);\n }\n a:hover {\n text-decoration: underline;\n }\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"facets-template.js","sourceRoot":"","sources":["../../../src/collection-facets/facets-template.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkC,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,aAAa,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAKL,qBAAqB,GACtB,MAAM,WAAW,CAAC;AAGnB,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAUpC,YAAY,CAAC,CAAQ,EAAE,KAAa,EAAE,QAAiB;QAC7D,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC;QACxC,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,YAAY,CAAC,IAAmB,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;SAChE;aAAM;YACL,IAAI,CAAC,cAAc,CAAC,IAAmB,EAAE,KAAK,CAAC,CAAC;SACjD;IACH,CAAC;IAEO,YAAY,CAClB,GAAgB,EAChB,KAAa,EACb,KAAa,EACb,QAAiB;QAEjB,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAChC,IAAI,SAAyB,CAAC;QAC9B,IAAI,cAAc,EAAE;YAClB,SAAS,GAAG;gBACV,GAAG,cAAc;aAClB,CAAC;SACH;aAAM;YACL,SAAS,GAAG,qBAAqB,CAAC;SACnC;QACD,SAAS,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG;YACtB,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU;YACvC,KAAK;SACS,CAAC;QAEjB,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;QAChC,IAAI,CAAC,6BAA6B,EAAE,CAAC;IACvC,CAAC;IAEO,cAAc,CAAC,GAAgB,EAAE,KAAa;QACpD,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAChC,IAAI,SAAyB,CAAC;QAC9B,IAAI,cAAc,EAAE;YAClB,SAAS,GAAG;gBACV,GAAG,cAAc;aAClB,CAAC;SACH;aAAM;YACL,SAAS,GAAG,qBAAqB,CAAC;SACnC;QACD,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;QAChC,IAAI,CAAC,6BAA6B,EAAE,CAAC;IACvC,CAAC;IAEO,6BAA6B;QACnC,MAAM,KAAK,GAAG,IAAI,WAAW,CAAiB,uBAAuB,EAAE;YACrE,MAAM,EAAE,IAAI,CAAC,cAAc;YAC3B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,iBAAiB,CAAC,UAAsB;QAC9C,IAAI,YAAY,GAAG,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAwB,CAAC;QAExD;;;;;WAKG;QACH,YAAY,GAAG;YACb,GAAG,YAAY;iBACZ,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,UAAU,CAAC;iBACnC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC/C,GAAG,YAAY;iBACZ,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,QAAQ,CAAC;iBACjC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC/C,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC;SAChD,CAAC;QAEF,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,QAAQ;UACjC,MAAM,CACN,YAAY,EACZ,MAAM,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,GAAG,IAAI,MAAM,CAAC,GAAG,EAAE,EAC3C,MAAM,CAAC,EAAE;;YACP,MAAM,kBAAkB,GAAG,GAAG,UAAU,CAAC,GAAG,IAAI,MAAM,CAAC,GAAG,YAAY,CAAC;YACvE,MAAM,kBAAkB,GAAG,GAAG,UAAU,CAAC,GAAG,IAAI,MAAM,CAAC,GAAG,WAAW,CAAC;YACtE,sEAAsE;YACtE,yEAAyE;YACzE,wBAAwB;YACxB,MAAM,iBAAiB,GACrB,UAAU,CAAC,GAAG,KAAK,YAAY;gBAC7B,CAAC,CAAC,IAAI,CAAA,GAAG,MAAA,MAAM,CAAC,WAAW,mCAAI,MAAM,CAAC,GAAG,EAAE;gBAC3C,CAAC,CAAC,IAAI,CAAA,qBAAqB,MAAM,CAAC,GAAG;;6CAER,IAAI,CAAC,mBAAmB;oCACjC,MAAM,CAAC,GAAG;;;wBAGtB,CAAC;YACb,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,KAAK,QAAQ,CAAC;YAC9C,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,KAAK,UAAU,CAAC;YAClD,MAAM,SAAS,GAAG,GAAG,UAAU,CAAC,GAAG,KACjC,MAAA,MAAM,CAAC,WAAW,mCAAI,MAAM,CAAC,GAC/B,EAAE,CAAC;YACH,MAAM,YAAY,GAAG,aAAa;gBAChC,CAAC,CAAC,YAAY,UAAU,CAAC,GAAG,GAAG;gBAC/B,CAAC,CAAC,aAAa,SAAS,EAAE,CAAC;YAC7B,MAAM,QAAQ,GAAG,QAAQ,SAAS,EAAE,CAAC;YACrC,MAAM,UAAU,GAAG,UAAU,SAAS,EAAE,CAAC;YACzC,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC;YACzD,OAAO,IAAI,CAAA;;;;;4BAKK,UAAU,CAAC,GAAG;6BACb,MAAM,CAAC,GAAG;6BACV,CAAC,CAAQ,EAAE,EAAE;gBACpB,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;YAC5C,CAAC;+BACU,aAAa;;4BAEhB,YAAY;yBACf,kBAAkB;;;;yBAIlB,kBAAkB;4BACf,UAAU,CAAC,GAAG;6BACb,MAAM,CAAC,GAAG;6BACV,CAAC,CAAQ,EAAE,EAAE;gBACpB,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;YAC3C,CAAC;+BACU,WAAW;;;;0BAIhB,kBAAkB;4CACA,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;4BAC5C,YAAY;;wCAEA,OAAO;+CACA,aAAa;;;;wBAIpC,kBAAkB;;0BAEhB,YAAY;;6CAEO,iBAAiB;6CACjB,MAAM,CAAC,KAAK;;;aAG5C,CAAC;QACJ,CAAC,CACF;;KAEJ,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAwB,CAAC,EAAE,CAAC;IACxE,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqGT,CAAC;IACJ,CAAC;CACF,CAAA;AAtR6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAyB;AAExB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAiC;AAEhC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAmB;AAG9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DACwB;AARxC,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAuR1B;SAvRY,cAAc","sourcesContent":["import { css, html, LitElement, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport eyeIcon from '../assets/img/icons/eye';\nimport eyeClosedIcon from '../assets/img/icons/eye-closed';\nimport {\n FacetGroup,\n FacetOption,\n FacetBucket,\n SelectedFacets,\n defaultSelectedFacets,\n} from '../models';\n\n@customElement('facets-template')\nexport class FacetsTemplate extends LitElement {\n @property({ type: Object }) facetGroup?: FacetGroup;\n\n @property({ type: Object }) selectedFacets?: SelectedFacets;\n\n @property({ type: String }) renderOn?: string;\n\n @property({ type: Object })\n collectionNameCache?: CollectionNameCacheInterface;\n\n private facetClicked(e: Event, count: number, negative: boolean) {\n const target = e.target as HTMLInputElement;\n const { checked, name, value } = target;\n if (checked) {\n this.facetChecked(name as FacetOption, value, count, negative);\n } else {\n this.facetUnchecked(name as FacetOption, value);\n }\n }\n\n private facetChecked(\n key: FacetOption,\n value: string,\n count: number,\n negative: boolean\n ) {\n const { selectedFacets } = this;\n let newFacets: SelectedFacets;\n if (selectedFacets) {\n newFacets = {\n ...selectedFacets,\n };\n } else {\n newFacets = defaultSelectedFacets;\n }\n newFacets[key][value] = {\n state: negative ? 'hidden' : 'selected',\n count,\n } as FacetBucket;\n\n this.selectedFacets = newFacets;\n this.dispatchSelectedFacetsChanged();\n }\n\n private facetUnchecked(key: FacetOption, value: string) {\n const { selectedFacets } = this;\n let newFacets: SelectedFacets;\n if (selectedFacets) {\n newFacets = {\n ...selectedFacets,\n };\n } else {\n newFacets = defaultSelectedFacets;\n }\n delete newFacets[key][value];\n\n this.selectedFacets = newFacets;\n this.dispatchSelectedFacetsChanged();\n }\n\n private dispatchSelectedFacetsChanged() {\n const event = new CustomEvent<SelectedFacets>('selectedFacetsChanged', {\n detail: this.selectedFacets,\n bubbles: true,\n composed: true,\n });\n this.dispatchEvent(event);\n }\n\n private getFacetsTemplate(facetGroup: FacetGroup): TemplateResult {\n let facetsBucket = facetGroup?.buckets as FacetBucket[];\n\n /*\n sorting FacetBucket before render page / modal\n * - first, selected items should be at top having sorted\n * - second, suppressed/hidden items should be after selected having sorted\n * - and then no-selected / not suppressed items should render having sorted\n /\n facetsBucket = [\n ...facetsBucket\n .filter(x => x.state === 'selected')\n .sort((a, b) => (a.count < b.count ? 1 : -1)),\n ...facetsBucket\n .filter(x => x.state === 'hidden')\n .sort((a, b) => (a.count < b.count ? 1 : -1)),\n ...facetsBucket.filter(x => x.state === 'none'),\n ];\n\n return html`\n <div class=\"facets-on-${this.renderOn}\">\n ${repeat(\n facetsBucket,\n bucket => `${facetGroup.key}:${bucket.key}`,\n bucket => {\n const showOnlyCheckboxId = `${facetGroup.key}:${bucket.key}-show-only`;\n const negativeCheckboxId = `${facetGroup.key}:${bucket.key}-negative`;\n // for collections, we need to asynchronously load the collection name\n // so we use the `async-collection-name` widget and for the rest, we have\n // a static value to use\n const bucketTextDisplay =\n facetGroup.key !== 'collection'\n ? html`${bucket.displayText ?? bucket.key}`\n : html`<a href=\"/details/${bucket.key}\">\n <async-collection-name\n .collectionNameCache=${this.collectionNameCache}\n .identifier=${bucket.key}\n placeholder=\"-\"\n ></async-collection-name>\n </a> `;\n const facetHidden = bucket.state === 'hidden';\n const facetSelected = bucket.state === 'selected';\n const titleText = `${facetGroup.key}: ${\n bucket.displayText ?? bucket.key\n }`;\n const onlyShowText = facetSelected\n ? `Show all ${facetGroup.key}s`\n : `Only show ${titleText}`;\n const hideText = `Hide ${titleText}`;\n const unhideText = `Unhide ${titleText}`;\n const showHideText = facetHidden ? unhideText : hideText;\n return html`\n <div class=\"facet-row\">\n <div class=\"facet-checkbox\">\n <input\n type=\"checkbox\"\n .name=${facetGroup.key}\n .value=${bucket.key}\n @click=${(e: Event) => {\n this.facetClicked(e, bucket.count, false);\n }}\n .checked=${facetSelected}\n class=\"select-facet-checkbox\"\n title=${onlyShowText}\n id=${showOnlyCheckboxId}\n />\n <input\n type=\"checkbox\"\n id=${negativeCheckboxId}\n .name=${facetGroup.key}\n .value=${bucket.key}\n @click=${(e: Event) => {\n this.facetClicked(e, bucket.count, true);\n }}\n .checked=${facetHidden}\n class=\"hide-facet-checkbox\"\n />\n <label\n for=${negativeCheckboxId}\n class=\"hide-facet-icon${facetHidden ? ' active' : ''}\"\n title=${showHideText}\n >\n <span class=\"eye\">${eyeIcon}</span>\n <span class=\"eye-closed\">${eyeClosedIcon}</span>\n </label>\n </div>\n <div\n for=${showOnlyCheckboxId}\n class=\"facet-info-display\"\n title=${onlyShowText}\n >\n <div class=\"facet-title\">${bucketTextDisplay}</div>\n <div class=\"facet-count\">${bucket.count}</div>\n </div>\n </div>\n `;\n }\n )}\n </div>\n `;\n }\n\n render() {\n return html`${this.getFacetsTemplate(this.facetGroup as FacetGroup)}`;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n .facets-on-modal {\n / For Chrome, Safari, Opera browsers /\n -webkit-column-width: 100px;\n / For Firefox browser /\n -moz-column-width: 100px;\n column-width: 25rem;\n column-gap: 15px;\n }\n async-collection-name {\n display: contents;\n }\n ul.facet-list {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n ul.facet-list li {\n margin-bottom: 0.2rem;\n display: grid;\n }\n .facet-checkbox {\n margin: 0 5px 0 0;\n display: flex;\n }\n .facet-checkbox input:first-child {\n margin-right: 5px;\n }\n .facet-checkbox input {\n height: inherit;\n width: 15px;\n margin: 0;\n }\n .facet-row {\n display: flex;\n font-weight: 500;\n font-size: 1.2rem;\n margin: 2.5px auto;\n height: 15px;\n border-top: var(--facet-row-border-top, none);\n border-bottom: var(--facet-row-border-bottom, none);\n }\n .facet-row > {\n height: inherit;\n }\n .facet-info-display {\n display: flex;\n flex: 1 1 0%;\n cursor: pointer;\n flex-wrap: wrap;\n }\n .facet-title {\n word-break: break-word;\n display: inline-block;\n flex: 1 1 0%;\n }\n .facet-count {\n text-align: right;\n }\n .select-facet-checkbox {\n cursor: pointer;\n display: inline-block;\n }\n .hide-facet-checkbox {\n display: none;\n }\n .hide-facet-icon {\n width: 15px;\n height: inherit;\n cursor: pointer;\n opacity: 0.3;\n display: inline-block;\n margin-top: -1px;\n }\n .hide-facet-icon:hover,\n .active {\n opacity: 1;\n }\n .hide-facet-icon:hover .eye,\n .hide-facet-icon .eye-closed {\n display: none;\n }\n .hide-facet-icon:hover .eye-closed,\n .hide-facet-icon.active .eye-closed {\n display: inline;\n }\n .hide-facet-icon.active .eye {\n display: none;\n }\n .sorting-icon {\n cursor: pointer;\n }\n\n a:link,\n a:visited {\n text-decoration: none;\n color: var(--ia-theme-link-color, #4b64ff);\n }\n a:hover {\n text-decoration: underline;\n }\n `;\n }\n}\n"]}

package/dist/src/styles/facet-group-styles.d.ts ADDED Viewed

File without changes

package/dist/src/styles/facet-group-styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";
2	+ //# sourceMappingURL=facet-group-styles.js.map

package/dist/src/styles/facet-group-styles.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"facet-group-styles.js","sourceRoot":"","sources":["../../../src/styles/facet-group-styles.ts"],"names":[],"mappings":"","sourcesContent":[""]}

package/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "0.2.22",
+  "version": "0.2.23-fa1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {

package/src/app-root.ts CHANGED Viewed

@@ -97,22 +97,34 @@ export class AppRoot extends LitElement {
   render() {
     return html`
       <div id="dev-tools">
-        <form @submit=${this.searchPressed}>
-          Query:
-          <input
-            type="text"
-            id="base-query-field"
-            .value=${this.searchQuery ?? ''}
-          />
-          <input type="submit" value="Search" />
-        </form>
-        <form @submit=${this.changePagePressed}>
-          Page: <input type="number" value="1" id="page-number-input" />
-          <input type="submit" value="Go" />
-        </form>
-        <div id="last-event">
+        <div id="search-and-page-inputs">
+          <form @submit=${this.searchPressed}>
+            Query:
+            <input
+              type="text"
+              id="base-query-field"
+              .value=${this.searchQuery ?? ''}
+            />
+            <input type="submit" value="Search" />
+          </form>
+          <form @submit=${this.changePagePressed}>
+            Page: <input type="number" value="1" id="page-number-input" />
+            <input type="submit" value="Go" />
+          </form>
+        </div>
+        <div id="toggle-controls">
+          <button
+            @click=${() => {
+              const details =
+                this.shadowRoot?.getElementById('cell-size-control');
+              details?.classList.toggle('hidden');
+              const rowGapControls =
+                this.shadowRoot?.getElementById('cell-gap-control');
+              rowGapControls?.classList.toggle('hidden');
+            }}
+          >
+            Toggle Cell Controls
+          </button>
           <button
             @click=${() => {
               const details = this.shadowRoot?.getElementById(
@@ -123,13 +135,16 @@ export class AppRoot extends LitElement {
           >
             Last Event Captured
           </button>
+        </div>
+        <div id="last-event">
           <pre id="latest-event-details" class="hidden">
             ${JSON.stringify(this.latestAction, null, 2)}
           </pre
           >
         </div>
-        <div id="cell-controls">
+        <div id="cell-controls" class="hidden">
           <div id="cell-size-control">
             <div>
               <label for="cell-width-slider">Minimum cell width:</label>
@@ -165,6 +180,16 @@ export class AppRoot extends LitElement {
                 @click=${this.outlineChanged}
               />
             </div>
+            <div>
+              <label for="show-facet-group-outline-check"
+                >Show Facet Group Outlines:</label
+              >
+              <input
+                type="checkbox"
+                id="show-facet-group-outline-check"
+                @click=${this.toggleFacetGroupOutline}
+              />
+            </div>
             <div>
               <label for="simulate-login">Simulate Login:</label>
               <input
@@ -260,6 +285,17 @@ export class AppRoot extends LitElement {
     }
   }
+  private toggleFacetGroupOutline(e: Event) {
+    const target = e.target as HTMLInputElement;
+    if (target.checked) {
+      this.collectionBrowser.classList.add('showFacetGroupOutlines');
+      this.modalManager.classList.add('showFacetGroupOutlines');
+    } else {
+      this.collectionBrowser.classList.remove('showFacetGroupOutlines');
+      this.modalManager.classList.remove('showFacetGroupOutlines');
+    }
+  }
   private async snippetsChanged(e: Event) {
     const target = e.target as HTMLInputElement;
     if (target.checked) {
@@ -388,6 +424,12 @@ export class AppRoot extends LitElement {
       margin-top: 20rem;
     }
+    modal-manager.showFacetGroupOutlines,
+    collection-browser.showFacetGroupOutlines {
+      --facet-row-border-top: 1px solid red;
+      --facet-row-border-bottom: 1px solid blue;
+    }
     #base-query-field {
       width: 300px;
     }
@@ -401,6 +443,11 @@ export class AppRoot extends LitElement {
       backdrop-filter: blur(10px);
       padding: 0.5rem 1rem;
       border: 1px solid black;
+      font-size: 1.4rem;
+    }
+    #dev-tools > * {
+      display: flex;
     }
     #cell-controls {
@@ -425,5 +472,11 @@ export class AppRoot extends LitElement {
     .hidden {
       display: none;
     }
+    #toggle-controls {
+      background-color: lightskyblue;
+      padding: 5px;
+      margin: 5px auto;
+    }
   `;
 }

package/src/collection-facets/facet-group.ts ADDED Viewed

@@ -0,0 +1,85 @@
+// import { LitElement, html, css, CSSResultGroup } from "lit";
+// import { query, property, customElement } from "lit/decorators.js";
+// @customElement('facet-group')
+// export class FacetGroup extends LitElement {
+//   override render() {
+//     return html`
+//       <slot></slot>
+//       <slot></slot>
+//     `
+//   }
+//   static get styles(): CSSResultGroup {
+//     return css`
+//       :host {
+//         margin-bottom: 1rem;
+//         display: flex;
+//         align-items: start;
+//         font-weight: 500;
+//         font-size: 1.2rem;
+//         cursor: pointer;
+//       }
+//       ::slotted(.facet-checkbox) {
+//         border: 1px solid red;
+//         margin-right: 0.5rem;
+//         display: flex;
+//         align-items: center;
+//       }
+//       ::slotted(.select-facet-checkbox) {
+//         cursor: pointer;
+//         margin-right: 5px;
+//       }
+//       ::slotted(.hide-facet-checkbox) {
+//         display: none;
+//       }
+//       ::slotted(.hide-facet-icon) {
+//         width: 15px;
+//         height: 15px;
+//         cursor: pointer;
+//         opacity: 0.3;
+//       }
+//       ::slotted(.facet-info-display) {
+//         border: 1px solid blue;
+//         display: flex;
+//         flex: 1;
+//       }
+//       ::slotted(.facet-title) {
+//         flex: 1;
+//       }
+//     `
+//   }
+// )
+// /**
+// <div class="facet-row">
+//                   <div class="facet-checkbox">
+//                     <input type="checkbox" class="select-facet-checkbox" name="mediatype" value="texts" title="Only show mediatype: texts" id="mediatype:texts-show-only">
+//                     <input type="checkbox" class="hide-facet-checkbox" id="mediatype:texts-negative" name="mediatype" value="texts">
+//                     <label for="mediatype:texts-negative" class="hide-facet-icon" title="Hide mediatype: texts">
+//                       <span class="eye"><!--?lit$141655362$-->
+// <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m98 50.5704143c-.2830293-.471515-.671154-1.1088947-1.1643742-1.9121392s-1.6003642-2.3617474-3.3214321-4.6755089c-1.7210678-2.3137614-3.522258-4.5325939-5.4035703-6.6564975-1.8813124-2.1239037-4.2828993-4.473133-7.2047606-7.0476881-2.9218612-2.5745551-5.8895067-4.7933876-8.9029363-6.6564976-3.0134295-1.86311-6.4628491-3.4330878-10.3482587-4.7099336-3.8854095-1.2768458-7.7822651-1.9142256-11.6905667-1.9121443-3.9083017.0020914-7.8051573.6154781-11.6905668 1.8401652-3.8854096 1.2246871-7.3702078 2.8301329-10.4543947 4.8163375-3.0841869 1.9862045-6.0278997 4.1695691-8.8311384 6.5500937s-5.2048256 4.7652219-7.2047605 7.1540919c-1.99993501 2.38887-3.75430043 4.5722346-5.26309632 6.5500938s-2.63883199 3.583305-3.39010829 4.8163374l-1.13003609 1.8401602c.2830293.4715149.67115403 1.1088946 1.16437421 1.9121391.49322017.8032445 1.5878776 2.3617475 3.28397229 4.6755089s3.47439274 4.521119 5.3348942 6.6220728c1.8605014 2.1009538 4.2506422 4.4387083 7.1704224 7.0132633 2.9197801 2.5745551 5.8874256 4.7819127 8.9029363 6.6220729 3.0155106 1.8401601 6.4774168 3.398663 10.3857184 4.6755088 3.9083017 1.2768458 7.8176438 1.9142256 11.7280266 1.9121443 3.9103827-.0020914 7.7957922-.6154781 11.6562286-1.8401652s7.3337886-2.818658 10.4200566-4.7819127 6.0299808-4.1351444 8.8311384-6.515669 5.2152311-4.7652219 7.2422203-7.1540919 3.8052873-4.5607597 5.3348942-6.515669c1.5296068-1.9549093 2.6721295-3.5488802 3.427568-4.7819127zm-24.5142913 0c0 6.467683-2.3079374 12.0152859-6.9238123 16.6428087s-10.1495139 6.9412843-16.600917 6.9412843c-6.4992683 0-12.0453939-2.3137615-16.6383767-6.9412843s-6.8894742-10.1751257-6.8894742-16.6428087 2.2964914-12.003811 6.8894742-16.608384 10.1391084-6.9068595 16.6383767-6.9068595c6.4534842 0 11.9871232 2.3022865 16.600917 6.9068595s6.9217312 10.140701 6.9238123 16.608384zm-23.5247293-10.552755c2.8261308 0 5.2870289 1.0619518 7.3826944 3.1858555 2.0956655 2.1239036 3.1434982 4.5795368 3.1434982 7.3668995 0 2.8332624-1.0478327 5.2888956-3.1434982 7.3668995-2.0956655 2.078004-4.5565636 3.1170059-7.3826944 3.1170059-2.873996 0-5.3348941-1.0264838-7.3826944-3.0794516-2.0478002-2.0529677-3.0717003-4.5200758-3.0717003-7.4013243 0-2.8332624 1.0239001-5.3003705 3.0717003-7.4013243 2.0478003-2.1009538 4.5086984-3.1514307 7.3826944-3.1514307z" fill="#000"></path></svg>
+// </span>
+//                       <span class="eye-closed"><!--?lit$141655362$-->
+// <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m97.5245976 14.5407294-15.0809624 14.6188347c3.3026825 2.8601369 6.4111526 6.0234269 9.3254105 9.48987 2.9142578 3.4664431 5.0023086 6.2183876 6.2641522 8.2558335l1.9668021 3.1268688c-.291855.4841879-.6920826 1.1386987-1.2006828 1.9635322s-1.6502683 2.4252247-3.4250041 4.8011737c-1.7747358 2.3759489-3.6202894 4.6426342-5.5366607 6.8000558-1.9163713 2.1574217-4.3810437 4.5580085-7.3940172 7.2017606-3.0129735 2.643752-6.0731589 4.9104373-9.180556 6.8000558-3.1073972 1.8896186-6.6643798 3.4900098-10.6709478 4.8011737-4.0065681 1.3111639-8.0249391 1.9656747-12.055113 1.9635322-6.7019347 0-13.2343359-1.6732336-19.5972037-5.019701l-17.1185824 16.6562806-10.27179318-10.6917703 14.93288898-14.5449211c-3.2533247-2.8601369-6.3371159-6.0116436-9.25137378-9.45452-2.91425785-3.4428764-5.02698749-6.1819664-6.33818892-8.2172698l-1.8927654-3.0529552c.29185498-.4841879.69208259-1.1386987 1.20068282-1.9635322.50860022-.8248335 1.65026824-2.437008 3.42500406-4.8365236 1.77473582-2.3995157 3.62028938-4.6908389 5.53666072-6.8739696 1.9163713-2.1831307 4.3810437-4.5955009 7.3940172-7.2371105s6.0731589-4.9200783 9.180556-6.8354059c3.1073972-1.9153277 6.6772558-3.5275022 10.7095757-4.8365237 4.03232-1.3090215 8.0635669-1.9635322 12.0937409-1.9635322 6.5560071 0 13.0637294 1.6968003 19.5231669 5.090401l17.1185824-16.5823669zm-46.478979 24.584323 10.7803934-10.473243c-3.5451796-1.891761-7.3092505-2.8376415-11.2922126-2.8376415-6.6547228 0-12.3609169 2.3641657-17.1185824 7.0924969-4.7576654 4.7283312-7.1375711 10.437893-7.1397171 17.1286852 0 3.8306553.8251341 7.3945787 2.4754024 10.6917703l10.9284669-10.5471566v-.1446137c0-2.9094127 1.0687043-5.4546132 3.2061128-7.6356015 2.1374086-2.1809883 4.6868477-3.2714825 7.6483174-3.2714825h.5086002zm-1.1652739 21.5988543-10.7803935 10.6178566c3.5945375 1.9388943 7.4068932 2.9083415 11.4370672 2.9083415 6.6547228 0 12.3491139-2.375949 17.0831734-7.1278469s7.1021623-10.4486051 7.1043083-17.0901215c0-4.0234736-.874492-7.6356015-2.6234759-10.836384l-10.7095757 10.473243v.363141c0 2.9586884-1.0687042 5.4803223-3.2061128 7.5649015-2.1374085 2.0845792-4.6868476 3.1268688-7.6483173 3.1268688z" fill="#000"></path></svg>
+// </span>
+//                     </label>
+//                   </div>
+//                   <label class="facet-info-display" for="mediatype:texts-show-only" title="Only show mediatype: texts">
+//                     <div class="facet-title"><!--?lit$141655362$--><!--?lit$141655362$-->texts<!--?--></div>
+//                     <div class="facet-count"><!--?lit$141655362$-->51</div>
+//                   </label>
+//                 </div>
+//  */

package/src/collection-facets/facets-template.ts CHANGED Viewed

@@ -198,9 +198,6 @@ export class FacetsTemplate extends LitElement {
         column-width: 25rem;
         column-gap: 15px;
       }
-      .facets-on-page .select-facet-checkbox {
-        margin-left: 0;
-      }
       async-collection-name {
         display: contents;
       }
@@ -215,20 +212,33 @@ export class FacetsTemplate extends LitElement {
       }
       .facet-checkbox {
         margin: 0 5px 0 0;
-        display: inline-block;
-        align-items: baseline;
+        display: flex;
+      }
+      .facet-checkbox input:first-child {
+        margin-right: 5px;
+      }
+      .facet-checkbox input {
+        height: inherit;
+        width: 15px;
+        margin: 0;
       }
       .facet-row {
         display: flex;
         font-weight: 500;
         font-size: 1.2rem;
+        margin: 2.5px auto;
+        height: 15px;
+        border-top: var(--facet-row-border-top, none);
+        border-bottom: var(--facet-row-border-bottom, none);
+      }
+      .facet-row > * {
+        height: inherit;
       }
       .facet-info-display {
         display: flex;
         flex: 1 1 0%;
         cursor: pointer;
         flex-wrap: wrap;
-        align-content: center;
       }
       .facet-title {
         word-break: break-word;
@@ -247,10 +257,11 @@ export class FacetsTemplate extends LitElement {
       }
       .hide-facet-icon {
         width: 15px;
-        height: 15px;
+        height: inherit;
         cursor: pointer;
         opacity: 0.3;
         display: inline-block;
+        margin-top: -1px;
       }
       .hide-facet-icon:hover,
       .active {

package/src/styles/facet-group-styles.ts ADDED Viewed

File without changes