@bridgeline-digital/hawksearch-handlebars-ui 1.0.0-beta.0

package/src/models/raw-search.models.ts

@@ -0,0 +1,130 @@
+export interface RawFacetValue {
+    Count: number;
+    Label: string;
+    Level?: number;
+    Value: string;
+    RangeEnd?: string;
+    RangeMax?: string;
+    RangeMin?: string;
+    RangeStart?: string;
+    Selected?: boolean;
+    Children?: Array<RawFacetValue>;
+}
+
+export interface RawFacetSwatchValue {
+    Value: string;
+    Color?: string;
+    AssetName?: string;
+    AssetUrl?: string;
+    IsDefault: boolean;
+}
+
+export interface RawFacet {
+    AlwaysVisible: boolean;
+    CurrencySymbol: string;
+    DisplayType: string;
+    ExpandSelection: boolean;
+    FacetId: number;
+    FacetType: string;
+    Field: string;
+    FieldType: string;
+    IsCollapsedDefault?: boolean;
+    IsCollapsible?: boolean;
+    IsSearch: boolean;
+    Name: string;
+    ParamName?: string;
+    Values?: Array<RawFacetValue>;
+    Tooltip?: string;
+    TruncateThreshold?: number;
+    SwatchData?: Array<RawFacetSwatchValue>;
+}
+
+export interface RawSearchSelectionItem {
+    Label: string;
+    Value: string;
+}
+
+export interface RawSearchSelection {
+    Label: string;
+    Items: Array<RawSearchSelectionItem>;
+}
+
+export interface RawSearchSelections {
+    [field: string]: RawSearchSelection;
+}
+
+export interface RawSearchPagination {
+    CurrentPage: number;
+    IsShowFirstLink: boolean;
+    IsShowLastLink: boolean;
+    MaxPerPage: number;
+    NofPages: number;
+    NofResults: number;
+    NumberOfPageLinks: number;
+    Items: Array<{
+        Label: string;
+        PageSize: number;
+        Selected: boolean;
+        Default: boolean;
+    }>;
+}
+
+export interface RawSearchSorting {
+    Value?: string;
+    Items: Array<{
+        Label: string;
+        Value: string;
+        IsDefault: boolean;
+        Selected: boolean;
+    }>;
+}
+
+export interface RawSearchRedirect {
+    Location: string;
+    Target?: string;
+}
+
+export interface RawSearchResultsItemDocument {
+    [key: string]: Array<string>;
+}
+
+export interface RawSearchResultsItem {
+    DocId: string;
+    Document: RawSearchResultsItemDocument;
+    IsPin: boolean;
+    IsVisible: boolean;
+    Score: number;
+}
+
+export interface RawSearchResponse {
+    AdjustedKeyword?: string;
+    DidYouMean?: Array<string>;
+    Facets?: Array<RawFacet>;
+    Keyword?: string;
+    Pagination?: RawSearchPagination;
+    Redirect?: RawSearchRedirect;
+    Results?: Array<RawSearchResultsItem>;
+    Selections?: RawSearchSelections;
+    Sorting?: RawSearchSorting;
+    Success: boolean;
+    TrackingId: string;
+}
+
+export interface RawSearchRequest {
+    ClientData?: {
+        UserAgent?: string;
+        VisitorId?: string;
+        VisitId?: string;
+    };
+    ClientGuid: string;
+    IgnoreSpellcheck?: boolean;
+    IsInPreview?: boolean;
+    Keyword?: string;
+    FacetSelections?: {
+        [key: string]: Array<string> | undefined;
+    };
+    MaxPerPage?: number;
+    PageNo?: number;
+    SearchWithin?: string;
+    SortBy?: string;
+}

package/src/models/search.models.ts

