@internetarchive/collection-browser 4.8.0 → 4.8.1-alpha-webdev9189.0

package/src/collection-facets/smart-facets/smart-facet-dropdown.ts

@@ -1,185 +0,0 @@
-import { css, html, LitElement, CSSResultGroup, nothing } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import type { IaDropdown, optionInterface } from '@internetarchive/ia-dropdown';
-import type { FacetRef, SmartFacet, SmartFacetEvent } from './models';
-import { log } from '../../utils/log';
-
-@customElement('smart-facet-dropdown')
-export class SmartFacetDropdown extends LitElement {
-  @property({ type: Array }) facetInfo?: SmartFacet[];
-
-  @property({ type: String }) labelPrefix?: string;
-
-  @property({ type: Object }) activeFacetRef?: FacetRef;
-
-  @query('ia-dropdown') dropdown?: IaDropdown;
-
-  //
-  // COMPONENT LIFECYCLE METHODS
-  //
-
-  render() {
-    if (!this.facetInfo || !this.activeFacetRef) return nothing;
-    if (this.facetInfo.length === 0) return nothing;
-
-    const displayText =
-      this.activeFacetRef.displayText ?? this.activeFacetRef.bucketKey;
-    if (!displayText) return nothing;
-
-    return html`
-      <div class="dropdown-container">
-        <ia-dropdown
-          class="dropdown"
-          displayCaret
-          closeOnSelect
-          closeOnEscape
-          closeOnBackdropClick
-          includeSelectedOption
-          usePopover
-          .options=${this.dropdownOptions}
-          .selectedOption=${this.activeDropdownOption}
-          .openViaButton=${false}
-          @optionSelected=${this.optionSelected}
-          @click=${this.onDropdownClick}
-        >
-          <span
-            class="dropdown-label"
-            slot="dropdown-label"
-            @click=${this.defaultOptionSelected}
-            >${this.labelPrefix ?? nothing} ${displayText}</span
-          >
-        </ia-dropdown>
-      </div>
-    `;
-  }
-
-  //
-  // OTHER METHODS
-  //
-
-  private get dropdownOptions(): optionInterface[] {
-    return (
-      this.facetInfo?.map(smartFacet => {
-        const firstFacet = smartFacet.facets[0];
-        return {
-          id: firstFacet.bucketKey,
-          label: html`<span>
-            ${smartFacet.label ??
-            firstFacet.displayText ??
-            firstFacet.bucketKey}
-          </span>`,
-        };
-      }) ?? []
-    );
-  }
-
-  private get activeDropdownOption(): optionInterface | undefined {
-    if (!this.activeFacetRef) return undefined;
-    return this.dropdownOptions.find(
-      opt => opt.id === this.activeFacetRef?.bucketKey,
-    );
-  }
-
-  /**
-   * Handler for when the default option on the dropdown button is clicked
-   */
-  private defaultOptionSelected(): void {
-    this.handleSelection(this.activeFacetRef?.bucketKey);
-  }
-
-  /**
-   * Handler for when an option in the dropdown menu is selected
-   */
-  private optionSelected(e: CustomEvent<{ option: optionInterface }>): void {
-    this.handleSelection(e.detail.option.id);
-  }
-
-  /**
-   * Responds to a dropdown selection by emitting a `facetClick` event with
-   * the appropriate facet details.
-   */
-  private handleSelection(bucketKey?: string): void {
-    if (!bucketKey || !this.facetInfo || !this.activeFacetRef) return;
-
-    let selectedSmartFacet;
-    for (const smartFacet of this.facetInfo) {
-      const selectedRef = smartFacet.facets.find(
-        b => b.bucketKey === bucketKey,
-      );
-      if (selectedRef) {
-        this.activeFacetRef = selectedRef;
-        selectedSmartFacet = smartFacet;
-      }
-    }
-
-    if (!selectedSmartFacet) return;
-
-    this.dispatchEvent(
-      new CustomEvent<SmartFacetEvent>('facetClick', {
-        detail: {
-          smartFacet: selectedSmartFacet,
-          details: [
-            {
-              facetType: this.activeFacetRef.facetType,
-              bucket: {
-                key: this.activeFacetRef.bucketKey,
-                count: 0,
-                state: 'selected',
-              },
-              negative: false,
-            },
-          ],
-        },
-      }),
-    );
-  }
-
-  private onDropdownClick(): void {
-    log('smart dropdown: onDropdownClick', this);
-    this.dispatchEvent(
-      new CustomEvent<SmartFacetDropdown>('dropdownClick', { detail: this }),
-    );
-  }
-
-  close(): void {
-    if (this.dropdown) {
-      this.dropdown.open = false;
-    }
-  }
-
-  //
-  // STYLES
-  //
-
-  static get styles(): CSSResultGroup {
-    return css`
-      .dropdown-container {
-        padding: 5px 5px;
-        border-radius: 5px;
-        background: white;
-        color: #2c2c2c;
-        border: 1px solid #194880;
-        font-size: 1.4rem;
-        font-family: inherit;
-      }
-
-      .dropdown-label {
-        font-size: 1.4rem;
-        font-family: inherit;
-      }
-
-      .dropdown {
-        --dropdownBorderColor: #194880;
-        --dropdownBorderWidth: 1px;
-        --dropdownBgColor: white;
-        --dropdownHoverBgColor: #f8f8f8;
-        --dropdownTextColor: #2c2c2c;
-        --dropdownHoverTextColor: #2c2c2c;
-        --dropdownCaretColor: #2c2c2c;
-        --dropdownWhiteSpace: nowrap;
-        --caretWidth: 14px;
-        --caretHeight: 14px;
-      }
-    `;
-  }
-}

