@fluid-topics/ft-select 1.3.62 → 1.4.1

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

@@ -0,0 +1,22 @@
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtSelectOptionProperties } from "./ft-select.properties";
+import { PropertyValues } from "lit";
+export declare class FtSelectOption extends FtLitElement implements FtSelectOptionProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+        customElements?: CustomElementRegistry | undefined;
+    };
+    label: string;
+    value: any;
+    selected: boolean;
+    slotElement: HTMLSlotElement;
+    private isSlotEmpty;
+    static styles: import("lit").CSSResult[];
+    protected render(): import("lit-html").TemplateResult<1>;
+    private onSlotChange;
+    protected onClick(): void;
+    protected update(changedProperties: PropertyValues): void;
+}

package/build/ft-select-option.js

@@ -0,0 +1,74 @@
+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 { FtLitElement, isSlotEmptyOrWithoutContent, } from "@fluid-topics/ft-wc-utils";
+import { FtRipple } from "@fluid-topics/ft-ripple";
+import { FtTypographyBody2 } from "@fluid-topics/ft-typography";
+import { html, LitElement, } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { property, query, } from "lit/decorators.js";
+import { styles } from "./ft-select-option.styles";
+class FtSelectOption extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.label = "";
+        this.value = null;
+        this.selected = false;
+        this.isSlotEmpty = true;
+    }
+    render() {
+        var _a, _b;
+        const classes = {
+            "ft-select--option": true,
+            "ft-select--option-selected": this.selected,
+            "ft-typography--body2": true,
+        };
+        return html `
+            <div class="${classMap(classes)}"
+                 part="option option-${(_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) === null || _b === void 0 ? void 0 : _b.replace(/[^\w-]/g, "")}"
+                 tabindex="0"
+                 aria-label="${this.label}"
+                 data-value="${this.value}"
+                 @click=${this.onClick}>
+                <ft-ripple ?primary=${this.selected} ?activated=${this.selected}></ft-ripple>
+                <slot @slotchange=${this.onSlotChange}>
+                </slot>
+                ${this.isSlotEmpty ? html `<span>${this.label}</span>` : html ``}
+            </div>
+        `;
+    }
+    onSlotChange() {
+        this.isSlotEmpty = isSlotEmptyOrWithoutContent(this.slotElement);
+    }
+    onClick() {
+        this.dispatchEvent(new Event("select-option", {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        this.dispatchEvent(new CustomEvent("option-change", { detail: this, bubbles: true }));
+    }
+}
+FtSelectOption.elementDefinitions = {
+    "ft-ripple": FtRipple,
+};
+FtSelectOption.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+FtSelectOption.styles = [styles, FtTypographyBody2];
+__decorate([
+    property({ type: String })
+], FtSelectOption.prototype, "label", void 0);
+__decorate([
+    property({ type: Object, converter: (value) => value })
+], FtSelectOption.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FtSelectOption.prototype, "selected", void 0);
+__decorate([
+    query("slot")
+], FtSelectOption.prototype, "slotElement", void 0);
+export { FtSelectOption };

package/build/ft-select-option.properties.d.ts

@@ -0,0 +1,5 @@
+export interface FtSelectOptionProperties {
+    label?: string;
+    selected?: boolean;
+    value: string;
+}

package/build/ft-select-option.properties.js

@@ -0,0 +1 @@
+export {};

package/build/ft-select-option.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/build/ft-select-option.styles.js

@@ -0,0 +1,32 @@
+import { FtRippleCssVariables } from "@fluid-topics/ft-ripple/build/ft-ripple.styles";
+import { setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtSelectCssVariables } from "./ft-select.styles";
+import { css } from "lit";
+export const styles = css `
+    .ft-select--option {
+        ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, "0.08")};
+        ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, "0.04")};
+    }
+
+    .ft-select--option > *:not(ft-ripple) {
+        position: relative;
+    }
+
+    .ft-select--option {
+        position: relative;
+        padding: 4px ${FtSelectCssVariables.horizontalSpacing};
+        min-height: 32px;
+        display: flex;
+        align-items: center;
+    }
+
+    .ft-select--option:hover {
+        border-left: 2px ${FtSelectCssVariables.colorPrimary} solid;
+    }
+
+    .ft-select--option span {
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+`;

package/build/ft-select.d.ts

@@ -1,14 +1,8 @@
 import { PropertyValues } from "lit";
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtSelectOptionProperties, FtSelectProperties } from "./ft-select.properties";
-export declare class FtSelectOption extends FtLitElement implements FtSelectOptionProperties {
-    static elementDefinitions: ElementDefinitionsMap;
-    label: string;
-    value: any;
-    selected: boolean;
-    protected render(): import("lit-html").TemplateResult<1>;
-    protected update(changedProperties: PropertyValues): void;
-}
+import { FtSelectOption } from "./ft-select-option";
+export { FtSelectOption };
 export declare class FtSelect extends FtLitElement implements FtSelectProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static searchTimeoutMilliseconds: number;
@@ -29,11 +23,13 @@ export declare class FtSelect extends FtLitElement implements FtSelectProperties
     private container?;
     private optionsMenu?;
     private mainPanel;
-    private firstOption?;
-    private focusedOption?;
-    private selectedOptionElement?;
-    private lastOption?;
+    get firstOption(): FtSelectOption;
+    get optionsList(): FtSelectOption[];
+    get focusedOption(): FtSelectOption | undefined;
+    get selectedOptionElement(): FtSelectOption | undefined;
+    get lastOption(): FtSelectOption | undefined;
     private optionsSlot?;
+    private isSlotEmpty;
     protected render(): import("lit-html").TemplateResult<1>;
     private renderOption;
     protected willUpdate(props: PropertyValues): void;
@@ -45,8 +41,8 @@ export declare class FtSelect extends FtLitElement implements FtSelectProperties
     private onOptionsKeyDown;
     private isKeyAlphanumeric;
     private handleAlphanumericPress;
-    private onOptionKeyDown;
     private getOptionId;
+    private onSelectOption;
     private selectOption;
     private hideOptions;
     connectedCallback(): void;

package/build/ft-select.js

@@ -4,43 +4,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, nothing } from "lit";
-import { property, query, state } from "lit/decorators.js";
+import { html, nothing, } from "lit";
+import { property, query, state, } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { repeat } from "lit/directives/repeat.js";
 import { when } from "lit/directives/when.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { computeOffsetAutoPosition, deepEqual, FtLitElement } from "@fluid-topics/ft-wc-utils";
