@fluid-topics/ft-number-field 1.1.19

package/README.md

@@ -0,0 +1,19 @@
+A number field input component.
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-number-field
+yarn add @fluid-topics/ft-number-field
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-number-field"
+
+function render() {
+    return html` <ft-number-field foo="bar"></ft-number-field> `
+}
+```

package/build/ft-number-field.css.d.ts

@@ -0,0 +1,13 @@
+export declare const FtNumberFieldCssVariables: {
+    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;
+    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;
+    colorSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorOutline: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const styles: import("lit").CSSResult;

package/build/ft-number-field.css.js

@@ -0,0 +1,108 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtTypographyBody1CssVariables } from "@fluid-topics/ft-typography/build/ft-typography.css";
+import { FtInputLabelCssVariables } from "@fluid-topics/ft-input-label/build/ft-input-label.css";
+import { FtRippleCssVariables } from "@fluid-topics/ft-ripple/build/ft-ripple.css";
+export const FtNumberFieldCssVariables = {
+    fontSize: FtCssVariableFactory.create("--ft-number-field-font-size", "", "SIZE", "14px"),
+    labelSize: FtCssVariableFactory.create("--ft-number-field-label-size", "", "SIZE", "11px"),
+    verticalSpacing: FtCssVariableFactory.create("--ft-number-field-vertical-spacing", "", "SIZE", "4px"),
+    horizontalSpacing: FtCssVariableFactory.create("--ft-number-field-horizontal-spacing", "", "SIZE", "16px"),
+    colorPrimary: FtCssVariableFactory.external(designSystemVariables.colorPrimary, "Design system"),
+    colorOnSurface: FtCssVariableFactory.external(designSystemVariables.colorOnSurface, "Design system"),
+    colorOnSurfaceDisabled: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceDisabled, "Design system"),
+    borderRadiusS: FtCssVariableFactory.external(designSystemVariables.borderRadiusS, "Design system"),
+    colorSurface: FtCssVariableFactory.external(designSystemVariables.colorSurface, "Design system"),
+    colorOutline: FtCssVariableFactory.external(designSystemVariables.colorOutline, "Design system"),
+};
+// language=CSS
+export const styles = css `
+    *:focus {
+        outline: none;
+    }
+
+    .ft-number-field {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        position: relative;
+    }
+
+    ft-input-label {
+        ${setVariable(FtInputLabelCssVariables.fontSize, FtNumberFieldCssVariables.fontSize)};
+        ${setVariable(FtInputLabelCssVariables.raisedFontSize, FtNumberFieldCssVariables.labelSize)};
+        ${setVariable(FtInputLabelCssVariables.verticalSpacing, FtNumberFieldCssVariables.verticalSpacing)};
+        ${setVariable(FtInputLabelCssVariables.horizontalSpacing, FtNumberFieldCssVariables.horizontalSpacing)};
+    }
+
+    .ft-number-field--main-panel {
+        position: relative;
+        display: flex;
+        height: calc(4 * ${FtNumberFieldCssVariables.verticalSpacing} + ${FtNumberFieldCssVariables.labelSize} + ${FtNumberFieldCssVariables.fontSize});
+    }
+
+    .ft-number-field--input-panel {
+        flex-grow: 1;
+        position: relative;
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        padding: 0 ${FtNumberFieldCssVariables.horizontalSpacing};
+
+        ${setVariable(FtTypographyBody1CssVariables.fontSize, FtNumberFieldCssVariables.fontSize)};
+        ${setVariable(FtTypographyBody1CssVariables.lineHeight, FtNumberFieldCssVariables.fontSize)};
+    }
+
+    .ft-number-field--input-panel ft-ripple {
+        ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, "0.08")};
+        ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, "0.04")};
+    }
+
+    .ft-number-field--filled.ft-number-field--with-label .ft-number-field--input-panel {
+        align-items: flex-end;
+        padding: 0 ${FtNumberFieldCssVariables.horizontalSpacing} ${FtNumberFieldCssVariables.verticalSpacing} ${FtNumberFieldCssVariables.horizontalSpacing};
+    }
+
+    .ft-number-field--input {
+        display: block;
+        position: relative;
+        flex-grow: 1;
+        flex-shrink: 1;
+        min-width: 0; /* flex sets this to auto an prevents input from shrinking properly */
+
+        color: ${FtNumberFieldCssVariables.colorOnSurface};
+        padding: calc(2 * ${FtNumberFieldCssVariables.verticalSpacing}) 0;
+        border: none;
+        background: none;
+
+        -moz-appearance: textfield;
+    }
+
+    .ft-number-field--filled.ft-number-field--with-label .ft-number-field--input {
+        padding-bottom: 0;
+        padding-top: calc(${FtNumberFieldCssVariables.labelSize} + 2 * ${FtNumberFieldCssVariables.verticalSpacing});
+    }
+
+    .ft-number-field--disabled .ft-number-field--input {
+        color: ${FtNumberFieldCssVariables.colorOnSurfaceDisabled};
+    }
+
+    .ft-number-field:not(.ft-number-field--disabled):focus-within ft-input-label {
+        ${setVariable(FtInputLabelCssVariables.borderColor, FtNumberFieldCssVariables.colorPrimary)};
+        ${setVariable(FtInputLabelCssVariables.textColor, FtNumberFieldCssVariables.colorPrimary)};
+    }
+
+    .ft-number-field--filled .ft-number-field--input-panel {
+        border-radius: ${FtNumberFieldCssVariables.borderRadiusS} ${FtNumberFieldCssVariables.borderRadiusS} 0 0;
+    }
+
+    .ft-number-field--outlined .ft-number-field--input-panel {
+        border-radius: ${FtNumberFieldCssVariables.borderRadiusS};
+    }
+
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+`;

package/build/ft-number-field.d.ts

@@ -0,0 +1,24 @@
+import { PropertyValues } from "lit";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtNumberFieldProperties } from "./ft-number-field.properties";
+export declare class FtNumberField extends FtLitElement implements FtNumberFieldProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    label?: string;
+    value?: number;
+    outlined: boolean;
+    disabled: boolean;
+    min?: number;
+    max?: number;
+    focused: boolean;
+    input?: HTMLInputElement;
+    mainPanel?: HTMLElement;
+    protected render(): import("lit").TemplateResult<1>;
+    protected update(changedProperties: PropertyValues): void;
+    lowerBound(value: number): number;
+    upperBound(value: number): number;
+    private onChange;
+    private setValue;
+    private onFocus;
+    private onMainPanelBlur;
+}

package/build/ft-number-field.js

@@ -0,0 +1,131 @@
+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 { html, nothing } from "lit";
+import { FtLitElement, optionalNumberProperty } from "@fluid-topics/ft-wc-utils";
+import { styles } from "./ft-number-field.css";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { FtInputLabel } from "@fluid-topics/ft-input-label";
+import { FtRipple } from "@fluid-topics/ft-ripple";
+import { FtTypography } from "@fluid-topics/ft-typography";
+class FtNumberField extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.outlined = false;
+        this.disabled = false;
+        this.focused = false;
+    }
+    render() {
+        const classes = {
+            "ft-number-field": true,
+            "ft-number-field--filled": !this.outlined,
+            "ft-number-field--outlined": this.outlined,
+            "ft-number-field--disabled": this.disabled,
+            "ft-number-field--has-value": this.value != null,
+            "ft-number-field--with-label": !!this.label,
+        };
+        return html `
+            <div class="${classMap(classes)}">
+                <div class="ft-number-field--main-panel"
+                     @focusout=${this.onMainPanelBlur}>
+                    <ft-input-label text="${this.label}"
+                                    ?disabled=${this.disabled}
+                                    ?outlined=${this.outlined}
+                                    ?raised=${this.focused || this.value != null}>
+                    </ft-input-label>
+                    <div class="ft-number-field--input-panel">
+                        ${this.outlined ? nothing : html `
+                            <ft-ripple ?disabled=${this.disabled} activated></ft-ripple>
+                        `}
+                        <input type="number"
+                               .min=${this.min}
+                               .max=${this.max}
+                               aria-label="${this.label}"
+                               class="ft-typography--body1 ft-number-field--input"
+                               part="input"
+                               ?disabled=${this.disabled}
+                               .value=${this.value}
+                               @change=${this.onChange}
+                               @focus=${this.onFocus}
+                        />
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has("max") || changedProperties.has("min")) {
+            this.setValue(this.value);
+        }
+    }
+    lowerBound(value) {
+        return this.min != undefined ? Math.max(this.min, value) : value;
+    }
+    upperBound(value) {
+        return this.max != undefined ? Math.min(this.max, value) : value;
+    }
+    onChange(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.setValue(+event.target.value);
+    }
+    setValue(value) {
+        let oldValue = this.value;
+        this.value = value;
+        let boundedValue = this.value == undefined ? undefined : this.lowerBound(this.upperBound(this.value));
+        setTimeout(() => {
+            this.value = boundedValue;
+            if (oldValue !== boundedValue) {
+                this.dispatchEvent(new CustomEvent("change", { detail: this.value }));
+            }
+        });
+    }
+    onFocus() {
+        this.focused = true;
+    }
+    onMainPanelBlur() {
+        var _a;
+        if (!((_a = this.mainPanel) === null || _a === void 0 ? void 0 : _a.matches(":focus-within"))) {
+            this.focused = false;
+        }
+    }
+}
+FtNumberField.elementDefinitions = {
+    "ft-input-label": FtInputLabel,
+    "ft-ripple": FtRipple,
+    "ft-typography": FtTypography,
+};
+FtNumberField.styles = styles;
+__decorate([
+    property()
+], FtNumberField.prototype, "label", void 0);
+__decorate([
+    optionalNumberProperty()
+], FtNumberField.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtNumberField.prototype, "outlined", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtNumberField.prototype, "disabled", void 0);
+__decorate([
+    optionalNumberProperty()
+], FtNumberField.prototype, "min", void 0);
+__decorate([
+    optionalNumberProperty()
+], FtNumberField.prototype, "max", void 0);
+__decorate([
+    state()
+], FtNumberField.prototype, "focused", void 0);
+__decorate([
+    query(".ft-number-field--input")
+], FtNumberField.prototype, "input", void 0);
+__decorate([
+    query(".ft-number-field--main-panel")
+], FtNumberField.prototype, "mainPanel", void 0);
+export { FtNumberField };