@internetarchive/collection-browser 4.7.1-alpha-webdev9189.0 → 4.8.1-webdev-9227.1

package/src/styles/ia-button.ts

@@ -1,139 +0,0 @@
-import { css } from 'lit';
-
-const whiteColor = css`var(--white, #fff)`;
-const disabledButtonFillColor = css`var(--primaryDisableCTAFill, #767676)`;
-const disabledButtonBorderColor = css`var(--secondaryCTABorder, #999)`;
-
-const primaryButtonFillColor = css`var(--primaryCTAFill, #194880)`;
-const primaryButtonFillColorRGB = css`var(--primaryCTAFillRGB, 25, 72, 128)`; // RBG format of --primaryCTAFill
-const primaryButtonBorderColor = css`var(--primaryCTABorder, #c5d1df)`;
-
-const dangerButtonFillColor = css`var(--primaryErrorCTAFill, #d9534f)`;
-const dangerButtonFillColorRGB = css`var(--primaryErrorCTAFillRGB, 229, 28, 38)`; // RBG format of --primaryErrorCTAFill
-const dangerButtonBorderColor = css`var(--primaryErrorCTABorder, #d43f3a)`;
-
-const darkButtonFillColor = css`var(--secondaryCTAFill, #333)`;
-const darkButtonFillColorRGB = css`var(--secondaryCTAFillRGB, 51, 51, 51)`; // RBG format of --secondaryCTAFill
-const darkButtonBorderColor = css`var(--primaryCTABorder, #979797)`;
-
-const warningButtonFillColor = css`var(---primaryWarningFill, #ee8950)`;
-const warningButtonFillColorRGB = css`var(--primaryWarningFillRGB, 238, 137, 80)`; // RBG format of --primaryWarningFill
-const warningButtonBorderColor = css`var(--primaryWarningBorder, #ec7939)`;
-
-export default css`
-  .ia-button {
-    min-height: 3rem;
-    cursor: pointer;
-    color: ${whiteColor};
-    line-height: normal;
-    border-radius: 0.4rem;
-    font-size: 1.4rem;
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    border: 1px solid transparent;
-    white-space: nowrap;
-    appearance: auto;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    transition: all 0.1s ease 0s;
-    vertical-align: middle;
-    padding: 0 3rem;
-    outline-color: ${whiteColor};
-    outline-offset: -4px;
-    user-select: none;
-    text-decoration: none;
-    width: fit-content;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -o-user-select: none;
-  }
-  .ia-button:focus-visible {
-    outline-style: double;
-  }
-  .ia-button:disabled {
-    cursor: not-allowed;
-    background-color: ${disabledButtonFillColor};
-    border: 1px solid ${disabledButtonBorderColor};
-  }
-  .ia-button.transparent {
-    background-color: transparent;
-  }
-
-  .ia-button.primary:disabled,
-  .ia-button.danger:disabled,
-  .ia-button.warning:disabled,
-  .ia-button.dark:disabled {
-    opacity: 0.5;
-  }
-
-  .ia-button.primary {
-    background-color: ${primaryButtonFillColor};
-    border-color: ${primaryButtonBorderColor};
-  }
-  .ia-button.primary:hover {
-    background-color: rgba(${primaryButtonFillColorRGB}, 0.9);
-  }
-  .ia-button.primary:focus-visible {
-    background-color: rgba(${primaryButtonFillColorRGB}, 0.8);
-  }
-  .ia-button.primary:active {
-    background-color: rgba(${primaryButtonFillColorRGB}, 0.7);
-  }
-
-  .ia-button.danger {
-    background-color: ${dangerButtonFillColor};
-    border-color: ${dangerButtonBorderColor};
-  }
-  .ia-button.danger:hover {
-    background-color: rgba(${dangerButtonFillColorRGB}, 0.9);
-  }
-  .ia-button.danger:focus-visible {
-    background-color: rgba(${dangerButtonFillColorRGB}, 0.8);
-  }
-  .ia-button.danger:active {
-    background-color: rgba(${dangerButtonFillColorRGB}, 0.7);
-  }
-
-  .ia-button.warning {
-    background-color: ${warningButtonFillColor};
-    border-color: ${warningButtonBorderColor};
-  }
-  .ia-button.warning:hover {
-    background-color: rgba(${warningButtonFillColorRGB}, 0.9);
-  }
-  .ia-button.warning:focus-visible {
-    background-color: rgba(${warningButtonFillColorRGB}, 0.8);
-  }
-  .ia-button.warning:active {
-    background-color: rgba(${warningButtonFillColorRGB}, 0.7);
-  }
-
-  .ia-button.dark {
-    background-color: ${darkButtonFillColor};
-    border-color: ${darkButtonBorderColor};
-  }
-  .ia-button.dark:hover {
-    background-color: rgba(${darkButtonFillColorRGB}, 0.9);
-  }
-  .ia-button.dark:focus-visible {
-    background-color: rgba(${darkButtonFillColorRGB}, 0.8);
-  }
-  .ia-button.dark:active {
-    background-color: rgba(${darkButtonFillColorRGB}, 0.7);
-  }
-
-  .ia-button.link {
-    margin: 0;
-    padding: 6px;
-    border: 0;
-    appearance: none;
-    background: none;
-    color: var(--ia-theme-link-color, #4b64ff);
-    text-decoration: none;
-    cursor: pointer;
-  }
-  .ia-button.link:hover {
-    text-decoration: underline;
-  }
-`;