package/src/collection-facets/smart-facets/smart-facet-equals.ts

@@ -1,16 +0,0 @@
-import type { FacetRef, SmartFacet } from './models';
-
-function facetRefEquals(ref1?: FacetRef, ref2?: FacetRef): boolean {
-  if (ref1 === undefined) return ref2 !== undefined;
-  if (ref2 === undefined) return ref1 !== undefined;
-
-  return ref1.facetType === ref2.facetType && ref1.bucketKey === ref2.bucketKey;
-}
-
-export function smartFacetEquals(sf1: SmartFacet, sf2: SmartFacet) {
-  return (
-    sf1.label === sf2.label &&
-    sf1.facets.length === sf2.facets.length &&
-    sf1.facets.every((sf, i) => facetRefEquals(sf, sf2.facets[i]))
-  );
-}

package/src/collection-facets/smart-facets/smart-facet-heuristics.ts

@@ -1,26 +0,0 @@
-import { dedupe } from './dedupe';
-import { BrowserLanguageHeuristic } from './heuristics/browser-language/browser-language-heuristic';
-import { QueryKeywordsHeuristic } from './heuristics/query-keywords/query-keywords-heuristic';
-import { WikidataHeuristic } from './heuristics/wikidata/wikidata-heuristic';
-import type { SmartFacet, SmartQueryHeuristic } from './models';
-
-export class SmartQueryHeuristicGroup implements SmartQueryHeuristic {
-  // Avoid collapsing the array onto one line
-  // prettier-ignore
-  private static readonly DEFAULT_HEURISTICS: (new () => SmartQueryHeuristic)[] = [
-    QueryKeywordsHeuristic,
-    WikidataHeuristic,
-    BrowserLanguageHeuristic
-  ];
-
-  async getRecommendedFacets(
-    query: string,
-    heuristics = SmartQueryHeuristicGroup.DEFAULT_HEURISTICS,
-  ): Promise<SmartFacet[]> {
-    const promises = heuristics.map(HeuristicCtor =>
-      new HeuristicCtor().getRecommendedFacets(query),
-    );
-
-    return dedupe((await Promise.all(promises)).flat());
-  }
-}

package/src/collection-facets/toggle-switch.ts

