@internetarchive/collection-browser 3.3.2 → 3.3.3

package/dist/src/sort-filter-bar/alpha-bar.js

@@ -0,0 +1,241 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
+import './alpha-bar-tooltip';
+let AlphaBar = class AlphaBar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.selectedLetter = null;
+        this.tooltipShown = false;
+        this.alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
+    }
+    get selectedUppercaseLetter() {
+        var _a;
+        return (_a = this.selectedLetter) === null || _a === void 0 ? void 0 : _a.toUpperCase();
+    }
+    render() {
+        var _a;
+        return html `
+      <section id="container" aria-label=${(_a = this.ariaLandmarkLabel) !== null && _a !== void 0 ? _a : nothing}>
+        <ul>
+          ${this.alphabet.map(letter => html `
+              <li
+                class=${letter === this.selectedUppercaseLetter
+            ? 'selected'
+            : nothing}
+                @mousemove=${this.handleMouseMove}
+                @mouseleave=${this.handleMouseLeave}
+              >
+                ${this.letterButtonTemplate(letter)}
+                ${this.tooltipTemplate(letter)}
+              </li>
+            `)}
+        </ul>
+      </section>
+    `;
+    }
+    letterButtonTemplate(letter) {
+        var _a, _b, _c;
+        const ariaLabel = `${letter}: ${(_b = (_a = this.letterCounts) === null || _a === void 0 ? void 0 : _a[letter]) !== null && _b !== void 0 ? _b : 0} results`;
+        return html `
+      <button
+        aria-label=${ariaLabel}
+        ?disabled=${!((_c = this.letterCounts) === null || _c === void 0 ? void 0 : _c[letter])}
+        @click=${() => {
+            this.letterClicked(letter);
+        }}
+      >
+        ${letter}
+      </button>
+    `;
+    }
+    tooltipTemplate(letter) {
+        var _a, _b;
+        if (this.hoveredLetter !== letter)
+            return nothing;
+        return this.tooltipShown
+            ? html `<alpha-bar-tooltip
+          data-letter=${letter}
+          .numResults=${(_b = (_a = this.letterCounts) === null || _a === void 0 ? void 0 : _a[this.hoveredLetter]) !== null && _b !== void 0 ? _b : 0}
+        ></alpha-bar-tooltip>`
+            : nothing;
+    }
+    letterClicked(letter) {
+        if (letter === this.selectedUppercaseLetter) {
+            this.selectedLetter = null;
+        }
+        else {
+            this.selectedLetter = letter;
+        }
+        this.dispatchEvent(new CustomEvent('letterChanged', {
+            detail: { selectedLetter: this.selectedUppercaseLetter },
+        }));
+    }
+    async handleMouseMove(e) {
+        var _a, _b;
+        const target = e.target;
+        if (target && !this.tooltipShown) {
+            const targetLetter = (_b = (_a = target.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : undefined;
+            this.tooltipShown = true;
+            this.hoveredLetter = targetLetter;
+            await this.updateComplete;
+            await new Promise(resolve => {
+                setTimeout(resolve, 0);
+            });
+            if (this.tooltip && this.tooltip.dataset.letter === targetLetter) {
+                this.positionTooltip(target);
+            }
+        }
+    }
+    handleMouseLeave() {
+        this.tooltipShown = false;
+        this.hoveredLetter = undefined;
+    }
+    positionTooltip(targetElmt) {
+        if (!this.tooltip)
+            return;
+        // Basic positioning is just to center the whole tooltip on the letter box.
+        const tooltipWidth = this.tooltip.clientWidth;
+        const letterWidth = targetElmt.clientWidth;
+        let left = letterWidth / 2 - tooltipWidth / 2;
+        // But we also need to ensure the tooltip doesn't flow outside the viewport.
+        // First, calculate the full width of the document body, including margins
+        // (but not including any scrollbar).
+        const bodyStyle = getComputedStyle(document.body);
+        const bodyMarginLeft = parseFloat(bodyStyle.getPropertyValue('margin-left'));
+        const bodyMarginRight = parseFloat(bodyStyle.getPropertyValue('margin-right'));
+        const bodyWidthWithMargin = document.body.clientWidth + bodyMarginLeft + bodyMarginRight;
+        // Calculate the positions of the tooltip's left/right edges, and determine
+        // how much they overflow the viewport by (if at all).
+        const targetRect = targetElmt.getBoundingClientRect();
+        const tooltipLeft = targetRect.left + left;
+        const tooltipRight = tooltipLeft + tooltipWidth;
+        const offset = 1; // How many pixels the tooltip must be offset from the left/right edges
+        let overflowAmt;
+        if (tooltipLeft < offset) {
+            // Tooltip overflows left edge of viewport
+            overflowAmt = tooltipLeft - offset;
+        }
+        else if (tooltipRight > bodyWidthWithMargin - offset) {
+            // Tooltip overflows right edge of viewport
+            overflowAmt = tooltipRight - bodyWidthWithMargin + offset;
+        }
+        // Apply any needed adjustment to the tooltip and its arrow to keep it in the viewport
+        if (overflowAmt) {
+            left -= overflowAmt;
+            this.tooltip.style.setProperty('--tooltipArrowOffset', `${overflowAmt}px`);
+        }
+        this.tooltip.style.left = `${left}px`;
+        this.tooltip.classList.add('fade-in');
+    }
+};
+AlphaBar.styles = css `
+    h1 {
+      font-size: 1.2rem;
+    }
+
+    #container {
+      background-color: #ddd;
+      color: #333;
+      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
+    }
+
+    ul {
+      list-style: none;
+      display: flex;
+      margin: 0;
+      padding: 0.5rem 1rem;
+      justify-content: space-between;
+    }
+
+    ul li {
+      position: relative;
+      flex: 1;
+      text-align: center;
+      max-width: 2.5rem;
+      border-radius: 4px;
+    }
+
+    li:hover:not(.selected) button:not(:disabled) {
+      background-color: #c0c0c0;
+    }
+
+    button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      aspect-ratio: 1 / 1;
+    }
+
+    button {
+      width: 100%;
+      height: 100%;
+      color: #333;
+      appearance: none;
+      background: none;
+      border: none;
+      border-radius: 4px;
+      font-family: inherit;
+      font-size: 1.2rem;
+      cursor: pointer;
+    }
+
+    button:disabled {
+      color: #aaa;
+      cursor: default;
+    }
+
+    .selected {
+      background-color: #2c2c2c;
+    }
+
+    .selected button {
+      color: white;
+    }
+
+    alpha-bar-tooltip {
+      position: absolute;
+      top: 100%;
+      left: -9999px;
+      margin-top: 3px;
+      z-index: 1;
+
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+
+    alpha-bar-tooltip.fade-in {
+      opacity: 1;
+    }
+
+    /* Make alphabet bar a 2-row container in small screen widths */
+    @media screen and (max-width: 768px) {
+      ul {
+        display: grid;
+        grid-template-columns: repeat(13, 1fr);
+      }
+    }
+  `;
+__decorate([
+    property({ type: String })
+], AlphaBar.prototype, "selectedLetter", void 0);
+__decorate([
+    property({ type: Object })
+], AlphaBar.prototype, "letterCounts", void 0);
+__decorate([
+    property({ type: String })
+], AlphaBar.prototype, "ariaLandmarkLabel", void 0);
+__decorate([
+    state()
+], AlphaBar.prototype, "tooltipShown", void 0);
+__decorate([
+    state()
+], AlphaBar.prototype, "hoveredLetter", void 0);
+__decorate([
+    query('alpha-bar-tooltip')
+], AlphaBar.prototype, "tooltip", void 0);
+AlphaBar = __decorate([
+    customElement('alpha-bar')
+], AlphaBar);
+export { AlphaBar };
+//# sourceMappingURL=alpha-bar.js.map

package/dist/src/sort-filter-bar/alpha-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alpha-bar.js","sourceRoot":"","sources":["../../../src/sort-filter-bar/alpha-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing, TemplateResult } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport type { PrefixFilterCounts } from '../models';\n\nimport './alpha-bar-tooltip';\nimport type { AlphaBarTooltip } from './alpha-bar-tooltip';\n\n@customElement('alpha-bar')\nexport class AlphaBar extends LitElement {\n  @property({ type: String }) selectedLetter: string | null = null;\n\n  @property({ type: Object }) letterCounts?: PrefixFilterCounts;\n\n  @property({ type: String }) ariaLandmarkLabel?: string;\n\n  @state()\n  private tooltipShown: boolean = false;\n\n  @state()\n  private hoveredLetter?: string;\n\n  @query('alpha-bar-tooltip')\n  private tooltip?: AlphaBarTooltip;\n\n  private readonly alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');\n\n  private get selectedUppercaseLetter(): string | undefined {\n    return this.selectedLetter?.toUpperCase();\n  }\n\n  render() {\n    return html`\n      <section id=\"container\" aria-label=${this.ariaLandmarkLabel ?? nothing}>\n        <ul>\n          ${this.alphabet.map(\n            letter => html`\n              <li\n                class=${letter === this.selectedUppercaseLetter\n                  ? 'selected'\n                  : nothing}\n                @mousemove=${this.handleMouseMove}\n                @mouseleave=${this.handleMouseLeave}\n              >\n                ${this.letterButtonTemplate(letter)}\n                ${this.tooltipTemplate(letter)}\n              </li>\n            `,\n          )}\n        </ul>\n      </section>\n    `;\n  }\n\n  private letterButtonTemplate(letter: string) {\n    const ariaLabel = `${letter}: ${this.letterCounts?.[letter] ?? 0} results`;\n    return html`\n      <button\n        aria-label=${ariaLabel}\n        ?disabled=${!this.letterCounts?.[letter]}\n        @click=${() => {\n          this.letterClicked(letter);\n        }}\n      >\n        ${letter}\n      </button>\n    `;\n  }\n\n  private tooltipTemplate(letter: string): TemplateResult | typeof nothing {\n    if (this.hoveredLetter !== letter) return nothing;\n\n    return this.tooltipShown\n      ? html`<alpha-bar-tooltip\n          data-letter=${letter}\n          .numResults=${this.letterCounts?.[this.hoveredLetter] ?? 0}\n        ></alpha-bar-tooltip>`\n      : nothing;\n  }\n\n  private letterClicked(letter: string) {\n    if (letter === this.selectedUppercaseLetter) {\n      this.selectedLetter = null;\n    } else {\n      this.selectedLetter = letter;\n    }\n    this.dispatchEvent(\n      new CustomEvent('letterChanged', {\n        detail: { selectedLetter: this.selectedUppercaseLetter },\n      }),\n    );\n  }\n\n  private async handleMouseMove(e: MouseEvent) {\n    const target = e.target as HTMLLIElement;\n    if (target && !this.tooltipShown) {\n      const targetLetter = target.textContent?.trim() ?? undefined;\n      this.tooltipShown = true;\n      this.hoveredLetter = targetLetter;\n\n      await this.updateComplete;\n      await new Promise(resolve => {\n        setTimeout(resolve, 0);\n      });\n\n      if (this.tooltip && this.tooltip.dataset.letter === targetLetter) {\n        this.positionTooltip(target);\n      }\n    }\n  }\n\n  private handleMouseLeave() {\n    this.tooltipShown = false;\n    this.hoveredLetter = undefined;\n  }\n\n  private positionTooltip(targetElmt: HTMLElement) {\n    if (!this.tooltip) return;\n\n    // Basic positioning is just to center the whole tooltip on the letter box.\n    const tooltipWidth = this.tooltip.clientWidth;\n    const letterWidth = targetElmt.clientWidth;\n    let left = letterWidth / 2 - tooltipWidth / 2;\n\n    // But we also need to ensure the tooltip doesn't flow outside the viewport.\n    // First, calculate the full width of the document body, including margins\n    // (but not including any scrollbar).\n    const bodyStyle = getComputedStyle(document.body);\n    const bodyMarginLeft = parseFloat(\n      bodyStyle.getPropertyValue('margin-left'),\n    );\n    const bodyMarginRight = parseFloat(\n      bodyStyle.getPropertyValue('margin-right'),\n    );\n    const bodyWidthWithMargin =\n      document.body.clientWidth + bodyMarginLeft + bodyMarginRight;\n\n    // Calculate the positions of the tooltip's left/right edges, and determine\n    // how much they overflow the viewport by (if at all).\n    const targetRect = targetElmt.getBoundingClientRect();\n    const tooltipLeft = targetRect.left + left;\n    const tooltipRight = tooltipLeft + tooltipWidth;\n    const offset = 1; // How many pixels the tooltip must be offset from the left/right edges\n    let overflowAmt;\n    if (tooltipLeft < offset) {\n      // Tooltip overflows left edge of viewport\n      overflowAmt = tooltipLeft - offset;\n    } else if (tooltipRight > bodyWidthWithMargin - offset) {\n      // Tooltip overflows right edge of viewport\n      overflowAmt = tooltipRight - bodyWidthWithMargin + offset;\n    }\n\n    // Apply any needed adjustment to the tooltip and its arrow to keep it in the viewport\n    if (overflowAmt) {\n      left -= overflowAmt;\n      this.tooltip.style.setProperty(\n        '--tooltipArrowOffset',\n        `${overflowAmt}px`,\n      );\n    }\n\n    this.tooltip.style.left = `${left}px`;\n    this.tooltip.classList.add('fade-in');\n  }\n\n  static styles = css`\n    h1 {\n      font-size: 1.2rem;\n    }\n\n    #container {\n      background-color: #ddd;\n      color: #333;\n      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);\n    }\n\n    ul {\n      list-style: none;\n      display: flex;\n      margin: 0;\n      padding: 0.5rem 1rem;\n      justify-content: space-between;\n    }\n\n    ul li {\n      position: relative;\n      flex: 1;\n      text-align: center;\n      max-width: 2.5rem;\n      border-radius: 4px;\n    }\n\n    li:hover:not(.selected) button:not(:disabled) {\n      background-color: #c0c0c0;\n    }\n\n    button {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      aspect-ratio: 1 / 1;\n    }\n\n    button {\n      width: 100%;\n      height: 100%;\n      color: #333;\n      appearance: none;\n      background: none;\n      border: none;\n      border-radius: 4px;\n      font-family: inherit;\n      font-size: 1.2rem;\n      cursor: pointer;\n    }\n\n    button:disabled {\n      color: #aaa;\n      cursor: default;\n    }\n\n    .selected {\n      background-color: #2c2c2c;\n    }\n\n    .selected button {\n      color: white;\n    }\n\n    alpha-bar-tooltip {\n      position: absolute;\n      top: 100%;\n      left: -9999px;\n      margin-top: 3px;\n      z-index: 1;\n\n      opacity: 0;\n      transition: opacity 0.2s ease;\n    }\n\n    alpha-bar-tooltip.fade-in {\n      opacity: 1;\n    }\n\n    /* Make alphabet bar a 2-row container in small screen widths */\n    @media screen and (max-width: 768px) {\n      ul {\n        display: grid;\n        grid-template-columns: repeat(13, 1fr);\n      }\n    }\n  `;\n}\n"]}

package/dist/src/sort-filter-bar/img/compact.d.ts

@@ -0,0 +1 @@
+export declare const compactIcon: import("lit").TemplateResult<2>;

package/dist/src/sort-filter-bar/img/compact.js

@@ -0,0 +1,5 @@
+import { svg } from 'lit';
+export const compactIcon = svg `
+<svg viewBox="0 0 100 100" xmlns = "http://www.w3.org/2000/svg" > <path d="m96.9964435 6h-93.90621462c-.91561615 0-1.65899868-.29021372-2.23014758-.87064117-.57114891-.58042745-.85783455-1.3048369-.86005692-2.17322835 0-.81214848.28668564-1.50731158.86005692-2.08548931.57337127-.57817773 1.3167538-.86839145 2.23014758-.87064117h93.90621462c.800053 0 1.5012105.29021372 2.1034726.87064117.602262.58042745.9022819 1.27559055.9000718 2.08548931 0 .86839145-.3000321 1.5928009-.9000718 2.17322835-.6000398.58042745-1.3011973.87064117-2.1034726.87064117zm-93.90621462 9.6666667h93.90621462c.800053 0 1.5012105.2861891 2.1034726.8585673.602262.5723782.9022819 1.2579009.9000718 2.0565682 0 .8563487-.3000321 1.5851326-.9000718 2.1863516-.6000398.6012189-1.3011973.9007192-2.1034726.8985129h-93.90621462c-.91561615 0-1.65899868-.2995125-2.23014758-.8985129-.57114891-.5990005-.85783455-1.3277843-.86005692-2.1863516 0-.8008858.28668564-1.4864086.86005692-2.0565682.57337127-.5701597 1.3167538-.8563488 2.23014758-.8585673zm0 15.6700431h93.90621462c.800053 0 1.5012105.303883 2.1034726.9116489.602262.6077659.9022819 1.2886888.9000718 2.0427687-.0022346.7540799-.3022545 1.4496342-.9000718 2.0866629-.5978174.6370287-1.2989749.955543-2.1034726.955543h-93.90621462c-.85783454 0-1.58788286-.3038829-2.19014494-.9116488s-.90228193-1.3179516-.90007182-2.1305571c.00223463-.8126055.30225448-1.5081599.90007182-2.0866629.59781734-.5785031 1.32786566-.8688802 2.19014494-.8711312zm0 15.6632902h93.90621462c.800053 0 1.5012105.2861892 2.1034726.8585675.602262.5723783.9022819 1.2290603.9000718 1.9700462 0 .7986674-.3144775 1.5274514-.943408 2.186352-.6289306.6589006-1.3156427.9872417-2.0601364.9850343h-93.90621462c-.85783454 0-1.58788286-.3139318-2.19014494-.9417731-.60226208-.6278414-.90228193-1.3699365-.90007182-2.2262854 0-.7986674.2866979-1.4697699.86006918-2.0133074.57337127-.5435376 1.3167538-.8153063 2.23014758-.8153063zm0 15.6666667h93.90621462c.800053 0 1.5012105.3038947 2.1034726.9116593.602262.6077647.9022819 1.3472117.9000718 2.218341 0 .7540783-.3000321 1.4203685-.9000718 1.9988703-.6000398.5785019-1.3011973.8688784-2.1034726.8711294h-93.90621462c-.91561615 0-1.65899868-.2757451-2.23014758-.8272352-.57114891-.5514902-.85783455-1.2324117-.86005692-2.0427645 0-.8688784.28668564-1.6083253.86005692-2.218341.57337127-.6100156 1.3167538-.9138979 2.23014758-.9116593zm0 15.6666666h93.90621462c.800053 0 1.5012105.3038948 2.1034726.9116594.602262.6077646.9022819 1.3472116.9000718 2.2183409 0 .7540784-.3000321 1.4203685-.9000718 1.9988704-.6000398.5785019-1.3011973.8688784-2.1034726.8711293h-93.90621462c-.91561615 0-1.65899868-.275745-2.23014758-.8272352-.57114891-.5514901-.85783455-1.2324116-.86005692-2.0427645 0-.8688783.28668564-1.6083253.86005692-2.2183409.57337127-.6100156 1.3167538-.9138979 2.23014758-.9116594zm0 15.6666667h93.90621462c.800053 0 1.5012105.3038947 2.1034726.9116594.602262.6077646.9022819 1.3472116.9000718 2.2183409 0 .7540784-.3000321 1.4203685-.9000718 1.9988704-.6000398.5785019-1.3011973.8688783-2.1034726.8711293h-93.90621462c-.91561615 0-1.65899868-.2757451-2.23014758-.8272352-.57114891-.5514901-.85783455-1.2324116-.86005692-2.0427645 0-.8688783.28668564-1.6083253.86005692-2.2183409.57337127-.6100156 1.3167538-.913898 2.23014758-.9116594z" /> </svg>
+`;
+//# sourceMappingURL=compact.js.map

package/dist/src/sort-filter-bar/img/compact.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compact.js","sourceRoot":"","sources":["../../../../src/sort-filter-bar/img/compact.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;CAE7B,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const compactIcon = svg`\n<svg viewBox=\"0 0 100 100\" xmlns = \"http://www.w3.org/2000/svg\" > <path d=\"m96.9964435 6h-93.90621462c-.91561615 0-1.65899868-.29021372-2.23014758-.87064117-.57114891-.58042745-.85783455-1.3048369-.86005692-2.17322835 0-.81214848.28668564-1.50731158.86005692-2.08548931.57337127-.57817773 1.3167538-.86839145 2.23014758-.87064117h93.90621462c.800053 0 1.5012105.29021372 2.1034726.87064117.602262.58042745.9022819 1.27559055.9000718 2.08548931 0 .86839145-.3000321 1.5928009-.9000718 2.17322835-.6000398.58042745-1.3011973.87064117-2.1034726.87064117zm-93.90621462 9.6666667h93.90621462c.800053 0 1.5012105.2861891 2.1034726.8585673.602262.5723782.9022819 1.2579009.9000718 2.0565682 0 .8563487-.3000321 1.5851326-.9000718 2.1863516-.6000398.6012189-1.3011973.9007192-2.1034726.8985129h-93.90621462c-.91561615 0-1.65899868-.2995125-2.23014758-.8985129-.57114891-.5990005-.85783455-1.3277843-.86005692-2.1863516 0-.8008858.28668564-1.4864086.86005692-2.0565682.57337127-.5701597 1.3167538-.8563488 2.23014758-.8585673zm0 15.6700431h93.90621462c.800053 0 1.5012105.303883 2.1034726.9116489.602262.6077659.9022819 1.2886888.9000718 2.0427687-.0022346.7540799-.3022545 1.4496342-.9000718 2.0866629-.5978174.6370287-1.2989749.955543-2.1034726.955543h-93.90621462c-.85783454 0-1.58788286-.3038829-2.19014494-.9116488s-.90228193-1.3179516-.90007182-2.1305571c.00223463-.8126055.30225448-1.5081599.90007182-2.0866629.59781734-.5785031 1.32786566-.8688802 2.19014494-.8711312zm0 15.6632902h93.90621462c.800053 0 1.5012105.2861892 2.1034726.8585675.602262.5723783.9022819 1.2290603.9000718 1.9700462 0 .7986674-.3144775 1.5274514-.943408 2.186352-.6289306.6589006-1.3156427.9872417-2.0601364.9850343h-93.90621462c-.85783454 0-1.58788286-.3139318-2.19014494-.9417731-.60226208-.6278414-.90228193-1.3699365-.90007182-2.2262854 0-.7986674.2866979-1.4697699.86006918-2.0133074.57337127-.5435376 1.3167538-.8153063 2.23014758-.8153063zm0 15.6666667h93.90621462c.800053 0 1.5012105.3038947 2.1034726.9116593.602262.6077647.9022819 1.3472117.9000718 2.218341 0 .7540783-.3000321 1.4203685-.9000718 1.9988703-.6000398.5785019-1.3011973.8688784-2.1034726.8711294h-93.90621462c-.91561615 0-1.65899868-.2757451-2.23014758-.8272352-.57114891-.5514902-.85783455-1.2324117-.86005692-2.0427645 0-.8688784.28668564-1.6083253.86005692-2.218341.57337127-.6100156 1.3167538-.9138979 2.23014758-.9116593zm0 15.6666666h93.90621462c.800053 0 1.5012105.3038948 2.1034726.9116594.602262.6077646.9022819 1.3472116.9000718 2.2183409 0 .7540784-.3000321 1.4203685-.9000718 1.9988704-.6000398.5785019-1.3011973.8688784-2.1034726.8711293h-93.90621462c-.91561615 0-1.65899868-.275745-2.23014758-.8272352-.57114891-.5514901-.85783455-1.2324116-.86005692-2.0427645 0-.8688783.28668564-1.6083253.86005692-2.2183409.57337127-.6100156 1.3167538-.9138979 2.23014758-.9116594zm0 15.6666667h93.90621462c.800053 0 1.5012105.3038947 2.1034726.9116594.602262.6077646.9022819 1.3472116.9000718 2.2183409 0 .7540784-.3000321 1.4203685-.9000718 1.9988704-.6000398.5785019-1.3011973.8688783-2.1034726.8711293h-93.90621462c-.91561615 0-1.65899868-.2757451-2.23014758-.8272352-.57114891-.5514901-.85783455-1.2324116-.86005692-2.0427645 0-.8688783.28668564-1.6083253.86005692-2.2183409.57337127-.6100156 1.3167538-.913898 2.23014758-.9116594z\" /> </svg>\n`;\n"]}

package/dist/src/sort-filter-bar/img/list.d.ts

@@ -0,0 +1 @@
+export declare const listIcon: import("lit").TemplateResult<2>;

package/dist/src/sort-filter-bar/img/list.js

@@ -0,0 +1,5 @@
+import { svg } from 'lit';
+export const listIcon = svg `
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero"><path d="m97.8975061 6h-65.7343743c-.6409315 0-1.1612995-.29021372-1.5611039-.87064117-.3998043-.58042745-.6004844-1.3048369-.60204-2.17322835 0-.81214848.20068-1.50731158.60204-2.08548931.4013601-.57817773.921728-.86839145 1.5611039-.87064117h65.7343743c.5600372 0 1.0508477.29021372 1.4724313.87064117s.6315976 1.27559055.6300505 2.08548931c0 .86839145-.2100226 1.5928009-.6300505 2.17322835-.420028.58042745-.9108384.87064117-1.4724313.87064117z"/><path d="m97.8975061 61h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m97.8975061 19h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m97.8975061 74h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m97.8975061 32h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m97.8975061 87h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m97.8975061 45h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m97.8975061 100h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z"/><path d="m0 0h25v25h-25z"/><path d="m0 55h25v25h-25z"/></g></svg>
+`;
+//# sourceMappingURL=list.js.map

package/dist/src/sort-filter-bar/img/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../../src/sort-filter-bar/img/list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CAAA;;CAE1B,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const listIcon = svg`\n<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><g fill-rule=\"nonzero\"><path d=\"m97.8975061 6h-65.7343743c-.6409315 0-1.1612995-.29021372-1.5611039-.87064117-.3998043-.58042745-.6004844-1.3048369-.60204-2.17322835 0-.81214848.20068-1.50731158.60204-2.08548931.4013601-.57817773.921728-.86839145 1.5611039-.87064117h65.7343743c.5600372 0 1.0508477.29021372 1.4724313.87064117s.6315976 1.27559055.6300505 2.08548931c0 .86839145-.2100226 1.5928009-.6300505 2.17322835-.420028.58042745-.9108384.87064117-1.4724313.87064117z\"/><path d=\"m97.8975061 61h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z\"/><path d=\"m97.8975061 19h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z\"/><path d=\"m97.8975061 74h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z\"/><path d=\"m97.8975061 32h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z\"/><path d=\"m97.8975061 87h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z\"/><path d=\"m97.8975061 45h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z\"/><path d=\"m97.8975061 100h-65.7343743c-.6409315 0-1.1612995-.2902137-1.5611039-.8706412-.3998043-.5804274-.6004844-1.3048369-.60204-2.1732283 0-.8121485.20068-1.5073116.60204-2.0854893.4013601-.5781778.921728-.8683915 1.5611039-.8706412h65.7343743c.5600372 0 1.0508477.2902137 1.4724313.8706412.4215836.5804274.6315976 1.2755905.6300505 2.0854893 0 .8683914-.2100226 1.5928009-.6300505 2.1732283-.420028.5804275-.9108384.8706412-1.4724313.8706412z\"/><path d=\"m0 0h25v25h-25z\"/><path d=\"m0 55h25v25h-25z\"/></g></svg>\n`;\n"]}

package/dist/src/sort-filter-bar/img/sort-toggle-disabled.d.ts

@@ -0,0 +1 @@
+export declare const sortDisabledIcon: import("lit").TemplateResult<1>;

package/dist/src/sort-filter-bar/img/sort-toggle-disabled.js

@@ -0,0 +1,15 @@
+import { html } from 'lit';
+export const sortDisabledIcon = html `
+  <svg viewBox="0 0 64 100" xmlns="http://www.w3.org/2000/svg">
+    <g fill="#bbb" fill-rule="evenodd">
+      <path
+        d="m0 35.625 21.5-35.625 21.5 35.625h-14.3333333v21.375h-14.3333334v-21.375z"
+      />
+      <path
+        d="m21 78.625 21.5-35.625 21.5 35.625h-14.3333333v21.375h-14.3333334v-21.375z"
+        transform="matrix(1 0 0 -1 0 143)"
+      />
+    </g>
+  </svg>
+`;
+//# sourceMappingURL=sort-toggle-disabled.js.map

package/dist/src/sort-filter-bar/img/sort-toggle-disabled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-toggle-disabled.js","sourceRoot":"","sources":["../../../../src/sort-filter-bar/img/sort-toggle-disabled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,MAAM,CAAC,MAAM,gBAAgB,GAAG,IAAI,CAAA;;;;;;;;;;;;CAYnC,CAAC","sourcesContent":["import { html } from 'lit';\n\nexport const sortDisabledIcon = html`\n  <svg viewBox=\"0 0 64 100\" xmlns=\"http://www.w3.org/2000/svg\">\n    <g fill=\"#bbb\" fill-rule=\"evenodd\">\n      <path\n        d=\"m0 35.625 21.5-35.625 21.5 35.625h-14.3333333v21.375h-14.3333334v-21.375z\"\n      />\n      <path\n        d=\"m21 78.625 21.5-35.625 21.5 35.625h-14.3333333v21.375h-14.3333334v-21.375z\"\n        transform=\"matrix(1 0 0 -1 0 143)\"\n      />\n    </g>\n  </svg>\n`;\n"]}

package/dist/src/sort-filter-bar/img/sort-toggle-down.d.ts

@@ -0,0 +1 @@
+export declare const sortDownIcon: import("lit").TemplateResult<1>;

package/dist/src/sort-filter-bar/img/sort-toggle-down.js

@@ -0,0 +1,17 @@
+import { html } from 'lit';
+export const sortDownIcon = html `
+  <svg viewBox="0 0 64 100" xmlns="http://www.w3.org/2000/svg">
+    <g fill-rule="evenodd">
+      <path
+        d="m0 35.625 21.5-35.625 21.5 35.625h-14.3333333v21.375h-14.3333334v-21.375z"
+        fill="#bbb"
+      />
+      <path
+        d="m21 78.625 21.5-35.625 21.5 35.625h-14.3333333v21.375h-14.3333334v-21.375z"
+        fill="#2c2c2c"
+        transform="matrix(1 0 0 -1 0 143)"
+      />
+    </g>
+  </svg>
+`;
+//# sourceMappingURL=sort-toggle-down.js.map

package/dist/src/sort-filter-bar/img/sort-toggle-down.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-toggle-down.js","sourceRoot":"","sources":["../../../../src/sort-filter-bar/img/sort-toggle-down.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAA;;;;;;;;;;;;;;CAc/B,CAAC","sourcesContent":["import { html } from 'lit';\n\nexport const sortDownIcon = html`\n  <svg viewBox=\"0 0 64 100\" xmlns=\"http://www.w3.org/2000/svg\">\n    <g fill-rule=\"evenodd\">\n      <path\n        d=\"m0 35.625 21.5-35.625 21.5 35.625h-14.3333333v21.375h-14.3333334v-21.375z\"\n        fill=\"#bbb\"\n      />\n      <path\n        d=\"m21 78.625 21.5-35.625 21.5 35.625h-14.3333333v21.375h-14.3333334v-21.375z\"\n        fill=\"#2c2c2c\"\n        transform=\"matrix(1 0 0 -1 0 143)\"\n      />\n    </g>\n  </svg>\n`;\n"]}

package/dist/src/sort-filter-bar/img/sort-toggle-up.d.ts

@@ -0,0 +1 @@
+export declare const sortUpIcon: import("lit").TemplateResult<1>;

package/dist/src/sort-filter-bar/img/sort-toggle-up.js

@@ -0,0 +1,17 @@
+import { html } from 'lit';
+export const sortUpIcon = html `
+  <svg viewBox="0 0 64 100" xmlns="http://www.w3.org/2000/svg">
+    <g fill-rule="evenodd">
+      <path
+        d="m0 35.625 21.5-35.625 21.5 35.625h-14.3333333v21.375h-14.3333334v-21.375z"
+        fill="#2c2c2c"
+      />
+      <path
+        d="m21 78.625 21.5-35.625 21.5 35.625h-14.3333333v21.375h-14.3333334v-21.375z"
+        fill="#bbb"
+        transform="matrix(1 0 0 -1 0 143)"
+      />
+    </g>
+  </svg>
+`;
+//# sourceMappingURL=sort-toggle-up.js.map

package/dist/src/sort-filter-bar/img/sort-toggle-up.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-toggle-up.js","sourceRoot":"","sources":["../../../../src/sort-filter-bar/img/sort-toggle-up.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAA;;;;;;;;;;;;;;CAc7B,CAAC","sourcesContent":["import { html } from 'lit';\n\nexport const sortUpIcon = html`\n  <svg viewBox=\"0 0 64 100\" xmlns=\"http://www.w3.org/2000/svg\">\n    <g fill-rule=\"evenodd\">\n      <path\n        d=\"m0 35.625 21.5-35.625 21.5 35.625h-14.3333333v21.375h-14.3333334v-21.375z\"\n        fill=\"#2c2c2c\"\n      />\n      <path\n        d=\"m21 78.625 21.5-35.625 21.5 35.625h-14.3333333v21.375h-14.3333334v-21.375z\"\n        fill=\"#bbb\"\n        transform=\"matrix(1 0 0 -1 0 143)\"\n      />\n    </g>\n  </svg>\n`;\n"]}

package/dist/src/sort-filter-bar/img/sort-triangle.d.ts

@@ -0,0 +1 @@
+export declare const sortIcon: import("lit").TemplateResult<2>;

package/dist/src/sort-filter-bar/img/sort-triangle.js

@@ -0,0 +1,5 @@
+import { svg } from 'lit';
+export const sortIcon = svg `
+<svg viewBox="0 0 100 55" xmlns="http://www.w3.org/2000/svg"><path d="m50 0 50 55h-100z"/></svg>
+`;
+//# sourceMappingURL=sort-triangle.js.map

package/dist/src/sort-filter-bar/img/sort-triangle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-triangle.js","sourceRoot":"","sources":["../../../../src/sort-filter-bar/img/sort-triangle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CAAA;;CAE1B,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const sortIcon = svg`\n<svg viewBox=\"0 0 100 55\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m50 0 50 55h-100z\"/></svg>\n`;\n"]}

package/dist/src/sort-filter-bar/img/tile.d.ts

@@ -0,0 +1 @@
+export declare const tileIcon: import("lit").TemplateResult<2>;

package/dist/src/sort-filter-bar/img/tile.js

@@ -0,0 +1,5 @@
+import { svg } from 'lit';
+export const tileIcon = svg `
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m64 54v46h-28v-46zm36 0v46h-28v-46zm-72 0v46h-28v-46zm36-54v46h-28v-46zm36 0v46h-28v-46zm-72 0v46h-28v-46z"/></svg>
+`;
+//# sourceMappingURL=tile.js.map

package/dist/src/sort-filter-bar/img/tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../../src/sort-filter-bar/img/tile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,CAAA;;CAE1B,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const tileIcon = svg`\n<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m64 54v46h-28v-46zm36 0v46h-28v-46zm-72 0v46h-28v-46zm36-54v46h-28v-46zm36 0v46h-28v-46zm-72 0v46h-28v-46z\"/></svg>\n`;\n"]}