@@ -0,0 +1,144 @@
+export type FacetValueState = {
+    toggled?: boolean;
+};
+
+export type FacetState = {
+    id: number;
+    collapsed?: boolean;
+    toggled?: boolean;
+    filter?: string;
+    values?: {
+        [value: string]: FacetValueState;
+    };
+};
+
+export type FacetType = 'checkbox' | 'color' | 'link' | 'range-slider' | 'search' | 'size' | 'tabs';
+
+export interface SelectedFacetValue {
+    title: string;
+    value: string;
+    excluded: boolean;
+}
+
+export interface SelectedFacet {
+    field: string;
+    title: string;
+    values: Array<SelectedFacetValue>;
+}
+
+export interface FacetValueColor {
+    name: string;
+    hex?: string;
+    imageUrl?: string;
+}
+
+export interface FacetValue {
+    title: string;
+    value?: string;
+    color?: FacetValueColor;
+    count?: number;
+    level?: number;
+    selected?: boolean;
+    excluded?: boolean;
+    children?: Array<FacetValue>;
+}
+
+export interface Facet {
+    id: number;
+    type: FacetType;
+    title: string;
+    values?: Array<FacetValue>;
+    field?: string;
+    collapsible: boolean;
+    collapsed?: boolean;
+    rangeMin?: number;
+    rangeMax?: number;
+    rangeStart?: number;
+    rangeEnd?: number;
+    searchable?: boolean;
+    searchWithin?: string;
+    tooltip?: string;
+    truncateThreshold?: number;
+}
+
+export interface PaginationOption {
+    title: string;
+    pageSize: number;
+    selected: boolean;
+    default: boolean;
+}
+
+export interface Pagination {
+    page: number;
+    pageSize: number;
+    totalPages: number;
+    totalResults: number;
+    maxPageLinks?: number;
+    displayFirstLink: boolean;
+    displayLastLink: boolean;
+    options: Array<PaginationOption>;
+}
+
+export interface Redirect {
+    url: string;
+    target?: string;
+}
+
+export interface SortingOption {
+    title: string;
+    value: string;
+    default: boolean;
+    selected: boolean;
+}
+
+export interface Sorting {
+    value?: string;
+    options: Array<SortingOption>;
+}
+
+export type SearchResultsItemType = 'content' | 'product';
+
+export interface SearchResultsItem {
+    id: string;
+    pinned: boolean;
+    visible: boolean;
+    score: number;
+    type: SearchResultsItemType;
+    imageUrl?: string;
+    title: string;
+    url: string;
+    price?: number;
+    salePrice?: number;
+    attributes?: {
+        [key: string]: Array<string>;
+    };
+}
+
+export interface SearchResponse {
+    facets?: Array<Facet>;
+    modifiedQuery?: string;
+    pagination?: Pagination;
+    query?: string;
+    querySuggestions?: Array<string>;
+    redirect?: Redirect;
+    results?: Array<SearchResultsItem>;
+    selectedFacets?: Array<SelectedFacet>;
+    sorting?: Sorting;
+    success: boolean;
+    trackingId: string;
+}
+
+export type SelectedFacets = {
+    [key: string]: Array<string> | undefined;
+};
+
+export interface SearchRequest {
+    disableSpellcheck?: boolean;
+    facets?: SelectedFacets;
+    newRequest: boolean;
+    pageSize?: number;
+    page?: number;
+    query?: string;
+    searchWithin?: string;
+    sort?: string;
+}

package/src/models/tracking.models.ts

@@ -0,0 +1,33 @@
+export enum AutocompleteItemType {
+    Search = 1,
+    Category = 2,
+    Product = 3,
+    Content = 4
+}
+
+export enum EventType {
+    PageLoad = 1,
+    Search = 2,
+    Click = 3,
+    AddToCart = 4,
+    Rate = 5,
+    Sale = 6,
+    BannerClick = 7,
+    BannerImpression = 8,
+    RecommendationClick = 10,
+    AutocompleteClick = 11,
+    AddToCartMultiple = 14
+}
+
+export enum PageType {
+    Item = 1,
+    Landing = 2,
+    Cart = 3,
+    Order = 4,
+    Custom = 5
+}
+
+export enum SearchType {
+    Initial = 1,
+    Refinement = 2
+}

