@fluid-topics/ft-select 0.2.2 → 0.2.6

package/build/ft-select.js

@@ -45,12 +45,13 @@ export const FtSelectCssVariables = {
     selectedOptionColor: FtCssVariable.extend("--ft-select-selected-option-color", designSystemVariables.colorOnSurface),
     helperColor: FtCssVariable.extend("--ft-select-helper-color", designSystemVariables.colorOnSurfaceMedium),
     optionsColor: FtCssVariable.extend("--ft-select-options-color", designSystemVariables.colorOnSurface),
-    optionsZIndex: FtCssVariable.create("--ft-select-options-z-index", "NUMBER", "2"),
+    optionsZIndex: FtCssVariable.create("--ft-select-options-z-index", "NUMBER", "3"),
     colorSurface: FtCssVariable.external(designSystemVariables.colorSurface, "Design system"),
     colorOnSurfaceDisabled: FtCssVariable.external(designSystemVariables.colorOnSurfaceDisabled, "Design system"),
     colorPrimary: FtCssVariable.external(designSystemVariables.colorPrimary, "Design system"),
     borderRadiusS: FtCssVariable.external(designSystemVariables.borderRadiusS, "Design system"),
     elevation02: FtCssVariable.external(designSystemVariables.elevation02, "Design system"),
+    colorError: FtCssVariable.external(designSystemVariables.colorError, "Design system"),
 };
 export class FtSelect extends FtLitElement {
     constructor() {
@@ -59,6 +60,8 @@ export class FtSelect extends FtLitElement {
         this.helper = "";
         this.outlined = false;
         this.disabled = false;
+        this.error = false;
+        this.fixedMenuPosition = false;
         this.options = [];
         this.optionsDisplayed = false;
         this.focusOptions = false;
@@ -66,7 +69,7 @@ export class FtSelect extends FtLitElement {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        let optionsDisplayed = !this.disabled && this.optionsDisplayed && this.hasOptions;
+        let optionsDisplayed = this.hasOptionsMenuOpen;
         let disabled = this.disabled || !this.hasOptions;
         const hasOptionSelected = ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) != null || ((_c = (_b = this.selectedOption) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : "").length > 0;
         const classes = {
@@ -76,7 +79,9 @@ export class FtSelect extends FtLitElement {
             "ft-select--disabled": disabled,
             "ft-select--options-displayed": optionsDisplayed,
             "ft-select--has-option-selected": hasOptionSelected,
-            "ft-select--no-label": !this.label
+            "ft-select--no-label": !this.label,
+            "ft-select--fixed": this.fixedMenuPosition,
+            "ft-select--in-error": this.error
         };
         return html `
             <div class="${classMap(classes)}" part="container">
@@ -86,6 +91,7 @@ export class FtSelect extends FtLitElement {
                                     ?disabled=${disabled}
                                     ?outlined=${this.outlined}
                                     ?raised=${hasOptionSelected || optionsDisplayed}
+                                    ?error=${this.error}
                     ></ft-input-label>
                     <div class="ft-select--input-panel"
                          part="selected-value"
@@ -148,6 +154,16 @@ export class FtSelect extends FtLitElement {
             this.optionsDisplayed = false;
             this.dispatchEvent(new CustomEvent("change", { detail: (_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value }));
         }
+        if (props.has("optionsDisplayed")) {
+            if (this.fixedMenuPosition && this.hasOptionsMenuOpen) {
+                this.positionOptionsMenu();
+            }
+        }
+    }
+    positionOptionsMenu() {
+        this.optionsMenu.style.top = this.mainPanel.getBoundingClientRect().top + this.mainPanel.getBoundingClientRect().height + "px";
+        this.optionsMenu.style.left = this.mainPanel.getBoundingClientRect().left + "px";
+        this.optionsMenu.style.minWidth = this.mainPanel.getBoundingClientRect().width + "px";
     }
     contentAvailableCallback(props) {
         var _a, _b;
@@ -156,6 +172,9 @@ export class FtSelect extends FtLitElement {
             this.focusOptions = false;
         }
     }
+    get hasOptionsMenuOpen() {
+        return !this.disabled && this.optionsDisplayed && this.hasOptions;
+    }
     get hasOptions() {
         return this.options.length > 0;
     }
@@ -282,6 +301,11 @@ FtSelect.styles = [
                 ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, "0.04")};
             }
 
+            .ft-select--input-panel > *:not(ft-ripple),
+            .ft-select--option > *:not(ft-ripple) {
+                position: relative;
+            }
+
             .ft-select--disabled .ft-select--input-panel,
             .ft-select--disabled .ft-select--option {
                 color: ${FtSelectCssVariables.colorOnSurfaceDisabled};
@@ -318,6 +342,10 @@ FtSelect.styles = [
                 ${setVariable(FtTypographyBody1CssVariables.lineHeight, FtSelectCssVariables.selectedOptionSize)};
             }
 
+            .ft-select--in-error .ft-select--selected-option {
+                color: ${FtSelectCssVariables.colorError};
+            }
+
             ft-icon {
                 flex-shrink: 0;
             }
@@ -351,6 +379,12 @@ FtSelect.styles = [
                 box-shadow: ${FtSelectCssVariables.elevation02};
             }
 
+            .ft-select--fixed .ft-select--options {
+                position: fixed;
+                right: unset;
+                /* left and top are set dynamically */
+            }
+
             .ft-select--options-displayed .ft-select--options {
                 display: block;
             }
@@ -367,6 +401,10 @@ FtSelect.styles = [
                 padding: 0 12px 0 16px;
                 color: ${FtSelectCssVariables.helperColor};
             }
+
+            .ft-select--in-error .ft-select--helper-text {
+                color: ${FtSelectCssVariables.colorError};
+            }
         `
 ];
 __decorate([
@@ -381,6 +419,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FtSelect.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSelect.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSelect.prototype, "fixedMenuPosition", void 0);
 __decorate([
     property({ type: Array })
 ], FtSelect.prototype, "options", void 0);
@@ -396,6 +440,9 @@ __decorate([
 __decorate([
     query(".ft-select")
 ], FtSelect.prototype, "container", void 0);
+__decorate([
+    query(".ft-select--options")
+], FtSelect.prototype, "optionsMenu", void 0);
 __decorate([
     query(".ft-select--input-panel")
 ], FtSelect.prototype, "mainPanel", void 0);