@internetarchive/collection-browser 2.18.3-alpha-webdev7768.8 → 2.19.0

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

@@ -1,185 +1,185 @@
-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;
-      }
-    `;
-  }
-}
+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/tiles/grid/styles/tile-grid-shared-styles.ts

@@ -1,129 +1,129 @@
-import { css } from 'lit';
-import { srOnlyStyle } from '../../../styles/sr-only';
-
-/**
- * Base tile styles
- */
-
-const tileBackgroundColor = css`var(--tileBackgroundColor, #ffffff)`;
-const tileCornerRadius = css`var(--tileCornerRadius, 4px)`;
-
-export const baseTileStyles = css`
-  /* Include .sr-only styles for all tiles */
-  ${srOnlyStyle}
-
-  .container {
-    background-color: ${tileBackgroundColor};
-    border: 1px #2c2c2c;
-    border-radius: ${tileCornerRadius};
-    box-shadow: var(--tileBoxShadow, 1px 1px 2px 0);
-    box-sizing: border-box;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-
-  image-block {
-    display: block;
-    position: relative;
-    text-align: center;
-  }
-
-  .tile-details {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    row-gap: 10px;
-    font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
-  }
-
-  .item-info {
-    display: flex;
-    flex-direction: column;
-    row-gap: 5px;
-    flex-grow: 1;
-  }
-
-  #title {
-    padding: 0 5px;
-  }
-
-  .created-by,
-  .date-sorted-by,
-  .volume-issue,
-  .archivist-since {
-    display: flex;
-    justify-content: left;
-    align-items: flex-start;
-    padding: 0 5px;
-  }
-
-  .truncated {
-    flex: 1;
-    color: #2c2c2c;
-    min-width: 0; /* Important for long words! */
-    text-align: left;
-    line-height: 15px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    word-wrap: break-word;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-  }
-
-  h4.truncated {
-    display: -webkit-box;
-    margin: 0px;
-    line-height: 15px;
-    font-size: 14px;
-    font-weight: 500;
-    padding-bottom: 1px;
-  }
-
-  span {
-    display: -webkit-box;
-    font-size: 1.4rem;
-    line-height: 15px;
-    overflow: hidden;
-    word-wrap: break-word;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-    padding-bottom: 1px;
-  }
-
-  .container:hover > .tile-details > .item-info > #title > .truncated {
-    text-decoration: underline;
-  }
-
-  /** this is a workaround for Safari 15 where the hover effects are not working */
-  #title:hover > .truncated {
-    text-decoration: underline;
-  }
-
-  .info-button {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    margin: 0;
-    padding: 0;
-    border: none;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: rgba(220, 220, 220, 0.5);
-    color: white;
-    font-size: 2rem;
-    font-weight: bold;
-    line-height: 1;
-    text-shadow: black 1px 1px 3px;
-    overflow: visible;
-    aspect-ratio: 1 / 1;
-    z-index: 1;
-  }
-
-  .hidden {
-    display: none;
-  }
-`;
+import { css } from 'lit';
+import { srOnlyStyle } from '../../../styles/sr-only';
+
+/**
+ * Base tile styles
+ */
+
+const tileBackgroundColor = css`var(--tileBackgroundColor, #ffffff)`;
+const tileCornerRadius = css`var(--tileCornerRadius, 4px)`;
+
+export const baseTileStyles = css`
+  /* Include .sr-only styles for all tiles */
+  ${srOnlyStyle}
+
+  .container {
+    background-color: ${tileBackgroundColor};
+    border: 1px #2c2c2c;
+    border-radius: ${tileCornerRadius};
+    box-shadow: var(--tileBoxShadow, 1px 1px 2px 0);
+    box-sizing: border-box;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  image-block {
+    display: block;
+    position: relative;
+    text-align: center;
+  }
+
+  .tile-details {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    row-gap: 10px;
+    font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
+  }
+
+  .item-info {
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+    flex-grow: 1;
+  }
+
+  #title {
+    padding: 0 5px;
+  }
+
+  .created-by,
+  .date-sorted-by,
+  .volume-issue,
+  .archivist-since {
+    display: flex;
+    justify-content: left;
+    align-items: flex-start;
+    padding: 0 5px;
+  }
+
+  .truncated {
+    flex: 1;
+    color: #2c2c2c;
+    min-width: 0; /* Important for long words! */
+    text-align: left;
+    line-height: 15px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-wrap: break-word;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+
+  h4.truncated {
+    display: -webkit-box;
+    margin: 0px;
+    line-height: 15px;
+    font-size: 14px;
+    font-weight: 500;
+    padding-bottom: 1px;
+  }
+
+  span {
+    display: -webkit-box;
+    font-size: 1.4rem;
+    line-height: 15px;
+    overflow: hidden;
+    word-wrap: break-word;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    padding-bottom: 1px;
+  }
+
+  .container:hover > .tile-details > .item-info > #title > .truncated {
+    text-decoration: underline;
+  }
+
+  /** this is a workaround for Safari 15 where the hover effects are not working */
+  #title:hover > .truncated {
+    text-decoration: underline;
+  }
+
+  .info-button {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(220, 220, 220, 0.5);
+    color: white;
+    font-size: 2rem;
+    font-weight: bold;
+    line-height: 1;
+    text-shadow: black 1px 1px 3px;
+    overflow: visible;
+    aspect-ratio: 1 / 1;
+    z-index: 1;
+  }
+
+  .hidden {
+    display: none;
+  }
+`;