package/src/styles/item-image-styles.ts

@@ -1,124 +0,0 @@
-import { css } from 'lit';
-
-/**
- * Base item-image styles
- */
-export const baseItemImageStyles = css`
-  .drop-shadow {
-    overflow: hidden;
-    height: 100%;
-  }
-
-  .list-box {
-    overflow: hidden;
-    box-sizing: border-box;
-    display: inline-block;
-    position: relative;
-  }
-
-  .list-box img {
-    border-radius: 0;
-  }
-
-  .contain {
-    object-fit: contain;
-    object-position: center;
-    height: 100%;
-    width: 100%;
-  }
-
-  .cover {
-    object-fit: cover;
-  }
-
-  .blur {
-    filter: blur(15px);
-    box-shadow: 1px 1px 2px 0;
-  }
-
-  .account-image {
-    object-fit: cover;
-    background-position: 50% 50%;
-    border-radius: 50%;
-    width: 160px;
-    height: 160px;
-  }
-
-  :not(.list-box) > .collection-image {
-    object-fit: cover;
-    border-radius: 8px;
-    width: 100%;
-    height: 160px;
-  }
-
-  .list-box.search-image svg {
-    margin: 10px;
-  }
-`;
-
-/**
- * Waveform styles
- */
-export const waveformGradientStyles = css`
-  .waveform {
-    mix-blend-mode: screen;
-    position: relative;
-    height: 62.5%;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  .waveform-grad0 {
-    background: linear-gradient(
-      hsl(300, 80%, 55%),
-      hsl(330, 80%, 33%) 35%,
-      hsl(330, 80%, 22%) 70%,
-      hsl(0, 0%, 0%)
-    );
-  }
-
-  .waveform-grad1 {
-    background: linear-gradient(
-      hsl(200, 80%, 55%),
-      hsl(230, 80%, 33%) 35%,
-      hsl(230, 80%, 22%) 70%,
-      hsl(0, 0%, 0%)
-    );
-  }
-
-  .waveform-grad2 {
-    background: linear-gradient(
-      hsl(160, 80%, 55%),
-      hsl(190, 80%, 33%) 35%,
-      hsl(190, 80%, 22%) 70%,
-      hsl(0, 0%, 0%)
-    );
-  }
-
-  .waveform-grad3 {
-    background: linear-gradient(
-      hsl(250, 80%, 55%),
-      hsl(280, 80%, 33%) 35%,
-      hsl(280, 80%, 22%) 70%,
-      hsl(0, 0%, 0%)
-    );
-  }
-
-  .waveform-grad4 {
-    background: linear-gradient(
-      hsl(280, 80%, 55%),
-      hsl(310, 80%, 33%) 35%,
-      hsl(310, 80%, 22%) 70%,
-      hsl(0, 0%, 0%)
-    );
-  }
-
-  .waveform-grad5 {
-    background: linear-gradient(
-      hsl(340, 80%, 55%),
-      hsl(0, 80%, 33%) 35%,
-      hsl(0, 80%, 22%) 70%,
-      hsl(0, 0%, 0%)
-    );
-  }
-`;