-import { FtTypography, FtTypographyBody2, FtTypographyCaption, FtTypographyVariants } from "@fluid-topics/ft-typography";
+import { computeOffsetAutoPosition, deepEqual, FtLitElement, isSlotEmptyOrWithoutContent, last, } from "@fluid-topics/ft-wc-utils";
+import { FtTypography, FtTypographyCaption, FtTypographyVariants, } from "@fluid-topics/ft-typography";
 import { FtInputLabel } from "@fluid-topics/ft-input-label";
 import { FtRipple } from "@fluid-topics/ft-ripple";
-import { FtIcon, FtIcons } from "@fluid-topics/ft-icon";
-import { FtSelectCssVariables, styles } from "./ft-select.styles";
-class FtSelectOption extends FtLitElement {
-    constructor() {
-        super(...arguments);
-        this.label = "";
-        this.value = null;
-        this.selected = false;
-    }
-    render() {
-        return html ``;
-    }
-    update(changedProperties) {
-        super.update(changedProperties);
-        this.dispatchEvent(new CustomEvent("option-change", { detail: this, bubbles: true }));
-    }
-}
-FtSelectOption.elementDefinitions = {};
-__decorate([
-    property({ type: String })
-], FtSelectOption.prototype, "label", void 0);
-__decorate([
-    property({ type: Object, converter: (value) => value })
-], FtSelectOption.prototype, "value", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], FtSelectOption.prototype, "selected", void 0);
+import { FtIcon, FtIcons, } from "@fluid-topics/ft-icon";
+import { FtSelectCssVariables, styles, } from "./ft-select.styles";
+import { FtSelectOption } from "./ft-select-option";
 export { FtSelectOption };
 class FtSelect extends FtLitElement {
     constructor() {
@@ -57,8 +33,25 @@ class FtSelect extends FtLitElement {
         this.focusOptions = false;
         this.currentSearch = "";
         this.lastSearchInputDate = new Date("01/01/1970");
+        this.isSlotEmpty = true;
         this.hideOptions = (e) => this.optionsDisplayed = this.optionsDisplayed && e.composedPath().includes(this.container);
     }
+    get firstOption() {
+        return this.optionsList[0];
+    }
+    get optionsList() {
+        const slotOptions = [...this.querySelectorAll("ft-select-option")];
+        return slotOptions.length > 0 ? slotOptions : [...this.shadowRoot.querySelectorAll("ft-select-option")];
+    }
+    get focusedOption() {
+        return this.optionsList.find((el) => el.matches(":focus-within"));
+    }
+    get selectedOptionElement() {
+        return this.optionsList.find((el) => el.selected);
+    }
+    get lastOption() {
+        return last(this.optionsList);
+    }
     render() {
         var _a, _b, _c, _d, _e;
         const optionsDisplayed = this.hasOptionsMenuOpen;
@@ -101,16 +94,25 @@ class FtSelect extends FtLitElement {
                          aria-activedescendant="${ifDefined(this.getOptionId(this.selectedOption))}"
                          role="combobox">
                         <ft-ripple ?disabled=${disabled} ?activated=${!this.outlined}></ft-ripple>
-                        <ft-typography variant="${FtTypographyVariants.body1}" class="ft-select--selected-option">
-                            ${(_e = (_d = this.selectedOption) === null || _d === void 0 ? void 0 : _d.label) !== null && _e !== void 0 ? _e : ""}
-                        </ft-typography>
+                        <slot name="input-value">
+                            <ft-typography variant="${FtTypographyVariants.body1}"
+                                           aria-hidden="${hasOptionSelected ? "false" : "true"}"
+                                           class="ft-select--selected-option">
+                                ${(_e = (_d = this.selectedOption) === null || _d === void 0 ? void 0 : _d.label) !== null && _e !== void 0 ? _e : this.label}
+                            </ft-typography>
+                        </slot>
                         <ft-icon aria-hidden="true" .value=${optionsDisplayed ? FtIcons.THIN_ARROW_UP : FtIcons.THIN_ARROW}></ft-icon>
                     </div>
                     <div class="ft-select--options"
                          part="options"
                          @keydown=${this.onOptionsKeyDown}
+                         @select-option=${this.onSelectOption}
                          role="listbox">
-                        ${repeat(this.options, (option) => option.value, (option, index) => this.renderOption(option, index))}
+                        <slot @slotchange=${this.updateOptionsFromSlot}
+                              @option-change=${this.updateOptionsFromSlot}
+                        >
+                        </slot>
+                        ${when(this.isSlotEmpty, () => repeat(this.options, (option) => option.value, (option) => this.renderOption(option)))}
                     </div>
                 </div>
                 <slot name="helper" part="helper">
@@ -119,31 +121,16 @@ class FtSelect extends FtLitElement {
                         </ft-typography>` : nothing}
                 </slot>
             </div>
-            <slot @slotchange=${this.updateOptionsFromSlot}
-                  @option-change=${this.updateOptionsFromSlot}
-            ></slot>
         `;
     }
-    renderOption(option, index) {
-        var _a, _b;
+    renderOption(option) {
         const selected = this.selectedOption === option;
-        const classes = {
-            "ft-select--option": true,
-            "ft-select--option-selected": selected,
-            "ft-typography--body2": true,
-        };
         return html `
-            <div class="${classMap(classes)}"
-                 part="option option-${(_b = (_a = option.value) === null || _a === void 0 ? void 0 : _a.toString()) === null || _b === void 0 ? void 0 : _b.replace(/[^\w-]/g, "")}"
-                 tabindex="0"
-                 aria-label="${option.label}"
-                 data-value="${option.value}"
-                 id="${"option-" + index}"
-                 @keydown=${(e) => this.onOptionKeyDown(e, option)}
-                 @click=${() => this.selectOption(option)}>
-                <ft-ripple ?primary=${selected} ?activated=${selected}></ft-ripple>
-                <span>${option.label}</span>
-            </div>
+            <ft-select-option
+                ?selected=${selected}
+                label="${option.label}"
+                .value=${option.value}
+            ></ft-select-option>
         `;
     }
     willUpdate(props) {
@@ -163,7 +150,7 @@ class FtSelect extends FtLitElement {
             this.focusOptions = false;
         }
         if (props.has("optionsDisplayed") && this.hasOptionsMenuOpen) {
-            this.optionsMenu.style.width = this.mainPanel.getBoundingClientRect().width + "px";
+            this.optionsMenu.style.minWidth = this.mainPanel.getBoundingClientRect().width + "px";
             const fallbackPlacements = ["bottom", "top"];
             computeOffsetAutoPosition(this.mainPanel, this.optionsMenu, "bottom", fallbackPlacements, "fixed", FtSelectCssVariables.optionsHeight, 0)
                 .then(({ x, y }) => {
@@ -181,6 +168,7 @@ class FtSelect extends FtLitElement {
     updateOptionsFromSlot(e) {
         var _a;
         e.stopPropagation();
+        this.isSlotEmpty = isSlotEmptyOrWithoutContent(this.optionsSlot);
         const optionsFromSlot = (_a = this.optionsSlot) === null || _a === void 0 ? void 0 : _a.assignedElements().map((n) => n);
         if (optionsFromSlot && optionsFromSlot.length > 0) {
             this.options = optionsFromSlot;
@@ -207,25 +195,34 @@ class FtSelect extends FtLitElement {
         }
     }
     onOptionsKeyDown(e) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b;
         let optionToFocus;
+        const indexOfFocusElement = this.focusedOption ? this.optionsList.indexOf(this.focusedOption) : 0;
         switch (e.key) {
-            case "Escape":
+            case " ":
+            case "Enter":
+                e.preventDefault();
+                e.stopPropagation();
+                this.onSelectOption(e);
                 this.optionsDisplayed = false;
                 (_a = this.mainPanel) === null || _a === void 0 ? void 0 : _a.focus();
                 break;
+            case "Escape":
+                this.optionsDisplayed = false;
+                (_b = this.mainPanel) === null || _b === void 0 ? void 0 : _b.focus();
+                break;
             case "Tab":
                 this.optionsDisplayed = false;
                 break;
             case "ArrowUp":
                 e.preventDefault();
                 e.stopPropagation();
-                optionToFocus = (_c = (_b = this.focusedOption) === null || _b === void 0 ? void 0 : _b.previousElementSibling) !== null && _c !== void 0 ? _c : this.lastOption;
+                optionToFocus = this.optionsList[(indexOfFocusElement - 1 + this.optionsList.length) % this.optionsList.length];
                 break;
             case "ArrowDown":
                 e.preventDefault();
                 e.stopPropagation();
-                optionToFocus = (_e = (_d = this.focusedOption) === null || _d === void 0 ? void 0 : _d.nextElementSibling) !== null && _e !== void 0 ? _e : this.firstOption;
+                optionToFocus = this.optionsList[(indexOfFocusElement + 1) % this.optionsList.length];
                 break;
             default:
                 if (e.key.length != 1) {
@@ -245,7 +242,6 @@ class FtSelect extends FtLitElement {
             || (charCode > 96 && charCode < 123); // lower alpha (a-z)
     }
     handleAlphanumericPress(c) {
-        var _a, _b;
         const currentDate = new Date();
         // Resetting current search if timeout elapsed
         if (currentDate.getTime() - this.lastSearchInputDate.getTime() > FtSelect.searchTimeoutMilliseconds) {
@@ -254,23 +250,8 @@ class FtSelect extends FtLitElement {
         this.currentSearch += c.toLowerCase();
         // Searching for option
         const foundOption = this.options.find((opt) => { var _a; return ((_a = opt.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().substring(0, this.currentSearch.length)) === this.currentSearch; });
-        if (foundOption === undefined) {
-            this.lastSearchInputDate = currentDate;
-            return undefined;
-        }
-        const optionElement = (_b = (_a = this.optionsMenu) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-value="${foundOption.value}"]`)) !== null && _b !== void 0 ? _b : undefined;
         this.lastSearchInputDate = currentDate;
-        return optionElement;
-    }
-    onOptionKeyDown(e, option) {
-        var _a;
-        if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            e.stopPropagation();
-            this.selectOption(option);
-            this.optionsDisplayed = false;
-            (_a = this.mainPanel) === null || _a === void 0 ? void 0 : _a.focus();
-        }
+        return foundOption && this.optionsList.find((el) => el.value === foundOption.value);
     }
     getOptionId(selectedOption) {
         if (!selectedOption) {
@@ -282,9 +263,14 @@ class FtSelect extends FtLitElement {
         }
         return `option-${index}`;
     }
+    onSelectOption(e) {
+        e.stopPropagation();
+        const option = this.options.find((opt) => opt.value === e.target.value);
+        this.selectOption(option);
+    }
     selectOption(option) {
         var _a, _b;
-        if (!deepEqual((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value, option.value)) {
+        if (!deepEqual((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value, option === null || option === void 0 ? void 0 : option.value)) {
             this.selectedOption = option;
             for (const otherOption of this.options) {
                 otherOption.selected = otherOption === option;
@@ -307,10 +293,10 @@ FtSelect.elementDefinitions = {
     "ft-typography": FtTypography,
     "ft-ripple": FtRipple,
     "ft-icon": FtIcon,
+    "ft-select-option": FtSelectOption,
 };
 FtSelect.searchTimeoutMilliseconds = 2000;
 FtSelect.styles = [
-    FtTypographyBody2,
     FtTypographyCaption,
     styles,
 ];
@@ -362,18 +348,6 @@ __decorate([
 __decorate([
     query(".ft-select--input-panel")
 ], FtSelect.prototype, "mainPanel", void 0);
-__decorate([
-    query(".ft-select--option:first-child")
-], FtSelect.prototype, "firstOption", void 0);
-__decorate([
-    query(".ft-select--option:focus")
-], FtSelect.prototype, "focusedOption", void 0);
-__decorate([
-    query(".ft-select--option.ft-select--option-selected")
-], FtSelect.prototype, "selectedOptionElement", void 0);
-__decorate([
-    query(".ft-select--option:last-child")
-], FtSelect.prototype, "lastOption", void 0);
 __decorate([
     query("slot:not([name])")
 ], FtSelect.prototype, "optionsSlot", void 0);