@fluid-topics/ft-text-field - npm Package Compare versions

Comparing version 0.1.17 to 0.1.18

build/ft-text-field.d.ts

@@ -24,3 +24,3 @@ import { PropertyValues } from "lit";
     static elementDefinitions: ElementDefinitionsMap;
-    protected getStyles(): import("lit").CSSResult[];
+    static styles: import("lit").CSSResult[];
     label: string;
@@ -34,3 +34,3 @@ value: string;
     private focused;
-    protected getTemplate(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
     protected updated(props: PropertyValues): void;
@@ -37,0 +37,0 @@ private updateValueFromInputField;

build/ft-text-field.js

@@ -10,3 +10,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { classMap } from "lit/directives/class-map.js";
-import { customElement, designSystemVariables, FtCssVariable, FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
+import { designSystemVariables, FtCssVariable, FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
 import { FtTypography, FtTypographyBody1, FtTypographyBody1CssVariables } from "@fluid-topics/ft-typography";
@@ -26,3 +26,3 @@ import { FtInputLabel, FtInputLabelCssVariables } from "@fluid-topics/ft-input-label";
 };
-let FtTextField = class FtTextField extends FtLitElement {
+export class FtTextField extends FtLitElement {
     constructor() {
@@ -38,100 +38,3 @@ super(...arguments);
     }
-    // language=CSS
-    getStyles() {
-        return [
-            FtTypographyBody1,
-            css `
-                *:focus {
-                    outline: none;
-                }
-
-                .ft-text-field {
-                    display: flex;
-                    flex-direction: column;
-                    align-items: stretch;
-                }
-
-                ft-input-label {
-                    ${setVariable(FtInputLabelCssVariables.fontSize, FtTextFieldCssVariables.fontSize)};
-                    ${setVariable(FtInputLabelCssVariables.raisedFontSize, FtTextFieldCssVariables.labelSize)};
-                    ${setVariable(FtInputLabelCssVariables.verticalSpacing, FtTextFieldCssVariables.verticalSpacing)};
-                    ${setVariable(FtInputLabelCssVariables.horizontalSpacing, css `calc(${FtTextFieldCssVariables.horizontalSpacing} - 4px)`)};
-                }
-
-                .ft-text-field--main-panel {
-                    position: relative;
-                    display: flex;
-                    height: calc(4 * ${FtTextFieldCssVariables.verticalSpacing} + ${FtTextFieldCssVariables.labelSize} + ${FtTextFieldCssVariables.fontSize});
-                }
-
-                .ft-text-field--input-panel {
-                    flex-grow: 1;
-                    position: relative;
-                    display: flex;
-                    align-items: center;
-                    overflow: hidden;
-                    gap: 8px;
-                }
-
-                .ft-text-field--input-panel ft-ripple {
-                    ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, "0.08")};
-                    ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceDragged, "0.04")};
-                }
-
-                .ft-text-field--input {
-                    display: block;
-                    flex-grow: 1;
-                    flex-shrink: 1;
-                    min-width: 0; /* flex sets this to auto an prevents input from shrinking properly */
-
-                    ${setVariable(FtTypographyBody1CssVariables.fontSize, FtTextFieldCssVariables.fontSize)};
-                    ${setVariable(FtTypographyBody1CssVariables.lineHeight, FtTextFieldCssVariables.fontSize)};
-                    color: ${FtTextFieldCssVariables.colorOnSurface};
-
-                    padding: 0 ${FtTextFieldCssVariables.horizontalSpacing};
-
-                    border: none;
-                    background: none;
-                }
-
-                .ft-text-field--input::-webkit-calendar-picker-indicator,
-                .ft-text-field--input::-webkit-list-button {
-                    display: none !important;
-                }
-
-                .ft-text-field--disabled .ft-text-field--input {
-                    color: ${FtTextFieldCssVariables.colorOnSurfaceDisabled};
-                }
-
-                .ft-text-field:not(.ft-text-field--disabled) .ft-text-field--input-panel {
-                    cursor: pointer;
-                }
-
-                .ft-text-field:not(.ft-text-field--disabled):focus-within ft-input-label {
-                    ${setVariable(FtInputLabelCssVariables.borderColor, FtTextFieldCssVariables.colorPrimary)};
-                    ${setVariable(FtInputLabelCssVariables.textColor, FtTextFieldCssVariables.colorPrimary)};
-                }
-
-                .ft-text-field--filled .ft-text-field--input-panel {
-                    border-radius: ${FtTextFieldCssVariables.borderRadiusS} ${FtTextFieldCssVariables.borderRadiusS} 0 0;
-                }
-
-                .ft-text-field--filled:not(.ft-text-field--no-label) .ft-text-field--input {
-                    align-self: stretch;
-                    padding-bottom: ${FtTextFieldCssVariables.verticalSpacing};
-                    padding-top: calc(${FtTextFieldCssVariables.labelSize} + 2 * ${FtTextFieldCssVariables.verticalSpacing});
-                }
-
-                .ft-text-field--outlined .ft-text-field--input-panel {
-                    border-radius: ${FtTextFieldCssVariables.borderRadiusS};
-                }
-
-                .ft-text-field--helper-text {
-                    padding: 0 12px 0 ${FtTextFieldCssVariables.horizontalSpacing};
-                    color: ${FtTextFieldCssVariables.helperColor};
-                }
-            `
-        ];
-    }
-    getTemplate() {
+    render() {
         const classes = {
@@ -197,3 +100,3 @@ "ft-text-field": true,
     }
-};
+}
 FtTextField.elementDefinitions = {
@@ -204,2 +107,97 @@ "ft-input-label": FtInputLabel,
 };
+// language=CSS
+FtTextField.styles = [
+    FtTypographyBody1,
+    css `
+            *:focus {
+                outline: none;
+            }
+
+            .ft-text-field {
+                display: flex;
+                flex-direction: column;
+                align-items: stretch;
+            }
+
+            ft-input-label {
+                ${setVariable(FtInputLabelCssVariables.fontSize, FtTextFieldCssVariables.fontSize)};
+                ${setVariable(FtInputLabelCssVariables.raisedFontSize, FtTextFieldCssVariables.labelSize)};
+                ${setVariable(FtInputLabelCssVariables.verticalSpacing, FtTextFieldCssVariables.verticalSpacing)};
+                ${setVariable(FtInputLabelCssVariables.horizontalSpacing, css `calc(${FtTextFieldCssVariables.horizontalSpacing} - 4px)`)};
+            }
+
+            .ft-text-field--main-panel {
+                position: relative;
+                display: flex;
+                height: calc(4 * ${FtTextFieldCssVariables.verticalSpacing} + ${FtTextFieldCssVariables.labelSize} + ${FtTextFieldCssVariables.fontSize});
+            }
+
+            .ft-text-field--input-panel {
+                flex-grow: 1;
+                position: relative;
+                display: flex;
+                align-items: center;
+                overflow: hidden;
+                gap: 8px;
+            }
+
+            .ft-text-field--input-panel ft-ripple {
+                ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, "0.08")};
+                ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, "0.04")};
+            }
+
+            .ft-text-field--input {
+                display: block;
+                flex-grow: 1;
+                flex-shrink: 1;
+                min-width: 0; /* flex sets this to auto an prevents input from shrinking properly */
+
+                ${setVariable(FtTypographyBody1CssVariables.fontSize, FtTextFieldCssVariables.fontSize)};
+                ${setVariable(FtTypographyBody1CssVariables.lineHeight, FtTextFieldCssVariables.fontSize)};
+                color: ${FtTextFieldCssVariables.colorOnSurface};
+
+                padding: 0 ${FtTextFieldCssVariables.horizontalSpacing};
+
+                border: none;
+                background: none;
+            }
+
+            .ft-text-field--input::-webkit-calendar-picker-indicator,
+            .ft-text-field--input::-webkit-list-button {
+                display: none !important;
+            }
+
+            .ft-text-field--disabled .ft-text-field--input {
+                color: ${FtTextFieldCssVariables.colorOnSurfaceDisabled};
+            }
+
+            .ft-text-field:not(.ft-text-field--disabled) .ft-text-field--input-panel {
+                cursor: pointer;
+            }
+
+            .ft-text-field:not(.ft-text-field--disabled):focus-within ft-input-label {
+                ${setVariable(FtInputLabelCssVariables.borderColor, FtTextFieldCssVariables.colorPrimary)};
+                ${setVariable(FtInputLabelCssVariables.textColor, FtTextFieldCssVariables.colorPrimary)};
+            }
+
+            .ft-text-field--filled .ft-text-field--input-panel {
+                border-radius: ${FtTextFieldCssVariables.borderRadiusS} ${FtTextFieldCssVariables.borderRadiusS} 0 0;
+            }
+
+            .ft-text-field--filled:not(.ft-text-field--no-label) .ft-text-field--input {
+                align-self: stretch;
+                padding-bottom: ${FtTextFieldCssVariables.verticalSpacing};
+                padding-top: calc(${FtTextFieldCssVariables.labelSize} + 2 * ${FtTextFieldCssVariables.verticalSpacing});
+            }
+
+            .ft-text-field--outlined .ft-text-field--input-panel {
+                border-radius: ${FtTextFieldCssVariables.borderRadiusS};
+            }
+
+            .ft-text-field--helper-text {
+                padding: 0 12px 0 ${FtTextFieldCssVariables.horizontalSpacing};
+                color: ${FtTextFieldCssVariables.helperColor};
+            }
+        `
+];
 __decorate([
@@ -229,6 +227,2 @@ property({ type: String })
 ], FtTextField.prototype, "focused", void 0);
-FtTextField = __decorate([
-    customElement("ft-text-field")
-], FtTextField);
-export { FtTextField };
 //# sourceMappingURL=ft-text-field.js.map

package.json

 {
   "name": "@fluid-topics/ft-text-field",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "description": "A fluidtopics text field",
@@ -10,5 +10,5 @@ "keywords": [
   "license": "ISC",
-  "main": "build/ft-text-field.js",
+  "main": "build/index.js",
   "web": "build/ft-text-field.min.js",
-  "typings": "build/ft-text-field",
+  "typings": "build/index",
   "files": [
@@ -23,9 +23,9 @@ "build/*.ts",
   "dependencies": {
-    "@fluid-topics/ft-input-label": "^0.1.17",
-    "@fluid-topics/ft-ripple": "^0.1.17",
-    "@fluid-topics/ft-typography": "^0.1.17",
-    "@fluid-topics/ft-wc-utils": "^0.1.17",
+    "@fluid-topics/ft-input-label": "^0.1.18",
+    "@fluid-topics/ft-ripple": "^0.1.18",
+    "@fluid-topics/ft-typography": "^0.1.18",
+    "@fluid-topics/ft-wc-utils": "^0.1.18",
     "lit": "2.1.3"
   },
-  "gitHead": "59fc7ad4bb79bb7a36b5edc8217d1279abf471f3"
+  "gitHead": "cb05ea190a9302378594a08d3a62a7002e461433"
 }

README.md

@@ -6,3 +6,3 @@ A text field input component.
 ```shell
-npm install @fluid-topics/ft-switch
+npm install @fluid-topics/ft-text-field
 yarn add @fluid-topics/ft-text-field
@@ -15,12 +15,13 @@ ```
 import {html} from "lit"
-import "@fluid-topics/ft-switch"
-import {FtSwitchChange} from "@fluid-topics/ft-switch";
+import "@fluid-topics/ft-text-field"
 
 function render() {
     return html` 
-            <ft-switch @change=${(e: FtSwitchChange) => console.log("Value changed:", e.detail)}>
-                <ft-switch-option value="1">1</ft-switch-option>
-                <ft-switch-option value="2">2</ft-switch-option>
-            </ft-switch>     `
+            <ft-text-field label="Label"
+                          value="Value"
+                          @change=${(e: CustomEvent) => console.log("Value changed:", e.detail)}
+                          @live-change=${(e: CustomEvent) => console.log("Value live changed:", e.detail)}>
+            </ft-text-field>
+           `
 }
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

11

increased by83.33%

Lines of code

2053

increased by15.73%

Number of lines in readme file

26

increased by4%

Worsened metrics

Total package byte prevSize

184371

decreased by-1.53%

Dependency changes

• Updated@fluid-topics/ft-input-label@^0.1.18

• Updated@fluid-topics/ft-ripple@^0.1.18

• Updated@fluid-topics/ft-typography@^0.1.18

• Updated@fluid-topics/ft-wc-utils@^0.1.18