@fluid-topics/ft-filter 0.0.88

package/build/ft-filter.js

@@ -0,0 +1,398 @@
+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 { css, html } from "lit";
+import { property, query, queryAll, state } from "lit/decorators.js";
+import { customElement, Debouncer, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtTypography, FtTypographyCaption } from "@fluid-topics/ft-typography";
+import { flatDeep } from "./utils";
+import { FtFilterLevel } from "./ft-filter-level";
+import { FtButton } from "@fluid-topics/ft-button";
+import { FtSnapScroll } from "@fluid-topics/ft-snap-scroll";
+export * from "./ft-filter-option";
+export class FtFilterChangeEvent extends CustomEvent {
+    constructor(selectedValues) {
+        super("change", { detail: selectedValues });
+    }
+}
+let FtFilter = class FtFilter extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.id = "";
+        this.label = "";
+        this.filterPlaceHolder = "Filter {0}";
+        this.clearButtonLabel = "Clear";
+        this.moreValuesButtonLabel = "More";
+        this.options = [];
+        this.multivalued = false;
+        this.disabled = false;
+        this.raiseSelectedOptions = false;
+        this.displayedValuesLimit = 0;
+        this.withScroll = false;
+        this.filter = "";
+        this.displayedLevels = [];
+        this.scrollResizeObserver = new ResizeObserver(() => this.updateScroll());
+        this.levelsScrollDebouncer = new Debouncer(300);
+    }
+    // language=CSS
+    getStyles() {
+        return [
+            FtTypographyCaption,
+            css `
+                :host {
+                    display: flex;
+                    max-height: 100%;
+                    max-width: 100%;
+                }
+
+                .ft-filter--container {
+                    flex-grow: 1;
+                    display: flex;
+                    flex-direction: column;
+                    max-height: 100%;
+                    max-width: 100%;
+                    background: var(--ft-color-surface, #FFFFFF);
+                }
+
+                .ft-filter--header {
+                    display: flex;
+                    flex-wrap: wrap;
+                    gap: 4px;
+                    flex-shrink: 0;
+                    padding: 0 10px;
+                    margin-bottom: 8px;
+                    --ft-typography-font-size: 14px;
+                }
+
+                .ft-filter--header ft-button {
+                    flex-shrink: 0;
+                    margin-left: auto;
+                    --ft-button-icon-size: 18px;
+                }
+
+                .ft-filter--label {
+                    display: block;
+                    flex-shrink: 1;
+                    flex-grow: 1;
+                    word-break: break-word;
+                    --ft-typography-line-height: 22px;
+                    --ft-typography-font-weight: bold;
+                }
+
+                .ft-filter--filter {
+                    flex-shrink: 0;
+                    display: flex;
+                    margin: 0;
+                    margin-bottom: 8px;
+                    padding: 0 10px;
+                    overflow: hidden;
+                    height: 32px;
+                    transition: height 250ms ease-in-out, margin 250ms ease-in-out;
+                    transition-delay: 500ms;
+                }
+
+                .ft-filter--filter[hidden] {
+                    height: 0;
+                    margin-bottom: 0;
+                }
+
+                input {
+                    display: block;
+                    width: 100%;
+                    border-radius: 4px;
+                    border: 1px solid var(--ft-color-outline, rgba(0, 0, 0, 0.14));
+                    padding: 4px;
+                    outline-color: var(--ft-color-primary, #2196F3);
+                }
+
+                .ft-filter--values {
+                    flex-grow: 1;
+                    flex-shrink: 1;
+                    max-width: 100%;
+                    overflow-x: hidden;
+                    overflow-y: auto;
+                }
+
+                .ft-filter--separator {
+                    border-top: 1px solid var(--ft-color-outline, rgba(0, 0, 0, 0.14));
+                    margin: 4px 10px;
+                }
+
+                .ft-filter--levels-container {
+                    position: relative;
+                    overflow: hidden;
+                }
+
+                .ft-filter--levels {
+                    position: relative;
+                    overflow: hidden;
+                }
+
+                ft-filter-level {
+                    width: 100%;
+                }
+
+                .ft-filter--level-left {
+                    height: 0;
+                }
+
+                slot {
+                    display: none;
+                }
+            `
+        ];
+    }
+    get flatOptions() {
+        return flatDeep(this.options, o => { var _a; return (_a = o.subOptions) !== null && _a !== void 0 ? _a : []; });
+    }
+    getTemplate() {
+        var _a, _b;
+        const valuesSelected = this.flatOptions.some(o => o.selected);
+        let showFilter = this.withScroll || this.filter || ((_b = (_a = this.lastLevel) === null || _a === void 0 ? void 0 : _a.hasHiddenValues) !== null && _b !== void 0 ? _b : false);
+        return html `
+            <div class="ft-filter--container ${this.disabled ? "ft-filter--disabled" : ""}"
+                 part="container">
+                ${!this.label && !valuesSelected ? null : html `
+                    <div class="ft-filter--header" part="header">
+                        <ft-typography class="ft-filter--label" variant="overline" part="label">${this.label}
+                        </ft-typography>
+                        ${valuesSelected ? html `
+                            <ft-button icon="close" dense @click=${this.clear} part="clear-button">
+                                ${this.clearButtonLabel}
+                            </ft-button>
+                        ` : null}
+                    </div>
+                `}
+                <div class="ft-filter--filter" ?hidden=${!showFilter}>
+                    <input type="search"
+                           part="input"
+                           class="ft-typography--caption"
+                           ?disabled=${!showFilter}
+                           placeholder="${this.filterPlaceHolder.replace("{0}", this.label)}"
+                           @keyup=${this.onFilterChange}>
+                </div>
+                <div class="ft-filter--values">
+                    ${this.renderLevels()}
+                </div>
+                <slot @slotchange=${this.updateOptionsFromSlot}></slot>
+            </div>
+        `;
+    }
+    update(props) {
+        super.update(props);
+        if (props.has("options")) {
+            const newValues = new Set(this.flatOptions.map(o => o.value));
+            this.displayedLevels = this.displayedLevels.filter(value => newValues.has(value));
+        }
+    }
+    contentAvailableCallback(props) {
+        var _a, _b;
+        super.contentAvailableCallback(props);
+        if (this.valuesContainer) {
+            this.scrollResizeObserver.observe(this.valuesContainer);
+        }
+        if (this.container) {
+            this.scrollResizeObserver.observe(this.container);
+        }
+        if (props.has("options")) {
+            this.updateScroll();
+            (_a = this.levelsContainer) === null || _a === void 0 ? void 0 : _a.scrollToIndex(this.displayedLevels.length);
+        }
+        if (props.has("slideIn") && this.slideIn) {
+            setTimeout(() => {
+                var _a;
+                (_a = this.levelsContainer) === null || _a === void 0 ? void 0 : _a.next();
+                this.slideIn = undefined;
+            }, 0);
+        }
+        if (props.has("slideOut") && this.slideOut) {
+            (_b = this.levelsContainer) === null || _b === void 0 ? void 0 : _b.previous();
+            setTimeout(() => {
+                this.displayedLevels.pop();
+                this.slideOut = undefined;
+            }, 300);
+        }
+    }
+    renderLevels() {
+        const allOptions = this.flatOptions;
+        const selectedOptions = allOptions.filter(o => o.selected);
+        const currentLevelIndex = (this.slideIn || this.slideOut) ? this.displayedLevels.length - 2 : this.displayedLevels.length - 1;
+        const rootOptionsClass = currentLevelIndex < 0 ? "ft-filter--level-center" : "ft-filter--level-left";
+        return html `
+            ${this.raiseSelectedOptions && selectedOptions.length > 0 ? html `
+                <ft-filter-level
+                        id="${this.id}"
+                        ?multivalued=${this.multivalued}
+                        ?disabled=${this.disabled}
+                        preventNavigation
+                        .options=${selectedOptions}
+                        @change=${this.onChange}
+                        part="selected-values"
+                ></ft-filter-level>
+                <div class="ft-filter--separator">
+            ` : null}
+            <ft-snap-scroll horizontal hideScrollbar
+                            class="ft-filter--levels"
+                            @current-element-change=${(e) => this.levelsScrollDebouncer.run(() => {
+            while (e.detail.index < this.displayedLevels.length) {
+                this.displayedLevels.pop();
+            }
+            this.requestUpdate();
+        })}>
+                ${this.renderLevel(rootOptionsClass, this.options)}
+                ${this.displayedLevels
+            .map(optionValue => allOptions.find(o => o.value === optionValue))
+            .map((option, index) => {
+            var _a;
+            const className = (option === null || option === void 0 ? void 0 : option.value) === this.slideIn || (option === null || option === void 0 ? void 0 : option.value) === this.slideOut
+                ? "ft-filter--level-right"
+                : index === currentLevelIndex
+                    ? "ft-filter--level-center"
+                    : "ft-filter--level-left";
+            return this.renderLevel(className, (_a = option === null || option === void 0 ? void 0 : option.subOptions) !== null && _a !== void 0 ? _a : [], option);
+        })}
+            </ft-snap-scroll>
+        `;
+    }
+    renderLevel(className, options, parent) {
+        return html `
+            <ft-filter-level
+                    class="${className}"
+                    id="${this.id}"
+                    filter="${this.filter}"
+                    moreValuesButtonLabel="${this.moreValuesButtonLabel}"
+                    ?multivalued=${this.multivalued}
+                    ?disabled=${this.disabled || className !== "ft-filter--level-center"}
+                    ?hideSelectedOptions=${this.raiseSelectedOptions}
+                    .parent=${parent}
+                    .options=${options}
+                    .displayedValuesLimit=${this.displayedValuesLimit}
+                    @change=${this.onChange}
+                    @go-back=${this.goBack}
+                    @display-level=${this.onDisplayLevel}
+                    part="values"
+            ></ft-filter-level>
+        `;
+    }
+    goBack(e) {
+        this.slideOut = e.detail.value;
+    }
+    onDisplayLevel(e) {
+        this.displayedLevels.push(e.detail.value);
+        this.slideIn = e.detail.value;
+    }
+    clear() {
+        this.flatOptions.forEach(o => o.selected = false);
+        if (this.displayedLevels.length > 0) {
+            let currentLevel = this.displayedLevels[this.displayedLevels.length - 1];
+            this.displayedLevels = [currentLevel];
+            this.slideOut = currentLevel;
+        }
+        this.optionsChanged();
+    }
+    onChange(e) {
+        e.stopPropagation();
+        if (!this.multivalued) {
+            const clearOption = (o) => {
+                var _a;
+                if (o.value !== e.detail.value) {
+                    o.selected = false;
+                }
+                (_a = o.subOptions) === null || _a === void 0 ? void 0 : _a.forEach(clearOption);
+            };
+            this.options.forEach(clearOption);
+        }
+        this.optionsChanged();
+    }
+    optionsChanged() {
+        var _a;
+        const selectedValues = this.flatOptions.filter(o => o.selected).map(o => o.value);
+        this.dispatchEvent(new FtFilterChangeEvent(selectedValues));
+        this.requestUpdate();
+        (_a = this.levels) === null || _a === void 0 ? void 0 : _a.forEach(l => l.requestUpdate());
+    }
+    updateOptionsFromSlot(e) {
+        const slot = e.composedPath()[0];
+        this.options = slot.assignedElements().map(n => n);
+    }
+    onFilterChange(e) {
+        const input = e.composedPath()[0];
+        this.filter = input.value;
+    }
+    updateScroll() {
+        if (this.valuesContainer) {
+            this.withScroll = this.valuesContainer.scrollHeight > this.valuesContainer.clientHeight;
+        }
+    }
+};
+FtFilter.elementDefinitions = {
+    "ft-button": FtButton,
+    "ft-filter-level": FtFilterLevel,
+    "ft-snap-scroll": FtSnapScroll,
+    "ft-typography": FtTypography,
+};
+__decorate([
+    property({ type: String })
+], FtFilter.prototype, "id", void 0);
+__decorate([
+    property({ type: String })
+], FtFilter.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], FtFilter.prototype, "filterPlaceHolder", void 0);
+__decorate([
+    property({ type: String })
+], FtFilter.prototype, "clearButtonLabel", void 0);
+__decorate([
+    property({ type: String })
+], FtFilter.prototype, "moreValuesButtonLabel", void 0);
+__decorate([
+    property({ type: Array })
+], FtFilter.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtFilter.prototype, "multivalued", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtFilter.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtFilter.prototype, "raiseSelectedOptions", void 0);
+__decorate([
+    property({ type: Number })
+], FtFilter.prototype, "displayedValuesLimit", void 0);
+__decorate([
+    query(".ft-filter--container")
+], FtFilter.prototype, "container", void 0);
+__decorate([
+    query(".ft-filter--values")
+], FtFilter.prototype, "valuesContainer", void 0);
+__decorate([
+    query(".ft-filter--levels")
+], FtFilter.prototype, "levelsContainer", void 0);
+__decorate([
+    query(".ft-filter--levels ft-filter-level:last-child")
+], FtFilter.prototype, "lastLevel", void 0);
+__decorate([
+    queryAll(".ft-filter--levels ft-filter-level")
+], FtFilter.prototype, "levels", void 0);
+__decorate([
+    state()
+], FtFilter.prototype, "withScroll", void 0);
+__decorate([
+    state()
+], FtFilter.prototype, "filter", void 0);
+__decorate([
+    state()
+], FtFilter.prototype, "slideIn", void 0);
+__decorate([
+    state()
+], FtFilter.prototype, "slideOut", void 0);
+FtFilter = __decorate([
+    customElement("ft-filter")
+], FtFilter);
+export { FtFilter };
+//# sourceMappingURL=ft-filter.js.map