@@ -1,175 +0,0 @@
-import { css, html, LitElement, CSSResultGroup } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { srOnlyStyle } from '../styles/sr-only';
-
-export type Side = 'left' | 'right';
-
-@customElement('toggle-switch')
-export class ToggleSwitch extends LitElement {
-  /**
-   * The value this switch should have when toggled to the left.
-   */
-  @property({ type: String, attribute: true }) leftValue: string = '';
-
-  /**
-   * The human-readable label to display on the left side of this switch.
-   * If none is provided, `leftValue` is used.
-   */
-  @property({ type: String, attribute: true }) leftLabel?: string;
-
-  /**
-   * The value this switch should have when toggled to the right.
-   */
-  @property({ type: String, attribute: true }) rightValue: string = '';
-
-  /**
-   * The human-readable label to display on the right side of this switch.
-   * If none is provided, `rightValue` is used.
-   */
-  @property({ type: String, attribute: true }) rightLabel?: string;
-
-  /**
-   * Which side of the switch is selected (`'left'` or `'right'`).
-   */
-  @property({ type: String, attribute: true }) side: Side = 'left';
-
-  @query('#switch-left')
-  private leftRadio!: HTMLInputElement;
-
-  render() {
-    return html`
-      <div id="container">
-        <label for="switch-left">${this.leftLabel ?? this.leftValue}</label>
-        <input
-          type="radio"
-          id="switch-left"
-          class="sr-only"
-          name="switch"
-          .value=${this.leftValue}
-          .checked=${this.side === 'left'}
-          @change=${this.handleRadioChange}
-        />
-        <input
-          type="radio"
-          id="switch-right"
-          class="sr-only"
-          name="switch"
-          .value=${this.rightValue}
-          .checked=${this.side === 'right'}
-          @change=${this.handleRadioChange}
-        />
-        <button
-          id="switch-button"
-          class=${this.side}
-          aria-hidden="true"
-          tabindex="-1"
-          @click=${this.handleClick}
-        >
-          <div id="knob"></div>
-        </button>
-        <label for="switch-right">${this.rightLabel ?? this.rightValue}</label>
-      </div>
-    `;
-  }
-
-  /**
-   * The currently selected value of this switch.
-   */
-  get value(): string {
-    return this.side === 'left' ? this.leftValue : this.rightValue;
-  }
-
-  /**
-   * The label for the currently selected value of this switch.
-   * Falls back to the current value if its label is not defined.
-   */
-  get selectedLabel(): string {
-    return this.side === 'left'
-      ? (this.leftLabel ?? this.leftValue)
-      : (this.rightLabel ?? this.rightValue);
-  }
-
-  private handleClick(): void {
-    this.side = this.side === 'left' ? 'right' : 'left';
-    this.emitChangeEvent();
-  }
-
-  private handleRadioChange(): void {
-    this.side = this.leftRadio.checked ? 'left' : 'right';
-    this.emitChangeEvent();
-  }
-
-  private emitChangeEvent(): void {
-    const event = new CustomEvent<string>('change', {
-      detail: this.value,
-    });
-    this.dispatchEvent(event);
-  }
-
-  static get styles(): CSSResultGroup {
-    const switchWidth = css`var(--switchWidth, 30px)`;
-    const switchHeight = css`var(--switchHeight, 14px)`;
-    const switchMarginLeft = css`var(--switchMarginLeft, 5px)`;
-    const switchMarginRight = css`var(--switchMarginRight, 5px)`;
-    const switchBorderWidth = css`var(--switchBorderWidth, 3px)`;
-    const switchBgColor = css`var(--switchBgColor, #194880)`;
-    const switchBorderColor = css`var(--switchBorderColor, #194880)`;
-    const labelFontSize = css`var(--labelFontSize, 1.3rem)`;
-    const knobColor = css`var(--knobColor, white)`;
-    const knobTransitionDuration = css`var(--knobTransitionDuration, 0.25s)`;
-    const knobTransitionFn = css`var(--knobTransitionFn, ease)`;
-
-    return [
-      srOnlyStyle,
-      css`
-        #container {
-          display: inline-flex;
-          align-items: center;
-          flex-wrap: nowrap;
-          font-size: ${labelFontSize};
-        }
-
-        #switch-button {
-          width: ${switchWidth};
-          height: ${switchHeight};
-          margin: 0 ${switchMarginRight} 0 ${switchMarginLeft};
-          padding: 0;
-          border: ${switchBorderWidth} solid ${switchBorderColor};
-          border-radius: ${switchHeight};
-          box-sizing: content-box;
-          background: ${switchBgColor};
-          appearance: none;
-          cursor: pointer;
-        }
-
-        #switch-button.left #knob {
-          transform: translateX(0);
-        }
-
-        #switch-button.right #knob {
-          transform: translateX(calc(${switchWidth} - ${switchHeight}));
-        }
-
-        #switch-button:focus-visible {
-          outline: 2px solid black;
-          outline-offset: 2px;
-        }
-
-        #knob {
-          display: block;
-          width: ${switchHeight};
-          height: ${switchHeight};
-          border-radius: 50%;
-          background: ${knobColor};
-          transition: transform ${knobTransitionDuration} ${knobTransitionFn};
-        }
-
-        @media (prefers-reduced-motion: reduce) {
-          #knob {
-            transition-duration: 0.001s !important; /* Imperceptibly fast */
-          }
-        }
-      `,
-    ];
-  }
-}