@fluid-topics/ft-text-area 0.1.17 → 0.1.18

package/build/ft-text-area.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { css, html } from "lit";
 import { property, query, state } from "lit/decorators.js";
 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";
 import { FtResizer } from "@fluid-topics/ft-resizer";
 import { FtInputLabel, FtInputLabelCssVariables } from "@fluid-topics/ft-input-label";
@@ -23,7 +23,7 @@ export const FtTextAreaCssVariables = {
     colorOnSurfaceDisabled: FtCssVariable.external(designSystemVariables.colorOnSurfaceDisabled, "Design system"),
     borderRadiusS: FtCssVariable.external(designSystemVariables.borderRadiusS, "Design system"),
 };
-let FtTextArea = class FtTextArea extends FtLitElement {
+export class FtTextArea extends FtLitElement {
     constructor() {
         super(...arguments);
         this.label = "";
@@ -34,110 +34,7 @@ let FtTextArea = class FtTextArea extends FtLitElement {
         this.height = 50;
         this.focused = false;
     }
-    // language=CSS
-    getStyles() {
-        return [
-            FtTypographyBody1,
-            css `
-                *:focus {
-                    outline: none;
-                }
-
-                .ft-text-area {
-                    display: flex;
-                    flex-direction: column;
-                    align-items: stretch;
-                }
-
-                ft-input-label {
-                    ${setVariable(FtInputLabelCssVariables.fontSize, FtTextAreaCssVariables.fontSize)};
-                    ${setVariable(FtInputLabelCssVariables.raisedFontSize, FtTextAreaCssVariables.labelSize)};
-                    ${setVariable(FtInputLabelCssVariables.verticalSpacing, FtTextAreaCssVariables.verticalSpacing)};
-                    ${setVariable(FtInputLabelCssVariables.horizontalSpacing, css `calc(${FtTextAreaCssVariables.horizontalSpacing} - 4px)`)};
-                }
-
-                .ft-text-area--main-panel {
-                    position: relative;
-                    display: flex;
-                    height: calc(4 * ${FtTextAreaCssVariables.verticalSpacing} + ${FtTextAreaCssVariables.labelSize} + ${FtTextAreaCssVariables.fontSize} + ${this.height}px);
-                }
-
-                .ft-text-area--input-panel {
-                    flex-grow: 1;
-                    position: relative;
-                    display: flex;
-                    align-items: center;
-                    overflow: hidden;
-                    gap: 8px;
-                }
-
-                .ft-text-area--input-panel ft-ripple {
-                    ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, "0.08")};
-                    ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceDragged, "0.04")};
-                }
-
-                .ft-text-area--input {
-                    display: block;
-                    flex-grow: 1;
-                    flex-shrink: 1;
-                    min-width: 0; /* flex sets this to auto an prevents input from shrinking properly */
-                    align-self: stretch;
-                    resize: none;
-
-                    ${setVariable(FtTypographyBody1CssVariables.fontSize, FtTextAreaCssVariables.fontSize)};
-                    ${setVariable(FtTypographyBody1CssVariables.lineHeight, FtTextAreaCssVariables.fontSize)};
-                    color: ${FtTextAreaCssVariables.colorOnSurface};
-
-                    padding: 0 ${FtTextAreaCssVariables.horizontalSpacing};
-                    margin: calc(${FtTextAreaCssVariables.verticalSpacing} + ${FtTextAreaCssVariables.labelSize} / 2) 0 ${FtTextAreaCssVariables.verticalSpacing} 0;
-
-                    border: none;
-                    background: none;
-
-                    line-height: 1.4;
-                }
-
-                .ft-text-area--disabled .ft-text-area--input {
-                    color: ${FtTextAreaCssVariables.colorOnSurfaceDisabled};
-                }
-
-                .ft-text-area:not(.ft-text-area--disabled) .ft-text-area--input-panel {
-                    cursor: pointer;
-                }
-
-                .ft-text-area:not(.ft-text-area--disabled):focus-within ft-input-label {
-                    ${setVariable(FtInputLabelCssVariables.borderColor, FtTextAreaCssVariables.colorPrimary)};
-                    ${setVariable(FtInputLabelCssVariables.textColor, FtTextAreaCssVariables.colorPrimary)};
-                }
-
-                .ft-text-area--filled .ft-text-area--input-panel {
-                    border-radius: ${FtTextAreaCssVariables.borderRadiusS} ${FtTextAreaCssVariables.borderRadiusS} 0 0;
-                }
-
-                .ft-text-area--filled:not(.ft-text-area--no-label) .ft-text-area--input {
-                    align-self: stretch;
-                    margin-bottom: ${FtTextAreaCssVariables.verticalSpacing};
-                    margin-top: calc(${FtTextAreaCssVariables.labelSize} + 2 * ${FtTextAreaCssVariables.verticalSpacing});
-                }
-
-                .ft-text-area--outlined .ft-text-area--input-panel {
-                    border-radius: ${FtTextAreaCssVariables.borderRadiusS};
-                }
-
-                .ft-text-area--helper-text {
-                    padding: 0 12px 0 ${FtTextAreaCssVariables.horizontalSpacing};
-                    color: ${FtTextAreaCssVariables.helperColor};
-                }
-
-                ft-resizer {
-                    position: absolute;
-                    right: 0;
-                    bottom: 0;
-                }
-            `
-        ];
-    }
-    getTemplate() {
+    render() {
         const classes = {
             "ft-text-area": true,
             "ft-text-area--filled": !this.outlined,
@@ -147,6 +44,11 @@ let FtTextArea = class FtTextArea extends FtLitElement {
             "ft-text-area--no-label": !this.label
         };
         return html `
+            <style>
+                .ft-text-area--main-panel {
+                    height: calc(4 * ${FtTextAreaCssVariables.verticalSpacing} + ${FtTextAreaCssVariables.labelSize} + ${FtTextAreaCssVariables.fontSize} + ${this.height}px);
+                }
+            </style>
             <div class="${classMap(classes)}">
                 <div class="ft-text-area--main-panel">
                     <ft-input-label text="${this.label}"
@@ -203,13 +105,113 @@ let FtTextArea = class FtTextArea extends FtLitElement {
             this.height = event.detail.height;
         }
     }
-};
+}
 FtTextArea.elementDefinitions = {
     "ft-input-label": FtInputLabel,
     "ft-resizer": FtResizer,
     "ft-ripple": FtRipple,
     "ft-typography": FtTypography,
 };
+// language=CSS
+FtTextArea.styles = [
+    FtTypographyBody1,
+    css `
+            *:focus {
+                outline: none;
+            }
+
+            .ft-text-area {
+                display: flex;
+                flex-direction: column;
+                align-items: stretch;
+            }
+
+            ft-input-label {
+                ${setVariable(FtInputLabelCssVariables.fontSize, FtTextAreaCssVariables.fontSize)};
+                ${setVariable(FtInputLabelCssVariables.raisedFontSize, FtTextAreaCssVariables.labelSize)};
+                ${setVariable(FtInputLabelCssVariables.verticalSpacing, FtTextAreaCssVariables.verticalSpacing)};
+                ${setVariable(FtInputLabelCssVariables.horizontalSpacing, css `calc(${FtTextAreaCssVariables.horizontalSpacing} - 4px)`)};
+            }
+
+            .ft-text-area--main-panel {
+                position: relative;
+                display: flex;
+            }
+
+            .ft-text-area--input-panel {
+                flex-grow: 1;
+                position: relative;
+                display: flex;
+                align-items: center;
+                overflow: hidden;
+                gap: 8px;
+            }
+
+            .ft-text-area--input-panel ft-ripple {
+                ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, "0.08")};
+                ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, "0.04")};
+            }
+
+            .ft-text-area--input {
+                display: block;
+                flex-grow: 1;
+                flex-shrink: 1;
+                min-width: 0; /* flex sets this to auto an prevents input from shrinking properly */
+                align-self: stretch;
+                resize: none;
+
+                ${setVariable(FtTypographyBody1CssVariables.fontSize, FtTextAreaCssVariables.fontSize)};
+                ${setVariable(FtTypographyBody1CssVariables.lineHeight, FtTextAreaCssVariables.fontSize)};
+                color: ${FtTextAreaCssVariables.colorOnSurface};
+
+                padding: 0 ${FtTextAreaCssVariables.horizontalSpacing};
+                margin: calc(${FtTextAreaCssVariables.verticalSpacing} + ${FtTextAreaCssVariables.labelSize} / 2) 0 ${FtTextAreaCssVariables.verticalSpacing} 0;
+
+                border: none;
+                background: none;
+
+                line-height: 1.4;
+            }
+
+            .ft-text-area--disabled .ft-text-area--input {
+                color: ${FtTextAreaCssVariables.colorOnSurfaceDisabled};
+            }
+
+            .ft-text-area:not(.ft-text-area--disabled) .ft-text-area--input-panel {
+                cursor: pointer;
+            }
+
+            .ft-text-area:not(.ft-text-area--disabled):focus-within ft-input-label {
+                ${setVariable(FtInputLabelCssVariables.borderColor, FtTextAreaCssVariables.colorPrimary)};
+                ${setVariable(FtInputLabelCssVariables.textColor, FtTextAreaCssVariables.colorPrimary)};
+            }
+
+            .ft-text-area--filled .ft-text-area--input-panel {
+                border-radius: ${FtTextAreaCssVariables.borderRadiusS} ${FtTextAreaCssVariables.borderRadiusS} 0 0;
+            }
+
+            .ft-text-area--filled:not(.ft-text-area--no-label) .ft-text-area--input {
+                align-self: stretch;
+                margin-bottom: ${FtTextAreaCssVariables.verticalSpacing};
+                margin-top: calc(${FtTextAreaCssVariables.labelSize} + 2 * ${FtTextAreaCssVariables.verticalSpacing});
+            }
+
+            .ft-text-area--outlined .ft-text-area--input-panel {
+                border-radius: ${FtTextAreaCssVariables.borderRadiusS};
+            }
+
+            .ft-text-area--helper-text {
+                padding: 0 12px 0 ${FtTextAreaCssVariables.horizontalSpacing};
+                color: ${FtTextAreaCssVariables.helperColor};
+            }
+
+            ft-resizer {
+                position: absolute;
+                right: 0;
+                bottom: 0;
+            }
+        `
+];
 __decorate([
     property({ type: String })
 ], FtTextArea.prototype, "label", void 0);
@@ -234,8 +236,4 @@ __decorate([
 __decorate([
     state()
 ], FtTextArea.prototype, "focused", void 0);
-FtTextArea = __decorate([
-    customElement("ft-text-area")
-], FtTextArea);
-export { FtTextArea };
 //# sourceMappingURL=ft-text-area.js.map