package/src/scss/components/_autocomplete.scss

@@ -0,0 +1,55 @@
+.autocomplete {
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin-top: -1px;
+    box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
+    border: var(--container-border);
+    padding: var(--padding);
+    background: var(--container-background);
+    z-index: 1;
+
+    &__title {
+        display: block;
+        margin: 0 0 var(--padding) 0;
+        font-size: 1.1rem;
+        font-weight: bold;
+    }
+
+    &__list {
+        &:not(:last-child) {
+            margin-bottom: var(--margin);
+        }
+    }
+
+    &__product {
+        height: 100%;
+        text-align: center;
+
+        &__image {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 0 var(--padding) var(--padding) var(--padding);
+            height: 150px;
+
+            a {
+                display: block;
+            }
+
+            img {
+                margin: 0;
+                max-height: 100%;
+            }
+        }
+
+        &__title {
+            display: block;
+            font-weight: bold;
+        }
+    }
+
+    &__view-all {
+        text-align: center;
+    }
+}

package/src/scss/components/_facets.scss

@@ -0,0 +1,287 @@
+@use '../includes/breakpoints';
+
+.facets {
+    $root: &;
+
+    border: var(--container-border);
+    background: var(--container-background);
+
+    &__heading {
+        display: flex;
+        align-items: center;
+        padding: var(--padding-sm) var(--padding);
+        font-size: 1.2rem;
+        font-weight: bold;
+        background: var(--container-background--alternate);
+        cursor: pointer;
+
+        &__mobile-toggle {
+            margin-left: auto;
+        }
+
+        &:hover {
+            color: var(--color-accent);
+        }
+    }
+
+    &__content {
+        display: none;
+    }
+
+    &--expanded {
+        #{$root}__content {
+            display: block;
+        }
+    }
+
+    @include breakpoints.medium {
+        & {
+            &__heading {
+                cursor: default;
+
+                &__mobile-toggle {
+                    display: none;
+                }
+
+                &:hover {
+                    color: var(--default-font-color);
+                }
+            }
+
+            &__content {
+                display: block;
+            }
+        }
+    }
+}
+
+.facet {
+    &__heading {
+        display: flex;
+        align-items: center;
+        padding: var(--padding-sm) var(--padding);
+        font-size: 1.125rem;
+        cursor: default;
+
+        &__tooltip {
+            font-size: 1.2em;
+            margin-left: 5px;
+        }
+
+        &__toggle {
+            margin-left: auto;
+        }
+
+        &--collapsible {
+            cursor: pointer;
+
+            &:hover {
+                --icon-color: var(--color-accent);
+                color: var(--color-accent);
+            }
+        }
+    }
+
+    &__search {
+        margin: 0 0 var(--padding) 0;
+    }
+
+    &__content {
+        padding: 0 var(--padding) var(--padding) var(--padding);
+    }
+
+    &__toggle {
+    }
+
+    &__value {
+        &__title {
+        }
+
+        &__count {
+            color: var(--secondary-font-color);
+        }
+    }
+}
+
+.checkbox-list-facet {
+    $root: &;
+
+    &__list {
+        margin: 0 0 var(--padding-xs) 0;
+
+        &__item {
+            display: flex;
+            margin: 0 0 var(--padding-xs) 0;
+
+            &__content {
+                flex-grow: 1;
+            }
+
+            &__actions {
+                position: relative;
+                top: -4px;
+                flex-grow: 0;
+                margin-left: auto;
+                white-space: nowrap;
+
+                &__item {
+                    font-size: 1.3em;
+                    cursor: pointer;
+
+                    &:hover {
+                        color: var(--color-accent);
+                    }
+                }
+            }
+
+            &--excluded {
+                > #{$root}__item {
+                    &__content {
+                        > label {
+                            .facet__value__title {
+                                text-decoration: line-through;
+                            }
+                        }
+                    }
+                }
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            #{$root}__list {
+                margin-left: calc(16px + var(--padding-sm));
+            }
+        }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+}
+
+.color-facet {
+    $root: &;
+
+    &__items {
+        margin-bottom: var(--padding-xs);
+    }
+
+    &__item {
+        position: relative;
+        border: var(--container-border);
+        cursor: pointer;
+
+        &__box {
+            padding: 0 0 100% 0;
+        }
+
+        &__image {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+
+        &__actions {
+            display: none;
+        }
+
+        &--selected {
+            outline: solid 1px var(--color-accent);
+            border-color: var(--color-accent);
+        }
+
+        &:hover {
+            outline: solid 1px var(--color-accent);
+            border-color: var(--color-accent);
+
+            #{$root}__item {
+                &__actions {
+                    display: block;
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    border: var(--container-border);
+                    background: var(--container-background);
+                    font-size: 1rem;
+
+                    &:hover {
+                        color: var(--color-accent);
+                    }
+                }
+            }
+        }
+    }
+}
+
+.link-list-facet {
+    &__list {
+        &__item {
+            margin-bottom: var(--padding-xs);
+        }
+    }
+}
+
+.size-facet {
+    $root: &;
+
+    &__items {
+        margin-bottom: var(--padding-xs);
+    }
+
+    &__item {
+        position: relative;
+        border: var(--container-border);
+
+        &__outer {
+            position: relative;
+            padding: 0 0 100% 0;
+            cursor: pointer;
+        }
+
+        &__inner {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            padding: var(--padding-xs);
+            background: var(--container-background--alternate);
+            font-size: 0.6875rem;
+        }
+
+        &__actions {
+            display: none;
+        }
+
+        &--selected {
+            outline: solid 1px var(--color-accent);
+            border-color: var(--color-accent);
+        }
+
+        &:hover {
+            border-color: var(--color-accent);
+
+            #{$root}__item {
+                &__actions {
+                    display: block;
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    border: var(--container-border);
+                    background: var(--container-background);
+                    font-size: 1rem;
+                    cursor: pointer;
+
+                    &:hover {
+                        color: var(--color-accent);
+                    }
+                }
+            }
+        }
+    }
+}

