@fluid-topics/ftds-text-area 0.0.0-stage → 2.2.41

package/README.md

@@ -1,3 +1,26 @@
-# Temporary Holding Version
+Design system text-area
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+## Install
+
+```shell
+npm install @fluid-topics/ftds-text-area
+yarn add @fluid-topics/ftds-text-area
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ftds-text-area"
+
+function render() {
+    return html`
+        <ftds-text-area
+            label="Description"
+            value="Some text"
+            helperText="Describe your content in a few words"
+            height="150"
+        ></ftds-text-area>
+    `
+}
+```

package/build/define.d.ts

@@ -0,0 +1 @@
+export {};

package/build/define.js

@@ -0,0 +1,3 @@
+import { customElements } from "@fluid-topics/ft-wc-utils";
+import definitions from "./definitions";
+customElements(definitions);

package/build/definitions.d.ts

@@ -0,0 +1,5 @@
+import { FtdsTextArea } from "./ftds-text-area";
+declare const _default: {
+    "ftds-text-area": typeof FtdsTextArea;
+};
+export default _default;

package/build/definitions.js

@@ -0,0 +1,4 @@
+import { FtdsTextArea } from "./ftds-text-area";
+export default {
+    "ftds-text-area": FtdsTextArea,
+};

package/build/ftds-text-area.d.ts

@@ -0,0 +1,29 @@
+import { PropertyValues } from "lit";
+import { ElementDefinitionsMap, FtdsBase } from "@fluid-topics/ft-wc-utils";
+import { FtdsTextAreaProperties } from "./ftds-text-area.properties";
+declare const FtdsTextArea_base: typeof FtdsBase & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-wc-utils").FtInputInterface<string>> & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
+export declare class FtdsTextArea extends FtdsTextArea_base implements FtdsTextAreaProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult[];
+    height?: number;
+    private fittedHeight;
+    private textarea?;
+    private baseInput?;
+    private scrollbarWidth;
+    private pendingHeightFit;
+    constructor();
+    protected willUpdate(changedProperties: PropertyValues): void;
+    focus(): void;
+    onInput(): void;
+    protected render(): import("lit").TemplateResult<1>;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    protected updated(changedProperties: PropertyValues): void;
+    private get fieldHeight();
+    private measureScrollbar;
+    private get insideStructure();
+    private fitHeightToContent;
+    private clampHeight;
+    private onKeyDown;
+    private onResize;
+}
+export {};

package/build/ftds-text-area.js

