@fluid-topics/ft-search-input 0.3.62

package/README.md

@@ -0,0 +1,21 @@
+Search bar input for integrated search component
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-search-input
+yarn add @fluid-topics/ft-search-input
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-search-input"
+
+function render() {
+    return html`<ft-search-context>
+                    <ft-search-input></ft-search-input>
+                </ft-search-context>`
+}
+```

package/build/SearchInputMessages.d.ts

@@ -0,0 +1,7 @@
+import { I18nMessageContext, I18nMessages } from "@fluid-topics/ft-i18n";
+export interface SearchInputMessages extends I18nMessages {
+    placeholder(): string;
+    searchButton(): string;
+}
+export declare const searchInputContext: I18nMessageContext<SearchInputMessages>;
+//# sourceMappingURL=SearchInputMessages.d.ts.map

package/build/SearchInputMessages.js

@@ -0,0 +1,3 @@
+import { I18nMessageContext } from "@fluid-topics/ft-i18n";
+export const searchInputContext = I18nMessageContext.build("designedSearchInput");
+//# sourceMappingURL=SearchInputMessages.js.map

package/build/ft-search-input-suggestion.css.d.ts

@@ -0,0 +1,2 @@
+export declare const suggestionStyles: import("lit").CSSResult;
+//# sourceMappingURL=ft-search-input-suggestion.css.d.ts.map

package/build/ft-search-input-suggestion.css.js

@@ -0,0 +1,47 @@
+import { css } from "lit";
+import { FtSearchInputCssVariables } from "./ft-search-input.css";
+// language=CSS
+export const suggestionStyles = css `
+    * {
+        box-sizing: border-box;
+    }
+    
+    .ft-search-input-suggestion {
+        position: absolute;
+        z-index: ${FtSearchInputCssVariables.floatingZIndex};
+        top: calc(100% + 2px);
+        left: -1px;
+        right: -1px;
+        background: ${FtSearchInputCssVariables.colorSurface};
+        border: 1px solid ${FtSearchInputCssVariables.colorOutline};
+        border-radius: 0 0 ${FtSearchInputCssVariables.borderRadius} ${FtSearchInputCssVariables.borderRadius};
+        box-shadow: ${FtSearchInputCssVariables.elevation02};
+    }
+
+    .ft-search-input-suggestion--suggestion {
+        text-decoration: none;
+        position: relative;
+        display: flex;
+        align-items: center;
+        padding: 8px;
+        gap: 8px;
+        cursor: pointer;
+        color: ${FtSearchInputCssVariables.colorOnSurface};
+        min-height: 44px;
+    }
+
+    .ft-search-input-suggestion--suggestion > *:not(ft-ripple) {
+        position: relative;
+    }
+
+    .ft-search-input-suggestion--suggestion:focus {
+        outline: none;
+    }
+
+    .ft-search-input-suggestion--suggestion ft-typography {
+        display: block;
+        flex-grow: 1;
+        flex-shrink: 1;
+    }
+`;
+//# sourceMappingURL=ft-search-input-suggestion.css.js.map

package/build/ft-search-input-suggestion.d.ts

@@ -0,0 +1,21 @@
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { FtSearchInputSuggestionProperties } from "./ft-search-input-suggestion.properties";
+import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
+export declare class SuggestionSelectedEvent extends CustomEvent<string> {
+    constructor(value: string);
+}
+export declare class FtSearchInputSuggestion extends FtSearchComponent implements FtSearchInputSuggestionProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult[];
+    private suggestResults;
+    render(): import("lit-html").TemplateResult<1>;
+    private onSuggestKeyDown;
+    private onSuggestKeyUp;
+    private onSuggestSelected;
+    private getIcon;
+    private getFocusedSuggestionElement;
+    private getLastSuggestionElement;
+    private getFirstSuggestionElement;
+    focusFirstSuggestion(): void;
+}
+//# sourceMappingURL=ft-search-input-suggestion.d.ts.map

package/build/ft-search-input-suggestion.js

@@ -0,0 +1,120 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { redux, wordWrap } from "@fluid-topics/ft-wc-utils";
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { suggestionStyles } from "./ft-search-input-suggestion.css";
+import { repeat } from "lit/directives/repeat.js";
+import { FtIcon, FtIcons, FtIconVariants, resolveFileFormatIcon } from "@fluid-topics/ft-icon";
+import { FtRipple } from "@fluid-topics/ft-ripple";
+import { FtTypography } from "@fluid-topics/ft-typography";
+import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
+export class SuggestionSelectedEvent extends CustomEvent {
+    constructor(value) {
+        super("suggestion-selected", { detail: value });
+    }
+}
+let FtSearchInputSuggestion = class FtSearchInputSuggestion extends FtSearchComponent {
+    constructor() {
+        super(...arguments);
+        this.suggestResults = [];
+    }
+    render() {
+        return html `
+            <div class="ft-search-input-suggestion ft-word-wrap"
+                 part="container"
+                 @keydown=${(e) => this.onSuggestKeyDown(e)}>
+                ${repeat(this.suggestResults, suggest => suggest.value, suggest => html `
+                            <a href="#"
+                               part="suggestion"
+                               class="ft-search-input-suggestion--suggestion"
+                               @keyup=${(e) => this.onSuggestKeyUp(e, suggest.value)}
+                               @click=${(e) => this.onSuggestSelected(e, suggest.value)}>
+                                <ft-ripple></ft-ripple>
+                                ${this.getIcon(suggest)}
+                                <ft-typography variant="body1">${suggest.value}</ft-typography>
+                            </a>
+                        `)}
+            </div>
+        `;
+    }
+    onSuggestKeyDown(e) {
+        var _a, _b, _c, _d, _e, _f;
+        switch (e.key) {
+            case "ArrowUp":
+                (_c = ((_b = (_a = this.getFocusedSuggestionElement()) === null || _a === void 0 ? void 0 : _a.previousElementSibling) !== null && _b !== void 0 ? _b : this.getLastSuggestionElement())) === null || _c === void 0 ? void 0 : _c.focus();
+                e.preventDefault();
+                e.stopPropagation();
+                break;
+            case "ArrowDown":
+                (_f = ((_e = (_d = this.getFocusedSuggestionElement()) === null || _d === void 0 ? void 0 : _d.nextElementSibling) !== null && _e !== void 0 ? _e : this.getFirstSuggestionElement())) === null || _f === void 0 ? void 0 : _f.focus();
+                e.preventDefault();
+                e.stopPropagation();
+                break;
+        }
+    }
+    onSuggestKeyUp(e, suggest) {
+        if (e.key === "Enter" || e.key === " ") {
+            this.onSuggestSelected(e, suggest);
+        }
+    }
+    onSuggestSelected(e, suggest) {
+        e.preventDefault();
+        this.dispatchEvent(new SuggestionSelectedEvent(suggest));
+    }
+    getIcon(suggest) {
+        const iconVariant = suggest.type === "DOCUMENT" ? FtIconVariants.file_format : FtIconVariants.fluid_topics;
+        let icon;
+        switch (suggest.type) {
+            case "MAP":
+                icon = suggest.editorialType === "BOOK" ? FtIcons.BOOK : FtIcons.ARTICLE;
+                break;
+            case "DOCUMENT":
+                icon = resolveFileFormatIcon(suggest.mimeType, suggest.filenameExtension);
+                break;
+            case "TOPIC":
+                icon = FtIcons.TOPICS;
+                break;
+        }
+        return html `
+            <ft-icon variant="${iconVariant}" part="suggestion-icon">
+                ${icon}
+            </ft-icon>
+        `;
+    }
+    getFocusedSuggestionElement() {
+        return this.shadowRoot.querySelector(".ft-search-input-suggestion--suggestion:focus-within");
+    }
+    getLastSuggestionElement() {
+        let suggestions = this.shadowRoot.querySelectorAll(".ft-search-input-suggestion--suggestion");
+        return suggestions.length > 0 ? suggestions[suggestions.length - 1] : null;
+    }
+    getFirstSuggestionElement() {
+        return this.shadowRoot.querySelector(".ft-search-input-suggestion--suggestion");
+    }
+    focusFirstSuggestion() {
+        var _a;
+        (_a = this.getFirstSuggestionElement()) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+};
+FtSearchInputSuggestion.elementDefinitions = {
+    "ft-ripple": FtRipple,
+    "ft-typography": FtTypography,
+    "ft-icon": FtIcon,
+};
+FtSearchInputSuggestion.styles = [
+    wordWrap,
+    suggestionStyles,
+];
+__decorate([
+    redux()
+], FtSearchInputSuggestion.prototype, "suggestResults", void 0);
+FtSearchInputSuggestion = __decorate([
+    customElement("ft-search-input-suggestion")
+], FtSearchInputSuggestion);
+export { FtSearchInputSuggestion };
+//# sourceMappingURL=ft-search-input-suggestion.js.map

package/build/ft-search-input-suggestion.properties.d.ts

@@ -0,0 +1,3 @@
+export interface FtSearchInputSuggestionProperties {
+}
+//# sourceMappingURL=ft-search-input-suggestion.properties.d.ts.map

package/build/ft-search-input-suggestion.properties.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ft-search-input-suggestion.properties.js.map

package/build/ft-search-input.css.d.ts

@@ -0,0 +1,16 @@
+export declare const FtSearchInputCssVariables: {
+    height: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    desktopFiltersHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    floatingZIndex: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorOnSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorOnSurfaceMedium: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorOutline: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorPrimary: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    elevation02: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    buttonColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    buttonRippleColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=ft-search-input.css.d.ts.map

package/build/ft-search-input.css.js

@@ -0,0 +1,96 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtButtonCssVariables } from "@fluid-topics/ft-button";
+import { FtTooltipCssVariables } from "@fluid-topics/ft-tooltip";
+export const FtSearchInputCssVariables = {
+    height: FtCssVariableFactory.create("--ft-search-input-height", "SIZE", "38px"),
+    borderRadius: FtCssVariableFactory.extend("--ft-search-input-border-radius", designSystemVariables.borderRadiusS),
+    desktopFiltersHeight: FtCssVariableFactory.create("--ft-search-input-desktop-filters-height", "SIZE", "350px"),
+    floatingZIndex: FtCssVariableFactory.create("--ft-search-input-floating-components-z-index", "NUMBER", "3"),
+    colorSurface: FtCssVariableFactory.external(designSystemVariables.colorSurface, "Design system"),
+    colorOnSurface: FtCssVariableFactory.external(designSystemVariables.colorOnSurface, "Design system"),
+    colorOnSurfaceMedium: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceMedium, "Design system"),
+    colorOutline: FtCssVariableFactory.external(designSystemVariables.colorOutline, "Design system"),
+    colorPrimary: FtCssVariableFactory.external(designSystemVariables.colorPrimary, "Design system"),
+    elevation02: FtCssVariableFactory.external(designSystemVariables.elevation02, "Design system"),
+    buttonColor: FtCssVariableFactory.external(FtButtonCssVariables.color, "Button"),
+    buttonRippleColor: FtCssVariableFactory.external(FtButtonCssVariables.rippleColor, "Button"),
+};
+// language=CSS
+export const styles = css `
+    * {
+        box-sizing: border-box;
+    }
+
+    .ft-search-input {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        height: ${FtSearchInputCssVariables.height};
+
+        background: ${FtSearchInputCssVariables.colorSurface};
+        border: 1px solid ${FtSearchInputCssVariables.colorOutline};
+        border-radius: ${FtSearchInputCssVariables.borderRadius};
+    }
+
+    .ft-search-input--input-container {
+        flex-grow: 1;
+        flex-shrink: 1;
+        position: relative;
+        height: calc(100% - 2px);
+    }
+
+    .ft-search-input--input-outline {
+        height: 100%;
+        width: 100%;
+        display: grid;
+        padding: 0 8px;
+        border-radius: ${FtSearchInputCssVariables.borderRadius};
+    }
+
+    .ft-search-input--input-container:focus-within .ft-search-input--input-outline {
+        outline: 2px solid ${FtSearchInputCssVariables.colorPrimary};
+    }
+
+    .ft-search-input--input {
+        height: 100%;
+        border: none;
+        background-color: transparent;
+        color: ${FtSearchInputCssVariables.colorOnSurface};
+        outline: none;
+    }
+
+    .ft-search-input--input::placeholder {
+        color: ${FtSearchInputCssVariables.colorOnSurfaceMedium};
+    }
+
+    .ft-search-input--actions {
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        height: 100%;
+
+        ${setVariable(FtTooltipCssVariables.zIndex, `calc(${FtSearchInputCssVariables.floatingZIndex} + 1)`)};
+    }
+
+    .ft-search-input > ft-button,
+    .ft-search-input--actions ft-button {
+        flex-shrink: 0;
+        ${setVariable(FtButtonCssVariables.backgroundColor, "transparent")};
+    }
+
+    .ft-search-input .ft-search-input--launch-search {
+        margin: 0 4px;
+    }
+
+    ft-search-input-suggestion {
+        display: none;
+    }
+
+    .ft-search-input.ft-search-input--with-suggestions:focus-within:not(.ft-search-input--with-suggestions-closed) ft-search-input-suggestion {
+        display: block;
+    }
+`;
+//# sourceMappingURL=ft-search-input.css.js.map

package/build/ft-search-input.d.ts

@@ -0,0 +1,22 @@
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { FtSearchInputProperties } from "./ft-search-input.properties";
+import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
+declare const FtSearchInput_base: typeof FtSearchComponent & (new (...args: any[]) => import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface);
+export declare class FtSearchInput extends FtSearchInput_base implements FtSearchInputProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult[];
+    constructor();
+    private request?;
+    private liveQuery;
+    private suggestResults;
+    private forceCloseSuggestion;
+    private input;
+    private suggestion;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private onSearchBarKeyDown;
+    private onSearchBarKeyUp;
+    private launchSearch;
+    private onSuggestionSelected;
+}
+export {};
+//# sourceMappingURL=ft-search-input.d.ts.map

package/build/ft-search-input.js

@@ -0,0 +1,117 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from "lit";
+import { redux } from "@fluid-topics/ft-wc-utils";
+import { styles } from "./ft-search-input.css";
+import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
+import { withI18n } from "@fluid-topics/ft-i18n";
+import { searchInputContext } from "./SearchInputMessages";
+import { query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { FtSearchInputSuggestion } from "./ft-search-input-suggestion";
+import { FtButton } from "@fluid-topics/ft-button";
+import { FtTypographyBody2 } from "@fluid-topics/ft-typography";
+export class FtSearchInput extends withI18n(FtSearchComponent) {
+    constructor() {
+        super();
+        this.liveQuery = "";
+        this.suggestResults = [];
+        this.forceCloseSuggestion = false;
+        this.addI18nContext(searchInputContext);
+    }
+    render() {
+        let classes = {
+            "ft-search-input": true,
+            "ft-search-input--with-suggestions": this.suggestResults.length > 0,
+            "ft-search-input--with-suggestions-closed": this.forceCloseSuggestion,
+        };
+        return html `
+            <div class="${classMap(classes)}" @focusout=${() => this.forceCloseSuggestion = false}>
+                <div class="ft-search-input--input-container" part="input-container" tabindex="-1">
+                    <div class="ft-search-input--input-outline" part="input-outline">
+                        <input class="ft-search-input--input ft-typography--body2"
+                               part="input"
+                               type="text"
+                               placeholder="${searchInputContext.messages.placeholder()}"
+                               .value="${this.liveQuery}"
+                               @keydown=${(e) => this.onSearchBarKeyDown(e)}
+                               @keyup=${(e) => this.onSearchBarKeyUp(e)}>
+                    </div>
+                    <ft-search-input-suggestion exportpartsPrefix="suggestion"
+                                                @suggestion-selected=${this.onSuggestionSelected}
+                    ></ft-search-input-suggestion>
+                </div>
+                <div class="ft-search-input--actions" part="actions">
+                    <ft-button class="ft-search-input--launch-search"
+                               part="launch-search-in-input"
+                               icon="search"
+                               round dense
+                               label="${searchInputContext.messages.searchButton()}"
+                               @click=${() => this.launchSearch()}
+                    ></ft-button>
+                </div>
+            </div>
+        `;
+    }
+    onSearchBarKeyDown(e) {
+        switch (e.key) {
+            case "ArrowDown":
+                e.stopPropagation();
+                e.preventDefault();
+                this.suggestion.focusFirstSuggestion();
+                break;
+        }
+    }
+    onSearchBarKeyUp(e) {
+        var _a, _b;
+        if (e.key === "Enter") {
+            (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setQuery(this.input.value);
+            this.forceCloseSuggestion = true;
+        }
+        else {
+            (_b = this.stateManager) === null || _b === void 0 ? void 0 : _b.setLiveQuery(this.input.value);
+        }
+    }
+    launchSearch() {
+        var _a;
+        (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setQuery(this.liveQuery);
+        this.forceCloseSuggestion = true;
+    }
+    onSuggestionSelected(e) {
+        var _a, _b;
+        (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setQuery(e.detail);
+        (_b = this.stateManager) === null || _b === void 0 ? void 0 : _b.setLiveQuery(e.detail);
+        this.forceCloseSuggestion = true;
+    }
+}
+FtSearchInput.elementDefinitions = {
+    "ft-search-input-suggestion": FtSearchInputSuggestion,
+    "ft-button": FtButton,
+};
+FtSearchInput.styles = [
+    FtTypographyBody2,
+    styles,
+];
+__decorate([
+    redux()
+], FtSearchInput.prototype, "request", void 0);
+__decorate([
+    redux()
+], FtSearchInput.prototype, "liveQuery", void 0);
+__decorate([
+    redux()
+], FtSearchInput.prototype, "suggestResults", void 0);
+__decorate([
+    state()
+], FtSearchInput.prototype, "forceCloseSuggestion", void 0);
+__decorate([
+    query(".ft-search-input--input")
+], FtSearchInput.prototype, "input", void 0);
+__decorate([
+    query("ft-search-input-suggestion")
+], FtSearchInput.prototype, "suggestion", void 0);
+//# sourceMappingURL=ft-search-input.js.map