package/src/styles/sr-only.ts

@@ -1,18 +0,0 @@
-import { css } from 'lit';
-
-export const srOnlyStyle = css`
-  .sr-only {
-    position: absolute !important;
-    width: 1px !important;
-    height: 1px !important;
-    margin: -1px !important;
-    padding: 0 !important;
-    border: 0 !important;
-    overflow: hidden !important;
-    white-space: nowrap !important;
-    clip: rect(1px, 1px, 1px, 1px) !important;
-    -webkit-clip-path: inset(50%) !important;
-    clip-path: inset(50%) !important;
-    user-select: none !important;
-  }
-`;

package/src/styles/tile-action-styles.ts

@@ -1,59 +0,0 @@
-import { css } from 'lit';
-
-/**
- * Shared styles for tile action buttons rendered in grid, list-detail, and
- * list-compact display modes. Layout positioning is handled by each tile
- * component; these styles cover only the button appearance and the row
- * container's default flex behavior.
- *
- * Customizable via CSS custom properties:
- *  - `--tileActionColor` (defaults to --primaryErrorCTAFill, then #d9534f)
- *  - `--tileActionBg` (default: #fff)
- *  - `--tileActionBorderColor` (defaults to --primaryErrorCTAFill, then #d9534f)
- *  - `--tileActionHoverBg` (defaults to --primaryErrorCTAFillRGB at 20% alpha)
- *  - `--tileActionHoverColor` (defaults to --tileActionColor)
- */
-export const tileActionStyles = css`
-  .tile-actions {
-    flex-shrink: 0;
-    display: flex;
-    gap: var(--tileActionGap, 0);
-  }
-
-  .tile-action-btn {
-    flex: 1;
-    padding: 6px 5px;
-    border: 2px solid
-      var(--tileActionBorderColor, var(--primaryErrorCTAFill, #d9534f));
-    border-radius: var(--tileActionBorderRadius, 0);
-    /* Inherit from the surrounding tile rather than the UA default for <button> */
-    font-family: inherit;
-    font-size: 1.2rem;
-    font-weight: bold;
-    cursor: pointer;
-    color: var(--tileActionColor, var(--primaryErrorCTAFill, #d9534f));
-    background: var(--tileActionBg, #fff);
-    transition:
-      background 0.15s,
-      color 0.15s;
-  }
-
-  /*
-   * When buttons are flush against each other (no gap), overlap their shared
-   * edge by 1px so adjacent borders don't double up.
-   */
-  .tile-action-btn + .tile-action-btn {
-    margin-left: -1px;
-  }
-
-  .tile-action-btn:hover {
-    background: var(
-      --tileActionHoverBg,
-      rgba(var(--primaryErrorCTAFillRGB, 229, 28, 38), 0.2)
-    );
-    color: var(
-      --tileActionHoverColor,
-      var(--tileActionColor, var(--primaryErrorCTAFill, #d9534f))
-    );
-  }
-`;

package/src/tiles/base-tile-component.ts