@@ -0,0 +1,179 @@
+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, } from "lit";
+import { query, state, } from "lit/decorators.js";
+import { FtdsBase, ignoreComposingEvents, numberProperty, Status, toFtInput, } from "@fluid-topics/ft-wc-utils";
+import { scrollbarWidthCssVariable, styles, } from "./ftds-text-area.styles";
+import { FtdsTypography } from "@fluid-topics/ftds-typography";
+import { FtResizer, } from "@fluid-topics/ft-resizer";
+import { withI18n } from "@fluid-topics/ft-i18n";
+import { DesignSystemSize } from "@fluid-topics/design-system-variables";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { classMap } from "lit/directives/class-map.js";
+import { FtdsBaseInput } from "@fluid-topics/ftds-base-input";
+export class FtdsTextArea extends withI18n(toFtInput(FtdsBase)) {
+    constructor() {
+        var _a;
+        super();
+        this.fittedHeight = 0;
+        this.scrollbarWidth = 0;
+        this.pendingHeightFit = false;
+        this.value = (_a = this.value) !== null && _a !== void 0 ? _a : "";
+    }
+    willUpdate(changedProperties) {
+        var _a;
+        super.willUpdate(changedProperties);
+        this.value = (_a = this.value) !== null && _a !== void 0 ? _a : "";
+    }
+    focus() {
+        var _a;
+        (_a = this.textarea) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    onInput() {
+        var _a;
+        this.value = ((_a = this.textarea) === null || _a === void 0 ? void 0 : _a.value) || "";
+        super.onInput();
+    }
+    render() {
+        return html `
+            <style>
+                ftds-base-input::part(inside-structure) {
+                    height: ${this.fieldHeight}px;
+                }
+            </style>
+            <ftds-base-input
+                .status=${this.status}
+                .size=${DesignSystemSize.large}
+                ?disabled=${this.disabled}
+
+                .errorMessages=${this.errorMessages}
+                .warningMessages=${this.warningMessages}
+                .helperText=${this.helperText}
+
+                .label=${ifDefined(this.label)}
+                ?raiseLabel=${this.focused || !!this.value}
+            >
+                <textarea
+                    class="${classMap({ "ftds-text-area--with-scrollbar": this.scrollbarWidth > 0 })}"
+                    name="${this.name}"
+                    .value=${this.value}
+                    ?disabled=${this.disabled}
+                    @input=${this.onInput}
+                    @focus=${this.onFocus}
+                    @blur=${this.onBlur}
+                    @keydown=${this.onKeyDown}
+                    aria-label="${ifDefined(this.label)}"
+                    aria-invalid="${this.status === Status.error}"
+                    aria-describedby="${this.messagesForScreenReaderElementId}"
+                ></textarea>
+                ${this.renderMessagesForScreenReader()}
+                <ft-resizer
+                    style="${scrollbarWidthCssVariable.set(`${this.scrollbarWidth}px`)}"
+                    @resize=${this.onResize}
+                    @click=${(e) => e.stopPropagation()}
+                    initialHeight="${this.fieldHeight}"
+                    cursor="ns-resize"
+                    ariaLabel="Resize text area">
+                </ft-resizer>
+            </ftds-base-input>
+        `;
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.fitHeightToContent();
+        new ResizeObserver(() => this.measureScrollbar()).observe(this.textarea);
+        new ResizeObserver(() => {
+            if (this.pendingHeightFit) {
+                this.fitHeightToContent();
+            }
+        }).observe(this);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        this.measureScrollbar();
+        if (changedProperties.has("height") || (changedProperties.has("value") && !this.focused && this.height === undefined)) {
+            this.fitHeightToContent();
+        }
+    }
+    get fieldHeight() {
+        var _a;
+        return (_a = this.height) !== null && _a !== void 0 ? _a : this.fittedHeight;
+    }
+    measureScrollbar() {
+        this.scrollbarWidth = this.textarea ? this.textarea.offsetWidth - this.textarea.clientWidth : 0;
+    }
+    get insideStructure() {
+        var _a, _b;
+        return (_b = (_a = this.baseInput) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("[part~=inside-structure]");
+    }
+    async fitHeightToContent() {
+        var _a;
+        await ((_a = this.baseInput) === null || _a === void 0 ? void 0 : _a.updateComplete);
+        const insideStructure = this.insideStructure;
+        if (!insideStructure || !this.textarea) {
+            return;
+        }
+        if (insideStructure.offsetHeight === 0) {
+            // Hidden (e.g. inside a closed modal): fit once visible
+            this.pendingHeightFit = true;
+            return;
+        }
+        this.pendingHeightFit = false;
+        if (this.height !== undefined) {
+            this.height = this.clampHeight(this.height);
+            return;
+        }
+        const containerHeight = insideStructure.offsetHeight - this.textarea.clientHeight;
+        const previousHeight = this.textarea.style.height;
+        this.textarea.style.height = "0px";
+        const contentHeight = this.textarea.scrollHeight;
+        this.textarea.style.height = previousHeight;
+        this.fittedHeight = this.clampHeight(containerHeight + contentHeight);
+    }
+    clampHeight(height) {
+        var _a, _b;
+        const style = this.insideStructure ? getComputedStyle(this.insideStructure) : undefined;
+        const minHeight = parseFloat((_a = style === null || style === void 0 ? void 0 : style.minHeight) !== null && _a !== void 0 ? _a : "") || 0;
+        const maxHeight = parseFloat((_b = style === null || style === void 0 ? void 0 : style.maxHeight) !== null && _b !== void 0 ? _b : "") || Infinity;
+        return Math.min(Math.max(height, minHeight), Math.max(minHeight, maxHeight));
+    }
+    onKeyDown(e) {
+        if (e.key === "Enter" || e.key === " ") {
+            e.stopPropagation();
+        }
+    }
+    onResize(event) {
+        this.height = this.clampHeight(event.detail.height);
+    }
+}
+FtdsTextArea.elementDefinitions = {
+    "ftds-base-input": FtdsBaseInput,
+    "ft-resizer": FtResizer,
+    "ftds-typography": FtdsTypography,
+};
+// language=CSS
+FtdsTextArea.styles = [
+    styles,
+];
+__decorate([
+    numberProperty()
+], FtdsTextArea.prototype, "height", void 0);
+__decorate([
+    state()
+], FtdsTextArea.prototype, "fittedHeight", void 0);
+__decorate([
+    query("textarea")
+], FtdsTextArea.prototype, "textarea", void 0);
+__decorate([
+    query("ftds-base-input")
+], FtdsTextArea.prototype, "baseInput", void 0);
+__decorate([
+    state()
+], FtdsTextArea.prototype, "scrollbarWidth", void 0);
+__decorate([
+    ignoreComposingEvents()
+], FtdsTextArea.prototype, "onKeyDown", null);