package/src/scss/components/_icons.scss

@@ -0,0 +1,17 @@
+hawksearch-icon {
+    display: inline-block;
+    font-size: var(--icon-font-size, 1em);
+    color: var(--icon-color, currentColor);
+}
+
+.icon {
+    display: inline-block;
+    margin: 0 0.5em 0 0;
+    max-width: none;
+    fill: currentColor;
+    vertical-align: middle;
+
+    &:last-child {
+        margin: 0;
+    }
+}

package/src/scss/components/_modified-query.scss

@@ -0,0 +1,11 @@
+.modified-query {
+    margin: 0 0 var(--margin) 0;
+
+    &__modified {
+        font-style: italic;
+    }
+
+    &__original {
+        font-weight: bold;
+    }
+}

package/src/scss/components/_page-size.scss

@@ -0,0 +1,2 @@
+.page-size {
+}

package/src/scss/components/_pagination.scss

@@ -0,0 +1,23 @@
+.pagination {
+    display: flex;
+    align-items: center;
+    gap: var(--padding);
+
+    &__pages {
+        display: flex;
+        align-items: center;
+        gap: var(--padding-xs);
+
+        hawksearch-icon {
+            position: relative;
+            top: -2px;
+        }
+    }
+
+    &__page {
+        &--selected {
+            font-weight: bold;
+            color: var(--color-accent);
+        }
+    }
+}

package/src/scss/components/_query-suggestions.scss

@@ -0,0 +1,7 @@
+.query-suggestions {
+    margin: 0 0 var(--margin) 0;
+
+    a {
+        font-style: italic;
+    }
+}