@fluid-topics/ft-input-helper-text 1.2.70

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

@@ -0,0 +1,12 @@
+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[];
+    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,71 @@
+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 { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography";
+import { FtIcon, FtIcons } from "@fluid-topics/ft-icon";
+class FtdsInputHelperText extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.errorMessages = [];
+        this.warningMessages = [];
+    }
+    render() {
+        return html `
+            <ul class="ftds-input-helper-text" role="list">
+                ${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 `
+                    <ft-icon class="icon" value="${optIcon}" part="icon"></ft-icon>`)}
+                <ft-typography part="text" variant="${FtTypographyVariants.caption1medium}">${text}</ft-typography>
+            </li>
+        `;
+    }
+    toIconIdentifier(status) {
+        switch (status) {
+            case Status.error:
+                return FtIcons.OCTAGON_XMARK;
+            case Status.warning:
+                return FtIcons.WARNING;
+            case Status.default:
+                return undefined;
+        }
+    }
+}
+FtdsInputHelperText.elementDefinitions = {
+    "ft-typography": FtTypography,
+    "ft-icon": FtIcon,
+};
+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);
+export { FtdsInputHelperText };

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

@@ -0,0 +1,5 @@
+export interface FtdsInputHelperTextProperties {
+    errorMessages: string[];
+    warningMessages: string[];
+    helperText?: string;
+}

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

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

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

@@ -0,0 +1,8 @@
+export declare const FtdsInputHelperTextCssVariables: {
+    color: import("@fluid-topics/design-system-variables").FtCssVariable;
+    errorColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    warningColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    iconSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    iconHorizontalGap: import("@fluid-topics/design-system-variables").FtCssVariable;
+};
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,48 @@
+import { css } from "lit";
+import { semantic, } from "@fluid-topics/design-system-variables";
+import { foundation, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtIconCssVariables } from "@fluid-topics/ft-icon";
+export const FtdsInputHelperTextCssVariables = {
+    color: FtCssVariableFactory.extend("--ftds-helper-text-color", "", semantic.contentGlobalSubtle),
+    errorColor: FtCssVariableFactory.extend("--ftds-helper-text-error-icon-color", "", semantic.contentErrorPrimary),
+    warningColor: FtCssVariableFactory.extend("--ftds-helper-text-warning-icon-color", "", semantic.contentWarningPrimary),
+    iconSize: FtCssVariableFactory.extend("--ftds-helper-text-icon-size", "", foundation.iconSize2),
+    iconHorizontalGap: FtCssVariableFactory.extend("--ftds-helper-text-icon-horizontal-gap", "", foundation.spacing1)
+};
+// language=CSS
+export const styles = css `
+    .ftds-input-helper-text {
+        box-sizing: border-box;
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .ftds-input-helper-text--list-item {
+        position: relative;
+        text-decoration: none;
+        display: flex;
+        align-items: flex-end;
+        color: ${FtdsInputHelperTextCssVariables.color};
+    }
+
+    .ftds-input-helper-text--list-item.error {
+        color: ${FtdsInputHelperTextCssVariables.errorColor};
+    }
+
+    .ftds-input-helper-text--list-item.warning {
+        color: ${FtdsInputHelperTextCssVariables.warningColor};
+    }
+
+    .ftds-input-helper-text--list-item.hasIcon ft-typography {
+        padding-left: calc(${FtdsInputHelperTextCssVariables.iconHorizontalGap} - 2px);
+    }
+
+    .ftds-input-helper-text--list-item.hasIcon {
+        left: -2px;
+    }
+
+    ft-icon {
+        ${setVariable(FtIconCssVariables.size, FtdsInputHelperTextCssVariables.iconSize)};
+    }
+`;

package/build/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ftds-input-helper-text.styles";
+export * from "./ftds-input-helper-text.properties";
+export * from "./ftds-input-helper-text";

package/build/index.js

@@ -0,0 +1,6 @@
+import { customElement } from "@fluid-topics/ft-wc-utils";
+import { FtdsInputHelperText } from "./ftds-input-helper-text";
+export * from "./ftds-input-helper-text.styles";
+export * from "./ftds-input-helper-text.properties";
+export * from "./ftds-input-helper-text";
+customElement("ftds-input-helper-text")(FtdsInputHelperText);

package/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "@fluid-topics/ft-input-helper-text",
+    "version": "1.2.70",
+    "description": "A list of stylized helper text messages for form inputs",
+    "keywords": [
+        "Lit"
+    ],
+    "author": "Fluid Topics <devtopics@antidot.net>",
+    "license": "ISC",
+    "main": "build/index.js",
+    "web": "build/ft-input-helper-text.min.js",
+    "typings": "build/index",
+    "files": [
+        "build/**/*.js",
+        "build/**/*.ts"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
+    },
+    "dependencies": {
+        "@fluid-topics/ft-wc-utils": "1.2.70",
+        "lit": "3.1.0"
+    },
+    "devDependencies": {
+        "@fluid-topics/ft-wc-test-utils": "1.2.70"
+    },
+    "gitHead": "f3062e7380fa19f4c699b1cee22fa3c9f3c0c0a7"
+}