@fluid-topics/ft-filter 0.0.88

package/README.md

@@ -0,0 +1,29 @@
+Flat selector for multivalued or monovalued filters
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-filter
+yarn add @fluid-topics/ft-filter
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-filter"
+
+function render() {
+    return html` 
+        <ft-filter
+                label="Filter"
+                @change=${ (e) => console.log("Selected options:", e.detail) }
+        >
+            <ft-filter-option value="1" label="Option 1"></ft-filter-option>
+            <ft-filter-option value="2" label="Option 2" selected></ft-filter-option>
+            <ft-filter-option value="3" label="Option 3"></ft-filter-option>
+            <ft-filter-option value="4" label="Option 4"></ft-filter-option>
+        </ft-filter>
+    `
+}
+```

package/build/ft-filter-level.d.ts

@@ -0,0 +1,32 @@
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtFilterOptionProperties } from "./ft-filter-option";
+export declare class FtFilterLevel extends FtLitElement {
+    static elementDefinitions: ElementDefinitionsMap;
+    protected getStyles(): import("lit").CSSResult[];
+    id: string;
+    parent?: FtFilterOptionProperties;
+    options: Array<FtFilterOptionProperties>;
+    multivalued: boolean;
+    disabled: boolean;
+    hideSelectedOptions: boolean;
+    preventNavigation: boolean;
+    private filter;
+    private moreValuesButtonLabel;
+    displayedValuesLimit: number;
+    private container?;
+    private displayedPages;
+    get hasHiddenValues(): boolean;
+    private get limit();
+    get height(): number;
+    protected getTemplate(): import("lit-html").TemplateResult<1>;
+    private goBackOnKeyPress;
+    private goBackOnClick;
+    private displayMore;
+    private buildMultiValuedOption;
+    private toggleMultiValuedOption;
+    private buildMonoValuedOption;
+    private toggleMonoValuedOption;
+    private optionsChanged;
+    private displayLevel;
+}
+//# sourceMappingURL=ft-filter-level.d.ts.map

package/build/ft-filter-level.js

@@ -0,0 +1,288 @@
+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, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { customElement, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { Checkbox } from "@material/mwc-checkbox";
+import { flatDeep } from "./utils";
+import { FtButton } from "@fluid-topics/ft-button";
+import { FtTypography } from "@fluid-topics/ft-typography";
+import { Formfield } from "@material/mwc-formfield";
+import { Radio } from "@material/mwc-radio";
+import { Icon } from "@material/mwc-icon";
+import { FtRipple } from "@fluid-topics/ft-ripple";
+let FtFilterLevel = class FtFilterLevel extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.id = "";
+        this.options = [];
+        this.multivalued = false;
+        this.disabled = false;
+        this.hideSelectedOptions = false;
+        this.preventNavigation = false;
+        this.filter = "";
+        this.moreValuesButtonLabel = "More";
+        this.displayedValuesLimit = 0;
+        this.displayedPages = 1;
+    }
+    // language=CSS
+    getStyles() {
+        return [
+            css `
+                .ft-filter-level--container {
+                    display: flex;
+                    flex-direction: column;
+                }
+
+                .ft-filter-level--container > * {
+                    padding: 0 10px;
+                }
+
+                .ft-filter-level--go-back {
+                    flex-shrink: 0;
+                    text-decoration: none;
+                    position: relative;
+                    border-radius: var(--ft-border-radius-M, 8px);
+                    overflow: hidden;
+                    display: flex;
+                    align-items: center;
+                    padding: 4px 4px;
+                    gap: 4px;
+                    cursor: pointer;
+                    color: var(--ft-color-on-surface, rgba(0, 0, 0, 0.87));
+                }
+
+                .ft-filter-level--go-back:focus {
+                    outline: none;
+                }
+
+                .ft-filter-level--go-back mwc-icon {
+                    flex-shrink: 0;
+                }
+
+                .ft-filter-level--go-back ft-typography {
+                    display: block;
+                    flex-grow: 1;
+                    flex-shrink: 0;
+                }
+
+                .ft-filter-level--option {
+                    display: flex;
+                    align-items: center;
+                    max-width: 100%;
+                }
+
+                .ft-filter-level--option ft-button {
+                    margin-right: -10px;
+                    flex-shrink: 0;
+                }
+
+                ft-button {
+                    --ft-color-primary: var(--ft-color-on-surface, rgba(0, 0, 0, 0.87));
+                }
+
+                mwc-formfield {
+                    flex-shrink: 1;
+                    flex-grow: 1;
+                    display: block;
+                    max-width: calc(100% + 10px);
+                    margin-left: -10px;
+                    word-break: break-word;
+
+                    --mdc-theme-secondary: var(--ft-color-primary, #2196F3);
+
+                    --mdc-radio-unchecked-color: var(--ft-color-on-surface-medium, rgba(0, 0, 0, 0.60));
+                    --mdc-checkbox-unchecked-color: var(--ft-color-on-surface-medium, rgba(0, 0, 0, 0.60));
+                    --mdc-checkbox-ink-color: var(--ft-color-on-primary, #FFFFFF);
+
+                    --mdc-radio-disabled-color: var(--ft-color-on-surface-disabled, rgba(0, 0, 0, 0.38));
+                    --mdc-checkbox-disabled-color: var(--ft-color-on-surface-disabled, rgba(0, 0, 0, 0.38));
+
+                    --mdc-theme-on-surface: var(--ft-color-primary, #2196F3);
+
+                    --mdc-typography-body2-font-family: var(--ft-typography-font-family, var(--ft-content-font, 'Open Sans')), system-ui, sans-serif;
+                    --mdc-typography-body2-font-size: var(--ft-typography-font-size, 14px);
+                    --mdc-typography-body2-font-weight: var(--ft-typography-font-weight, normal);
+                    --mdc-typography-body2-letter-spacing: var(--ft-typography-letter-spacing, 0.252px);
+                    --mdc-typography-body2-line-height: var(--ft-typography-line-height, 20px);
+                    --mdc-typography-body2-text-transform: var(--ft-typography-text-transform, inherit);
+                }
+
+                .ft-filter--disabled {
+                    --mdc-theme-text-primary-on-background: var(--ft-color-on-surface-disabled, rgba(0, 0, 0, 0.38));
+                }
+            `
+        ];
+    }
+    get hasHiddenValues() {
+        let limit = this.limit;
+        return limit != null && limit < this.options.length;
+    }
+    get limit() {
+        return this.displayedValuesLimit > 0 ? this.displayedPages * this.displayedValuesLimit : undefined;
+    }
+    get height() {
+        var _a, _b;
+        return (_b = (_a = this.container) === null || _a === void 0 ? void 0 : _a.scrollHeight) !== null && _b !== void 0 ? _b : 0;
+    }
+    getTemplate() {
+        let options = this.options;
+        if (this.hideSelectedOptions) {
+            options = options.filter(o => !o.selected);
+        }
+        if (this.filter) {
+            options = options.filter(o => o.label.toLowerCase().includes(this.filter.toLowerCase()));
+        }
+        const limitedOptions = options.slice(0, this.limit);
+        return html `
+            <div class="ft-filter-level--container ${this.disabled ? "ft-filter--disabled" : ""}">
+                ${this.parent == null ? null : html `
+                    <div tabindex="0"
+                         class="ft-filter-level--go-back"
+                         ?disabled=${this.disabled}
+                         @keyup=${this.goBackOnKeyPress}
+                         @click=${this.goBackOnClick}>
+                        <ft-ripple></ft-ripple>
+                        <mwc-icon>chevron_left</mwc-icon>
+                        <ft-typography variant="body2">${this.parent.label}</ft-typography>
+                    </div>
+                `}
+                ${repeat(limitedOptions, option => option.value, option => {
+            var _a;
+            return html `
+                            <div class="ft-filter-level--option" part="options">
+                                ${this.multivalued ? this.buildMultiValuedOption(option) : this.buildMonoValuedOption(option)}
+                                ${this.preventNavigation || option.selected || ((_a = option.subOptions) !== null && _a !== void 0 ? _a : []).length === 0 ? nothing : html `
+                                    <ft-button icon="chevron_right"
+                                               label="${option.label}"
+                                               ?disabled=${this.disabled}
+                                               tooltipPosition="left"
+                                               @click=${() => this.displayLevel(option)}></ft-button>
+                                `}
+                            </div>
+                        `;
+        })}
+                ${limitedOptions.length < options.length ? html `
+                    <ft-button
+                            class="ft-filter-level--display-more"
+                            icon="expand_more"
+                            dense trailingIcon
+                            @click=${this.displayMore}>
+                        ${this.moreValuesButtonLabel}
+                    </ft-button>
+                ` : nothing}
+            </div>
+        `;
+    }
+    goBackOnKeyPress(e) {
+        if (e.key === "Enter" || e.key === " ") {
+            this.dispatchEvent(new CustomEvent("go-back", { detail: this.parent }));
+        }
+    }
+    goBackOnClick(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent("go-back", { detail: this.parent }));
+    }
+    displayMore() {
+        this.displayedPages++;
+    }
+    buildMultiValuedOption(option) {
+        var _a;
+        return html `
+            <mwc-formfield label="${option.label}">
+                <mwc-checkbox
+                        reducedTouchTarget
+                        ?checked=${option.selected}
+                        ?disabled=${this.disabled}
+                        ?indeterminate=${flatDeep((_a = option.subOptions) !== null && _a !== void 0 ? _a : [], o => { var _a; return (_a = o.subOptions) !== null && _a !== void 0 ? _a : []; }).some(o => o.selected)}
+                        @change=${(e) => this.toggleMultiValuedOption(e, option)}
+                ></mwc-checkbox>
+            </mwc-formfield>
+        `;
+    }
+    toggleMultiValuedOption(e, option) {
+        var _a;
+        flatDeep((_a = option.subOptions) !== null && _a !== void 0 ? _a : [], o => { var _a; return (_a = o.subOptions) !== null && _a !== void 0 ? _a : []; }).forEach(o => o.selected = false);
+        this.optionsChanged(e, option);
+    }
+    buildMonoValuedOption(option) {
+        return html `
+            <mwc-formfield label="${option.label}">
+                <mwc-radio
+                        reducedTouchTarget
+                        name="${this.id}"
+                        ?checked=${option.selected}
+                        ?disabled=${this.disabled}
+                        @click=${(e) => this.toggleMonoValuedOption(e, option)}
+                ></mwc-radio>
+            </mwc-formfield>
+        `;
+    }
+    toggleMonoValuedOption(e, option) {
+        this.optionsChanged(e, option);
+    }
+    optionsChanged(e, option) {
+        e.stopPropagation();
+        option.selected = !option.selected;
+        this.dispatchEvent(new CustomEvent("change", { detail: option }));
+    }
+    displayLevel(option) {
+        this.dispatchEvent(new CustomEvent("display-level", { detail: option }));
+    }
+};
+FtFilterLevel.elementDefinitions = {
+    "ft-button": FtButton,
+    "ft-ripple": FtRipple,
+    "ft-typography": FtTypography,
+    "mwc-checkbox": Checkbox,
+    "mwc-formfield": Formfield,
+    "mwc-icon": Icon,
+    "mwc-radio": Radio,
+};
+__decorate([
+    property({ type: String })
+], FtFilterLevel.prototype, "id", void 0);
+__decorate([
+    property({ type: Object })
+], FtFilterLevel.prototype, "parent", void 0);
+__decorate([
+    property({ type: Array })
+], FtFilterLevel.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtFilterLevel.prototype, "multivalued", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtFilterLevel.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtFilterLevel.prototype, "hideSelectedOptions", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtFilterLevel.prototype, "preventNavigation", void 0);
+__decorate([
+    property({ type: String })
+], FtFilterLevel.prototype, "filter", void 0);
+__decorate([
+    property({ type: String })
+], FtFilterLevel.prototype, "moreValuesButtonLabel", void 0);
+__decorate([
+    property({ type: Number })
+], FtFilterLevel.prototype, "displayedValuesLimit", void 0);
+__decorate([
+    query(".ft-filter-level--container")
+], FtFilterLevel.prototype, "container", void 0);
+__decorate([
+    state()
+], FtFilterLevel.prototype, "displayedPages", void 0);
+FtFilterLevel = __decorate([
+    customElement("ft-filter-level")
+], FtFilterLevel);
+export { FtFilterLevel };
+//# sourceMappingURL=ft-filter-level.js.map

package/build/ft-filter-option.d.ts

@@ -0,0 +1,17 @@
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+export interface FtFilterOptionProperties {
+    label: string;
+    value: any;
+    selected?: boolean;
+    subOptions?: Array<FtFilterOptionProperties>;
+}
+export declare class FtFilterOption extends FtLitElement implements FtFilterOptionProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    label: string;
+    value: any;
+    selected: boolean;
+    subOptions: Array<FtFilterOptionProperties>;
+    protected getTemplate(): import("lit-html").TemplateResult<1>;
+    private updateSubOptionsFromSlot;
+}
+//# sourceMappingURL=ft-filter-option.d.ts.map

package/build/ft-filter-option.js

@@ -0,0 +1,48 @@
+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 { customElement, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { property } from "lit/decorators.js";
+import { html } from "lit";
+let FtFilterOption = class FtFilterOption extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.label = "";
+        this.value = null;
+        this.selected = false;
+        this.subOptions = [];
+    }
+    getTemplate() {
+        return html `
+            <slot @slotchange=${this.updateSubOptionsFromSlot}></slot>
+        `;
+    }
+    updateSubOptionsFromSlot(e) {
+        const slot = e.composedPath()[0];
+        this.subOptions = slot.assignedElements().map(n => n);
+    }
+};
+FtFilterOption.elementDefinitions = {};
+__decorate([
+    property({ type: String })
+], FtFilterOption.prototype, "label", void 0);
+__decorate([
+    property({
+        type: Object,
+        converter: value => value
+    })
+], FtFilterOption.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FtFilterOption.prototype, "selected", void 0);
+__decorate([
+    property({ type: Object })
+], FtFilterOption.prototype, "subOptions", void 0);
+FtFilterOption = __decorate([
+    customElement("ft-filter-option")
+], FtFilterOption);
+export { FtFilterOption };
+//# sourceMappingURL=ft-filter-option.js.map

package/build/ft-filter.d.ts

@@ -0,0 +1,62 @@
+import { PropertyValues } from "lit";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtFilterOptionProperties } from "./ft-filter-option";
+export * from "./ft-filter-option";
+export interface FtFilterProperties {
+    id: string;
+    label: string;
+    filterPlaceHolder?: string;
+    clearButtonLabel?: string;
+    moreValuesButtonLabel?: string;
+    options: Array<FtFilterOptionProperties>;
+    multivalued?: boolean;
+    disabled?: boolean;
+    raiseSelectedOptions?: boolean;
+    displayedValuesLimit?: number;
+}
+export interface FtFilterCssVariables {
+}
+export declare class FtFilterChangeEvent extends CustomEvent<Array<any>> {
+    constructor(selectedValues: any[]);
+}
+export declare class FtFilter extends FtLitElement implements FtFilterProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    protected getStyles(): import("lit").CSSResult[];
+    id: string;
+    label: string;
+    filterPlaceHolder: string;
+    clearButtonLabel: string;
+    moreValuesButtonLabel: string;
+    options: Array<FtFilterOptionProperties>;
+    multivalued: boolean;
+    disabled: boolean;
+    raiseSelectedOptions: boolean;
+    displayedValuesLimit: number;
+    private container?;
+    private valuesContainer?;
+    private levelsContainer?;
+    private lastLevel?;
+    private levels?;
+    private withScroll;
+    private filter;
+    private displayedLevels;
+    private slideIn?;
+    private slideOut?;
+    private scrollResizeObserver;
+    private get flatOptions();
+    protected getTemplate(): import("lit-html").TemplateResult<1>;
+    protected update(props: PropertyValues): void;
+    protected contentAvailableCallback(props: PropertyValues): void;
+    private levelsScrollDebouncer;
+    private renderLevels;
+    private renderLevel;
+    private goBack;
+    private onDisplayLevel;
+    private clear;
+    private onChange;
+    private optionsChanged;
+    private updateOptionsFromSlot;
+    private onFilterChange;
+    private updateScroll;
+}
+//# sourceMappingURL=ft-filter.d.ts.map