@@ -1,124 +0,0 @@
-import { html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit';
-import { property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import type { SortParam } from '@internetarchive/search-service';
-import { TileDisplayValueProvider } from './tile-display-value-provider';
-import type { TileModel } from '../models';
-import { DateFormat, formatDate } from '../utils/format-date';
-import type { TileAction } from './models';
-
-export abstract class BaseTileComponent extends LitElement {
-  @property({ type: Object }) model?: TileModel;
-
-  /** Action buttons to display on this tile (rendered by subclasses) */
-  @property({ type: Array }) tileActions: TileAction[] = [];
-
-  @property({ type: Number }) currentWidth?: number;
-
-  @property({ type: Number }) currentHeight?: number;
-
-  @property({ type: String }) baseNavigationUrl?: string;
-
-  @property({ type: String }) baseImageUrl?: string;
-
-  @property({ type: String }) collectionPagePath?: string;
-
-  @property({ type: Object }) sortParam: SortParam | null = null;
-
-  @property({ type: Object }) defaultSortParam: SortParam | null = null;
-
-  @property({ type: String }) creatorFilter?: string;
-
-  @property({ type: Number }) mobileBreakpoint?: number;
-
-  @property({ type: Boolean }) loggedIn = false;
-
-  @property({ type: Boolean }) suppressBlurring = false;
-
-  @property({ type: Boolean }) useLocalTime = false;
-
-  protected displayValueProvider = new TileDisplayValueProvider();
-
-  protected willUpdate(changed: PropertyValues<this>) {
-    // Ensure the TileDisplayValueProvider stays up-to-date as properties change
-    if (
-      changed.has('model') ||
-      changed.has('baseNavigationUrl') ||
-      changed.has('collectionPagePath') ||
-      changed.has('sortParam') ||
-      changed.has('defaultSortParam') ||
-      changed.has('creatorFilter')
-    ) {
-      this.displayValueProvider = new TileDisplayValueProvider({
-        model: this.model,
-        baseNavigationUrl: this.baseNavigationUrl,
-        collectionPagePath: this.collectionPagePath,
-        sortParam: this.sortParam ?? this.defaultSortParam ?? undefined,
-        creatorFilter: this.creatorFilter,
-      });
-    }
-  }
-
-  /**
-   * The formatted date string for given date and format type, taking into
-   * account whether this tile component should be using local time or UTC.
-   */
-  protected getFormattedDate(date?: Date, format?: DateFormat): string {
-    const { useLocalTime } = this;
-    return formatDate(date, format, { useLocalTime });
-  }
-
-  /**
-   * Renders the action buttons configured for this tile, or `nothing` if
-   * there are none. Optional `extraClass` is appended to the container's
-   * class list so subclasses can target their own layout tweaks.
-   */
-  protected renderTileActions(
-    extraClass: string = '',
-  ): TemplateResult | typeof nothing {
-    if (!this.tileActions.length) return nothing;
-
-    const containerClasses = classMap({
-      'tile-actions': true,
-      ...(extraClass && { [extraClass]: true }),
-    });
-
-    return html`
-      <div class=${containerClasses}>
-        ${this.tileActions.map(
-          action => html`
-            <button
-              class="tile-action-btn"
-              @click=${(e: Event) => this.handleTileActionClick(e, action)}
-            >
-              ${action.label}
-            </button>
-          `,
-        )}
-      </div>
-    `;
-  }
-
-  /**
-   * Click handler for tile action buttons. Stops propagation so the click
-   * doesn't activate a wrapping tile link, and dispatches a
-   * `tileActionClicked` event (bubbling + composed) carrying the action ID
-   * and the tile model.
-   */
-  protected handleTileActionClick(e: Event, action: TileAction): void {
-    e.preventDefault();
-    e.stopPropagation();
-    // Pre-set the hover pane controller's clicking flag so that focus
-    // restoration after a consumer-opened modal won't trigger the hover pane.
-    this.dispatchEvent(
-      new PointerEvent('pointerdown', { bubbles: true, composed: true }),
-    );
-    this.dispatchEvent(
-      new CustomEvent('tileActionClicked', {
-        detail: { actionId: action.id, model: this.model },
-        bubbles: true,
-        composed: true,
-      }),
-    );
-  }
-}

package/src/tiles/collection-browser-loading-tile.ts

@@ -1,26 +0,0 @@
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-
-@customElement('collection-browser-loading-tile')
-export class CollectionBrowserLoadingTile extends LitElement {
-  render() {
-    return html` <div id="container"></div> `;
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-        height: 100%;
-      }
-
-      #container {
-        background: linear-gradient(to right bottom, #dddddd, #d8d8d8);
-        border-radius: var(--tileCornerRadius, 4px);
-        background-size: 100% 100%;
-        display: block;
-        height: 100%;
-      }
-    `;
-  }
-}

package/src/tiles/grid/account-tile.ts

@@ -1,113 +0,0 @@
-import { css, html, nothing, TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { msg } from '@lit/localize';
-import { BaseTileComponent } from '../base-tile-component';
-
-import { baseTileStyles } from './styles/tile-grid-shared-styles';
-import '../image-block';
-import './tile-stats';
-
-@customElement('account-tile')
-export class AccountTile extends BaseTileComponent {
-  /*
-   * Reactive properties inherited from BaseTileComponent:
-   *  - model?: TileModel;
-   *  - currentWidth?: number;
-   *  - currentHeight?: number;
-   *  - baseNavigationUrl?: string;
-   *  - baseImageUrl?: string;
-   *  - collectionPagePath?: string;
-   *  - sortParam: SortParam | null = null;
-   *  - creatorFilter?: string;
-   *  - mobileBreakpoint?: number;
-   *  - loggedIn = false;
-   *  - suppressBlurring = false;
-   *  - useLocalTime = false;
-   */
-
-  @property({ type: Boolean }) showInfoButton = false;
-
-  render() {
-    return html`
-      <div class="container">
-        ${this.infoButtonTemplate}
-        <div class="tile-details">
-          <div class="item-info">
-            ${this.getAvatarTemplate} ${this.getTitleTemplate}
-            ${this.getArchivistTemplate}
-          </div>
-          ${this.getTileStatsTemplate}
-        </div>
-      </div>
-    `;
-  }
-
-  private get getAvatarTemplate(): TemplateResult {
-    return html`
-      <image-block
-        .model=${this.model}
-        .baseImageUrl=${this.baseImageUrl}
-        .viewSize=${'grid'}
-        .suppressBlurring=${this.suppressBlurring}
-      >
-      </image-block>
-    `;
-  }
-
-  private get getTitleTemplate() {
-    return html`<div id="title">
-      <h4 class="truncated">${this.model?.identifier}</h4>
-    </div>`;
-  }
-
-  private get getArchivistTemplate() {
-    return html`<div class="archivist-since">
-      <span>${this.displayValueProvider.accountLabel}</span>
-    </div>`;
-  }
-
-  private get getTileStatsTemplate() {
-    return html`<tile-stats
-      .mediatype=${this.model?.mediatype}
-      .itemCount=${this.model?.itemCount}
-      .favCount=${this.model?.favCount}
-      .commentCount=${this.model?.commentCount}
-    >
-    </tile-stats>`;
-  }
-
-  private get infoButtonTemplate(): TemplateResult | typeof nothing {
-    // &#9432; is an information icon
-    return this.showInfoButton
-      ? html`<button class="info-button" @click=${this.infoButtonPressed}>
-          &#9432;
-          <span class="sr-only">${msg('More info')}</span>
-        </button>`
-      : nothing;
-  }
-
-  private infoButtonPressed(e: PointerEvent) {
-    e.preventDefault();
-    const event = new CustomEvent<{ x: number; y: number }>(
-      'infoButtonPressed',
-      { detail: { x: e.clientX, y: e.clientY } },
-    );
-    this.dispatchEvent(event);
-  }
-
-  /**
-   * CSS
-   */
-  static get styles() {
-    const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;
-
-    return [
-      baseTileStyles,
-      css`
-        .container {
-          border: 1px solid ${tileBorderColor};
-        }
-      `,
-    ];
-  }
-}