@fluid-topics/ftds-input-helper-text 2.1.0

package/README.md

@@ -0,0 +1,19 @@
+The design system input helper text component
+
+## Install
+
+```shell
+npm install @fluid-topics/ftds-input-helper-text
+yarn add @fluid-topics/ftds-input-helper-text
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ftds-input-helper-text"
+
+function render() {
+    return html` <ftds-input-helper-text foo="bar"></ftds-input-helper-text> `
+}
+```

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 { FtdsInputHelperText } from "./ftds-input-helper-text";
+declare const _default: {
+    "ftds-input-helper-text": typeof FtdsInputHelperText;
+};
+export default _default;

package/build/definitions.js

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

package/build/ftds-input-helper-text.d.ts

@@ -0,0 +1,13 @@
+import { ElementDefinitionsMap, FtLitElement, Status } from "@fluid-topics/ft-wc-utils";
+import { FtdsInputHelperTextProperties } from "./ftds-input-helper-text.properties";
+export declare class FtdsInputHelperText extends FtLitElement implements FtdsInputHelperTextProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    helperText?: string;
+    errorMessages: string[];
+    warningMessages: string[];
+    ariaHidden: string;
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected renderMessage(text: string, status: Status): import("lit-html").TemplateResult<1>;
+    private toIconIdentifier;
+}

package/build/ftds-input-helper-text.js

@@ -0,0 +1,74 @@
+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 { property } from "lit/decorators.js";
+import { FtLitElement, Status, } from "@fluid-topics/ft-wc-utils";
+import { styles } from "./ftds-input-helper-text.styles";
+import { repeat } from "lit/directives/repeat.js";
+import { when } from "lit/directives/when.js";
+import { classMap } from "lit/directives/class-map.js";
+import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ftds-typography";
+import { FtdsIcon, FtdsIcons, FtdsIconVariants, } from "@fluid-topics/ftds-icon";
+export class FtdsInputHelperText extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.errorMessages = [];
+        this.warningMessages = [];
+        this.ariaHidden = "true";
+    }
+    render() {
+        return html `
+            <ul class="ftds-input-helper-text">
+                ${repeat(this.errorMessages, (v) => this.renderMessage(v, Status.error))}
+                ${repeat(this.warningMessages, (v) => this.renderMessage(v, Status.warning))}
+                ${when((!this.errorMessages.length && !this.warningMessages.length && this.helperText), () => this.renderMessage(this.helperText, Status.default))}
+            </ul>
+        `;
+    }
+    renderMessage(text, status) {
+        const optIcon = this.toIconIdentifier(status);
+        const classes = {
+            "ftds-input-helper-text--list-item": true,
+            "hasIcon": Boolean(optIcon),
+            [status]: true,
+        };
+        return html `
+            <li class="${classMap(classes)}">
+                ${when(optIcon, () => html `
+                    <ftds-icon class="icon" icon="${optIcon}" variant="${FtdsIconVariants.solid}" part="icon"></ftds-icon>`)}
+                <ftds-typography part="text" variant="${FtdsTypographyVariants.caption1medium}">${text}</ftds-typography>
+            </li>
+        `;
+    }
+    toIconIdentifier(status) {
+        switch (status) {
+            case Status.error:
+                return FtdsIcons.OCTAGON_XMARK;
+            case Status.warning:
+                return FtdsIcons.TRIANGLE_EXCLAMATION;
+            case Status.default:
+                return undefined;
+        }
+    }
+}
+FtdsInputHelperText.elementDefinitions = {
+    "ftds-typography": FtdsTypography,
+    "ftds-icon": FtdsIcon,
+};
+FtdsInputHelperText.styles = styles;
+__decorate([
+    property()
+], FtdsInputHelperText.prototype, "helperText", void 0);
+__decorate([
+    property({ type: Array })
+], FtdsInputHelperText.prototype, "errorMessages", void 0);
+__decorate([
+    property({ type: Array })
+], FtdsInputHelperText.prototype, "warningMessages", void 0);
+__decorate([
+    property({ reflect: true, attribute: "aria-hidden" })
+], FtdsInputHelperText.prototype, "ariaHidden", void 0);