@fluid-topics/ft-combobox 1.3.26

package/build/ft-combobox.properties.d.ts

@@ -0,0 +1,17 @@
+import { FtComboboxSuggestionDefinition } from "./models";
+export interface FtComboboxProperties {
+    label?: string;
+    icon?: string;
+    iconVariant?: string;
+    name?: string;
+    value?: string;
+    helper?: string;
+    disabled?: boolean;
+    error: boolean;
+    outlined?: boolean;
+    placeholder?: string;
+    filterSuggestions: boolean;
+    suggestionsHelper?: string;
+    suggestionsProvider: (query: string) => FtComboboxSuggestionDefinition[] | Promise<FtComboboxSuggestionDefinition[]>;
+    suggestionsProviderDebouncerTimeout?: number;
+}

package/build/ft-combobox.properties.js

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

package/build/ft-combobox.styles.d.ts

@@ -0,0 +1,20 @@
+export declare const FtComboboxCssVariables: {
+    fontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    labelSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    verticalSpacing: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    horizontalSpacing: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    helperColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorPrimary: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorOnSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorOnSurfaceDisabled: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderRadiusS: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorError: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    prefixColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    iconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    floatingZIndex: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    backgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorOutline: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    elevation02: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    suggestSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const styles: import("lit").CSSResult;

package/build/ft-combobox.styles.js

@@ -0,0 +1,190 @@
+import { css } from "lit";
+import { setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtInputLabelCssVariables } from "@fluid-topics/ft-input-label/build/ft-input-label.styles";
+import { FtTextFieldCssVariables } from "@fluid-topics/ft-text-field";
+import { FtIconCssVariables } from "@fluid-topics/ft-icon";
+export const FtComboboxCssVariables = FtTextFieldCssVariables;
+// language=CSS
+export const styles = css `
+    *:focus {
+        outline: none;
+    }
+
+    .ft-combobox {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        position: relative;
+        --combobox-internal-suggest-size: ${FtComboboxCssVariables.suggestSize};
+    }
+
+    ft-input-label {
+        ${setVariable(FtInputLabelCssVariables.fontSize, FtComboboxCssVariables.fontSize)};
+        ${setVariable(FtInputLabelCssVariables.raisedFontSize, FtComboboxCssVariables.labelSize)};
+        ${setVariable(FtInputLabelCssVariables.verticalSpacing, FtComboboxCssVariables.verticalSpacing)};
+        ${setVariable(FtInputLabelCssVariables.horizontalSpacing, FtComboboxCssVariables.horizontalSpacing)};
+        ${setVariable(FtInputLabelCssVariables.backgroundColor, FtComboboxCssVariables.backgroundColor)};
+    }
+
+    /* Ensure the floating label renders above input content and doesn't intercept events */
+    .ft-combobox--main-panel ft-input-label .ft-input-label {
+        z-index: 1;
+        pointer-events: none;
+    }
+
+    .ft-combobox--outlined ft-input-label {
+        ${setVariable(FtInputLabelCssVariables.backgroundColor, "transparent")};
+    }
+
+    .ft-combobox--main-panel {
+        position: relative;
+        display: flex;
+        height: calc(4 * ${FtComboboxCssVariables.verticalSpacing} + ${FtComboboxCssVariables.labelSize} + ${FtComboboxCssVariables.fontSize});
+    }
+
+    .ft-combobox--input-panel {
+        flex-grow: 1;
+        position: relative;
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        padding: 0 ${FtComboboxCssVariables.horizontalSpacing};
+    }
+
+    .ft-combobox--outlined .ft-combobox--input-panel {
+        border-radius: ${FtComboboxCssVariables.borderRadiusS};
+    }
+
+    .ft-combobox--filled .ft-combobox--input-panel {
+        border-radius: ${FtComboboxCssVariables.borderRadiusS} ${FtComboboxCssVariables.borderRadiusS} 0 0;
+    }
+
+    /* Match text-field filled layout when there is a label: input aligns to bottom and container has bottom padding */
+    .ft-combobox--filled.ft-combobox--with-label .ft-combobox--input-panel {
+        align-items: flex-end;
+        padding: 0 ${FtComboboxCssVariables.horizontalSpacing} ${FtComboboxCssVariables.verticalSpacing} ${FtComboboxCssVariables.horizontalSpacing};
+    }
+
+    /* Focus color on label when interacting */
+    .ft-combobox:not(.ft-combobox--disabled):focus-within ft-input-label {
+        ${setVariable(FtInputLabelCssVariables.borderColor, FtComboboxCssVariables.colorPrimary)};
+        ${setVariable(FtInputLabelCssVariables.textColor, FtComboboxCssVariables.colorPrimary)};
+    }
+
+    .ft-combobox--in-error .ft-combobox--input,
+    .ft-combobox--in-error .ft-combobox--helper-text {
+        color: ${FtTextFieldCssVariables.colorError};
+    }
+
+    .ft-combobox--input {
+        display: block;
+        position: relative;
+        flex-grow: 1;
+        flex-shrink: 1;
+        min-width: 0;
+        font-size: ${FtComboboxCssVariables.fontSize};
+        color: ${FtComboboxCssVariables.colorOnSurface};
+        padding: calc(2 * ${FtComboboxCssVariables.verticalSpacing}) 0;
+        border: none;
+        background: none;
+    }
+
+    .ft-combobox--with-label.ft-combobox--filled .ft-combobox--input {
+        padding-bottom: 0;
+        padding-top: calc(${FtComboboxCssVariables.labelSize} + 2 * ${FtComboboxCssVariables.verticalSpacing});
+    }
+
+    .ft-combobox--disabled .ft-combobox--input {
+        color: ${FtComboboxCssVariables.colorOnSurfaceDisabled};
+        cursor: not-allowed;
+    }
+
+    .ft-combobox--helper-text {
+        padding: 0 12px 0 ${FtComboboxCssVariables.horizontalSpacing};
+        color: ${FtComboboxCssVariables.helperColor};
+    }
+
+    .ft-combobox--listbox {
+        margin: 0;
+        padding: 0;
+        display: none;
+        position: absolute;
+        top: calc(100% + 2px);
+        left: -1px;
+        right: -1px;
+        list-style: none;
+        z-index: ${FtComboboxCssVariables.floatingZIndex};
+        background: ${FtComboboxCssVariables.backgroundColor};
+        border: 1px solid ${FtComboboxCssVariables.colorOutline};
+        border-radius: 0 0 ${FtComboboxCssVariables.borderRadiusS} ${FtComboboxCssVariables.borderRadiusS};
+        box-shadow: ${FtComboboxCssVariables.elevation02};
+        outline: none;
+        max-height: ${FtComboboxCssVariables.suggestSize};
+        overflow-y: auto;
+        overflow-x: hidden;
+        font-size: ${FtComboboxCssVariables.fontSize};
+        cursor: pointer;
+    }
+
+    .ft-combobox--listbox[data-visible="true"] {
+        display: block;
+    }
+
+    .ft-combobox--option {
+        margin: 0;
+        display: block;
+        padding: 0; /* Inner suggestion container handles padding */
+        cursor: pointer;
+        color: ${FtComboboxCssVariables.colorOnSurface};
+    }
+
+    .ft-combobox-suggestion {
+        position: relative;
+        padding: 8px ${FtComboboxCssVariables.horizontalSpacing};
+        cursor: pointer;
+        min-height: 44px;
+        box-sizing: border-box;
+        outline: none;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .ft-combobox-suggestion--label {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex-grow: 1;
+        flex-shrink: 1;
+    }
+
+    .ft-combobox-suggestion--with-helper {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0;
+    }
+
+    .ft-combobox-suggestion--helper-text {
+        color: ${FtComboboxCssVariables.helperColor};
+    }
+
+    .ft-combobox--option[aria-selected="true"] .ft-combobox-suggestion,
+    .ft-combobox--option:hover .ft-combobox-suggestion {
+        background-color: rgba(0, 0, 0, 0.04);
+    }
+
+    .ft-combobox--option-new-value {
+        border-top: 1px solid ${FtComboboxCssVariables.colorOutline};
+    }
+
+    .ft-combobox--icon {
+        align-self: center;
+        margin-left: 8px;
+        color: ${FtComboboxCssVariables.iconColor};
+    }
+
+    .ft-combobox--with-icon {
+        ${setVariable(FtInputLabelCssVariables.labelMaxWidth, `calc(100% - ${FtIconCssVariables.size} - ${FtComboboxCssVariables.horizontalSpacing})`)};
+    }
+`;

package/build/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./ft-combobox.styles";
+export * from "./ft-combobox.properties";
+export * from "./ft-combobox";
+export * from "./models";
+export * from "./ComboboxSuggestionProvider";

package/build/index.js

@@ -0,0 +1,8 @@
+import { customElement } from "@fluid-topics/ft-wc-utils";
+import { FtCombobox } from "./ft-combobox";
+export * from "./ft-combobox.styles";
+export * from "./ft-combobox.properties";
+export * from "./ft-combobox";
+export * from "./models";
+export * from "./ComboboxSuggestionProvider";
+customElement("ft-combobox")(FtCombobox);

package/build/models.d.ts

@@ -0,0 +1,6 @@
+import { FtIcons } from "@fluid-topics/ft-icon";
+export interface FtComboboxSuggestionDefinition {
+    value: string;
+    label: string;
+    icon?: FtIcons;
+}

package/build/models.js

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

package/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "@fluid-topics/ft-combobox",
+    "version": "1.3.26",
+    "description": "A",
+    "keywords": [
+        "Lit"
+    ],
+    "author": "Fluid Topics <devtopics@antidot.net>",
+    "license": "ISC",
+    "main": "build/index.js",
+    "web": "build/ft-combobox.min.js",
+    "typings": "build/index",
+    "files": [
+        "build/**/*.js",
+        "build/**/*.ts"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
+    },
+    "dependencies": {
+        "@fluid-topics/ft-wc-utils": "1.3.26",
+        "lit": "3.1.0"
+    },
+    "devDependencies": {
+        "@fluid-topics/ft-wc-test-utils": "1.3.26"
+    },
+    "gitHead": "2801b1f3a132753af33d5d62b8001164737e2a4f"
+}