@fluid-topics/ft-select 0.1.0 → 0.1.3

package/README.md

@@ -1,4 +1,4 @@
-Value selector for a predefined list of choices
+A selector for a predefined list of choices.
 
 ## Install
 

package/build/ft-select.d.ts

@@ -1,5 +1,5 @@
 import { PropertyValues } from "lit";
-import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { ElementDefinitionsMap, FtCssVariable, FtLitElement } from "@fluid-topics/ft-wc-utils";
 export interface FtSelectOptionProperties {
     label?: string;
     value?: any;
@@ -21,12 +21,19 @@ export interface FtSelectProperties {
     options?: Array<FtSelectOptionProperties>;
     selectedOption?: FtSelectOptionProperties;
 }
-export interface FtSelectCssVariables {
-    "--ft-select-label-size"?: string;
-    "--ft-select-selected-option-size"?: string;
-    "--ft-select-vertical-spacing"?: string;
-    "--ft-select-helper-color"?: string;
-}
+export declare const FtSelectCssVariables: {
+    labelSize: FtCssVariable;
+    selectedOptionSize: FtCssVariable;
+    verticalSpacing: FtCssVariable;
+    helperColor: FtCssVariable;
+    optionsZIndex: FtCssVariable;
+    colorSurface: FtCssVariable;
+    colorOnSurface: FtCssVariable;
+    colorOnSurfaceDisabled: FtCssVariable;
+    colorPrimary: FtCssVariable;
+    borderRadiusS: FtCssVariable;
+    elevation02: FtCssVariable;
+};
 export declare class FtSelect extends FtLitElement implements FtSelectProperties {
     static elementDefinitions: ElementDefinitionsMap;
     protected getStyles(): import("lit").CSSResult[];
@@ -38,6 +45,7 @@ export declare class FtSelect extends FtLitElement implements FtSelectProperties
     selectedOption?: FtSelectOptionProperties;
     private optionsDisplayed;
     private focusOptions;
+    private container?;
     private mainPanel?;
     private firstOption?;
     private focusedOption?;

package/build/ft-select.js

@@ -8,9 +8,9 @@ import { css, html } 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 { customElement, FtLitElement } from "@fluid-topics/ft-wc-utils";
-import { FtTypography, FtTypographyBody2, FtTypographyCaption } from "@fluid-topics/ft-typography";
-import { FtInputLabel } from "@fluid-topics/ft-input-label";
+import { customElement, designSystemVariables, FtCssVariable, FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtTypography, FtTypographyBody1CssVariables, FtTypographyBody2, FtTypographyCaption } from "@fluid-topics/ft-typography";
+import { FtInputLabel, FtInputLabelCssVariables } from "@fluid-topics/ft-input-label";
 import { FtRipple } from "@fluid-topics/ft-ripple";
 import { Icon } from "@material/mwc-icon";
 let FtSelectOption = class FtSelectOption extends FtLitElement {
@@ -42,6 +42,19 @@ FtSelectOption = __decorate([
     customElement("ft-select-option")
 ], FtSelectOption);
 export { FtSelectOption };
+export const FtSelectCssVariables = {
+    labelSize: FtCssVariable.create("--ft-select-label-size", "SIZE", "11px"),
+    selectedOptionSize: FtCssVariable.create("--ft-select-selected-option-size", "SIZE", "14px"),
+    verticalSpacing: FtCssVariable.create("--ft-select-vertical-spacing", "SIZE", "4px"),
+    helperColor: FtCssVariable.extend("--ft-select-helper-color", designSystemVariables.colorOnSurfaceMedium),
+    optionsZIndex: FtCssVariable.create("--ft-select-options-z-index", "NUMBER", "2"),
+    colorSurface: FtCssVariable.external(designSystemVariables.colorSurface, "Design system"),
+    colorOnSurface: FtCssVariable.external(designSystemVariables.colorOnSurface, "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"),
+};
 let FtSelect = class FtSelect extends FtLitElement {
     constructor() {
         super(...arguments);
@@ -52,7 +65,7 @@ let FtSelect = class FtSelect extends FtLitElement {
         this.options = [];
         this.optionsDisplayed = false;
         this.focusOptions = false;
-        this.hideOptions = () => this.optionsDisplayed = false;
+        this.hideOptions = (e) => this.optionsDisplayed = this.optionsDisplayed && e.composedPath().includes(this.container);
     }
     // language=CSS
     getStyles() {
@@ -73,7 +86,7 @@ let FtSelect = class FtSelect extends FtLitElement {
                 .ft-select--main-panel {
                     position: relative;
                     display: flex;
-                    height: calc(4 * var(--ft-select-vertical-spacing, 4px) + var(--ft-select-label-size, 11px) + var(--ft-select-selected-option-size, 14px));
+                    height: calc(4 * ${FtSelectCssVariables.verticalSpacing} + ${FtSelectCssVariables.labelSize} + ${FtSelectCssVariables.selectedOptionSize});
                 }
 
                 .ft-select--input-panel {
@@ -89,14 +102,14 @@ let FtSelect = class FtSelect extends FtLitElement {
 
                 .ft-select--input-panel,
                 .ft-select--option {
-                    color: var(--ft-color-on-surface, rgba(0, 0, 0, 0.87));
+                    color: ${FtSelectCssVariables.colorOnSurface};
                     --ft-opacity-color-content-on-surface-hover: 0.08;
                     --ft-opacity-color-content-on-surface-dragged: 0.04;
                 }
 
                 .ft-select--disabled .ft-select--input-panel,
                 .ft-select--disabled .ft-select--option {
-                    color: var(--ft-color-on-surface-disabled, rgba(0, 0, 0, 0.38));
+                    color: ${FtSelectCssVariables.colorOnSurfaceDisabled};
                 }
 
                 .ft-select:not(.ft-select--disabled) .ft-select--input-panel {
@@ -104,14 +117,18 @@ let FtSelect = class FtSelect extends FtLitElement {
                 }
 
                 ft-input-label {
-                    --ft-input-label-font-size: var(--ft-select-selected-option-size, 14px);
-                    --ft-input-label-raised-font-size: var(--ft-select-label-size, 11px);
-                    --ft-input-label-vertical-spacing: var(--ft-select-vertical-spacing, 4px);
+                    ${setVariable(FtInputLabelCssVariables.fontSize, FtSelectCssVariables.selectedOptionSize)};
+                    ${setVariable(FtInputLabelCssVariables.raisedFontSize, FtSelectCssVariables.labelSize)};
+                    ${setVariable(FtInputLabelCssVariables.verticalSpacing, FtSelectCssVariables.verticalSpacing)};
+                }
+
+                .ft-select:not(.ft-select--disabled):focus-within mwc-icon {
+                    color: ${FtSelectCssVariables.colorPrimary};
                 }
 
                 .ft-select:not(.ft-select--disabled):focus-within ft-input-label {
-                    --ft-input-label-border-color: var(--ft-color-primary, #2196F3);
-                    --ft-input-label-text-color: var(--ft-color-primary, #2196F3);
+                    ${setVariable(FtInputLabelCssVariables.borderColor, FtSelectCssVariables.colorPrimary)};
+                    ${setVariable(FtInputLabelCssVariables.textColor, FtSelectCssVariables.colorPrimary)};
                 }
 
                 .ft-select--selected-option {
@@ -121,8 +138,8 @@ let FtSelect = class FtSelect extends FtLitElement {
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
-                    --ft-typography-font-size: var(--ft-select-selected-option-size, 14px);
-                    --ft-typography-line-height: var(--ft-select-selected-option-size, 14px);
+                    ${setVariable(FtTypographyBody1CssVariables.fontSize, FtSelectCssVariables.selectedOptionSize)};
+                    ${setVariable(FtTypographyBody1CssVariables.lineHeight, FtSelectCssVariables.selectedOptionSize)};
                 }
 
                 mwc-icon {
@@ -134,16 +151,16 @@ let FtSelect = class FtSelect extends FtLitElement {
                 }
 
                 .ft-select--filled .ft-select--input-panel {
-                    border-radius: var(--ft-border-radius-S, 4px) var(--ft-border-radius-S, 4px) 0 0;
+                    border-radius: ${FtSelectCssVariables.borderRadiusS} ${FtSelectCssVariables.borderRadiusS} 0 0;
                 }
 
                 .ft-select--filled:not(.ft-select--no-label) .ft-select--selected-option {
                     align-self: stretch;
-                    padding-top: calc(var(--ft-select-label-size, 11px) + 2 * var(--ft-select-vertical-spacing, 4px));
+                    padding-top: calc(${FtSelectCssVariables.labelSize} + 2 * ${FtSelectCssVariables.verticalSpacing});
                 }
 
                 .ft-select--outlined .ft-select--input-panel {
-                    border-radius: var(--ft-border-radius-S, 4px);
+                    border-radius: ${FtSelectCssVariables.borderRadiusS};
                 }
 
                 .ft-select--options {
@@ -152,9 +169,9 @@ let FtSelect = class FtSelect extends FtLitElement {
                     top: 100%;
                     left: 0;
                     right: 0;
-                    background: var(--ft-color-surface, #FFFFFF);
-                    z-index: var(--ft-select-options-z-index, 1);
-                    box-shadow: var(--ft-elevation-02, 0px 4px 10px 0px rgba(0, 0, 0, 0.06), 0px 2px 5px 0px rgba(0, 0, 0, 0.14), 0px 0px 1px 0px rgba(0, 0, 0, 0.06));
+                    background: ${FtSelectCssVariables.colorSurface};
+                    z-index: ${FtSelectCssVariables.optionsZIndex};
+                    box-shadow: ${FtSelectCssVariables.elevation02};
                 }
 
                 .ft-select--options-displayed .ft-select--options {
@@ -171,7 +188,7 @@ let FtSelect = class FtSelect extends FtLitElement {
 
                 .ft-select--helper-text {
                     padding: 0 12px 0 16px;
-                    color: var(--ft-select-helper-color, var(--ft-color-on-surface-medium, rgba(0, 0, 0, 0.60)));
+                    color: ${FtSelectCssVariables.helperColor};
                 }
             `
         ];
@@ -190,7 +207,7 @@ let FtSelect = class FtSelect extends FtLitElement {
             "ft-select--no-label": !this.label
         };
         return html `
-            <div class="${classMap(classes)}" @click=${(e) => e.stopPropagation()} part="container">
+            <div class="${classMap(classes)}" part="container">
                 <div class="ft-select--main-panel" part="main-panel">
                     <ft-input-label text="${this.label}"
                                     part="label"
@@ -376,6 +393,9 @@ __decorate([
 __decorate([
     state()
 ], FtSelect.prototype, "focusOptions", void 0);
+__decorate([
+    query(".ft-select")
+], FtSelect.prototype, "container", void 0);
 __decorate([
     query(".ft-select--input-panel")
 ], FtSelect.prototype, "mainPanel", void 0);