@fluid-topics/ft-text-input 1.2.71

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

@@ -0,0 +1,22 @@
+import { FtdsTextInputProperties, FtdsTextInputType } from "./ftds-text-input.properties";
+import { PropertyValues } from "lit/development";
+import { ElementDefinitionsMap, FtdsBase } from "@fluid-topics/ft-wc-utils";
+import { FtIcons } from "@fluid-topics/ft-icon";
+declare const FtdsTextInput_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 FtdsTextInput extends FtdsTextInput_base implements FtdsTextInputProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult[];
+    type: FtdsTextInputType;
+    private showClearPassword;
+    private input?;
+    constructor();
+    get inputType(): FtdsTextInputType;
+    onInput(): void;
+    connectedCallback(): void;
+    protected willUpdate(props: PropertyValues): void;
+    get showLabel(): string | false;
+    get passwordIconForCurrentState(): FtIcons.EYE_SLASH | FtIcons.EYE | undefined;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private updateTypeBasedAdditionalRules;
+}
+export {};

package/build/ftds-text-input.js

@@ -0,0 +1,133 @@
+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, query, state } from "lit/decorators.js";
+import { FtdsTextInputType } from "./ftds-text-input.properties";
+import { styles, } from "./ftds-text-input.styles";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { FtdsBase, toFtInput, ValidationRules, } from "@fluid-topics/ft-wc-utils";
+import { FtdsInputLabel } from "@fluid-topics/ft-input-label/build/ftds-input-label";
+import { FtdsInputHelperText } from "@fluid-topics/ft-input-helper-text";
+import { FtIcon, FtIcons } from "@fluid-topics/ft-icon";
+import { withI18n } from "@fluid-topics/ft-i18n";
+import { textInputContext, textInputDefaultMessages } from "./TextInputMessages";
+import { FtTooltip } from "@fluid-topics/ft-tooltip";
+import { FtdsBaseInput } from "@fluid-topics/ft-base-input";
+class FtdsTextInput extends withI18n(toFtInput(FtdsBase, String)) {
+    constructor() {
+        var _a;
+        super();
+        this.type = FtdsTextInputType.text;
+        this.showClearPassword = false;
+        this.value = (_a = this.value) !== null && _a !== void 0 ? _a : "";
+        this.addI18nContext(textInputContext, textInputDefaultMessages);
+    }
+    get inputType() {
+        return (this.type === FtdsTextInputType.password && this.showClearPassword)
+            ? FtdsTextInputType.text
+            : this.type;
+    }
+    onInput() {
+        var _a;
+        this.value = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || "";
+        super.onInput();
+    }
+    connectedCallback() {
+        this.updateTypeBasedAdditionalRules(this.type);
+        super.connectedCallback();
+    }
+    willUpdate(props) {
+        super.willUpdate(props);
+        if (props.has("type")) {
+            this.updateTypeBasedAdditionalRules(this.type);
+        }
+    }
+    get showLabel() {
+        return !this.hideLabel && this.label;
+    }
+    get passwordIconForCurrentState() {
+        return (this.type === FtdsTextInputType.password && !this.disabled) ? (this.showClearPassword ? FtIcons.EYE_SLASH : FtIcons.EYE) : undefined;
+    }
+    render() {
+        const inputClasses = classMap({
+            "ftds-input": true,
+            ...this.getDesignSystemBaseClasses()
+        });
+        return html `
+            <ftds-base-input
+
+                .status=${this.status}
+                .size=${this.size}
+                ?disabled="${this.disabled}"
+
+                .errorMessages=${this.errorMessages}
+                .warningMessages=${this.warningMessages}
+                .helperText=${this.helperText}
+
+                .label=${ifDefined(this.label)}
+                ?hideLabel=${this.hideLabel}
+                ?raiseLabel=${(this.type == FtdsTextInputType.date || this.type == FtdsTextInputType.time || this.focused || this.value != "")}
+
+                .appendIcon=${this.passwordIconForCurrentState}
+                .appendIconLabel=${this.showClearPassword ? textInputContext.messages.hidePassword() : textInputContext.messages.showPassword()}
+                appendIconIsClickable
+                @append-icon-click=${() => this.showClearPassword = !this.showClearPassword}
+
+            >
+
+                <input class=${inputClasses}
+                       name="${this.name}"
+                       .value="${this.value}"
+                       .type="${this.inputType}"
+                       ?disabled=${this.disabled}
+                       @input=${this.onInput}
+                       @focus=${this.onFocus}
+                       @blur=${this.onBlur}
+                       aria-label="${ifDefined(this.label)}"
+                />
+
+            </ftds-base-input>
+        `;
+    }
+    updateTypeBasedAdditionalRules(type) {
+        this.additionalErrorRules = (() => {
+            switch (type) {
+                case FtdsTextInputType.email:
+                    return [ValidationRules.email(textInputContext.messages.invalidEmail())];
+                case FtdsTextInputType.url:
+                    return [ValidationRules.url(textInputContext.messages.invalidUrl())];
+                default:
+                    return [];
+            }
+        })();
+        this.additionalWarningRules = (() => {
+            switch (type) {
+                default:
+                    return [];
+            }
+        })();
+    }
+}
+FtdsTextInput.elementDefinitions = {
+    "ftds-input-helper-text": FtdsInputHelperText,
+    "ftds-input-label": FtdsInputLabel,
+    "ftds-base-input": FtdsBaseInput,
+    "ft-icon": FtIcon,
+    "ft-tooltip": FtTooltip,
+};
+FtdsTextInput.styles = [styles];
+__decorate([
+    property()
+], FtdsTextInput.prototype, "type", void 0);
+__decorate([
+    state()
+], FtdsTextInput.prototype, "showClearPassword", void 0);
+__decorate([
+    query("input")
+], FtdsTextInput.prototype, "input", void 0);
+export { FtdsTextInput };

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

@@ -0,0 +1,13 @@
+import { FtInputInterface } from "@fluid-topics/ft-wc-utils";
+export declare enum FtdsTextInputType {
+    text = "text",
+    password = "password",
+    email = "email",
+    url = "url",
+    number = "number",
+    date = "date",
+    time = "time"
+}
+export interface FtdsTextInputProperties extends FtInputInterface<String> {
+    type: FtdsTextInputType;
+}

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

@@ -0,0 +1,10 @@
+export var FtdsTextInputType;
+(function (FtdsTextInputType) {
+    FtdsTextInputType["text"] = "text";
+    FtdsTextInputType["password"] = "password";
+    FtdsTextInputType["email"] = "email";
+    FtdsTextInputType["url"] = "url";
+    FtdsTextInputType["number"] = "number";
+    FtdsTextInputType["date"] = "date";
+    FtdsTextInputType["time"] = "time";
+})(FtdsTextInputType || (FtdsTextInputType = {}));

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

@@ -0,0 +1,2 @@
+export { textInput as FtdsTextInputCssVariables } from "@fluid-topics/design-system-variables";
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,40 @@
+import { css, } from "lit";
+import { typographyBody2Medium } from "@fluid-topics/design-system-variables";
+export { textInput as FtdsTextInputCssVariables } from "@fluid-topics/design-system-variables";
+//language=css
+export const styles = css `
+
+    /* TODO override toutes les variables de base-input */
+
+    input {
+        background-color: transparent; /* so it doesn't grey out when disabled */
+    }
+
+    input[type="number"]::-webkit-outer-spin-button,
+    input[type="number"]::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    input[type="number"] {
+        -moz-appearance: textfield;
+        appearance: textfield;
+    }
+
+    input[type="date"]::-webkit-inner-spin-button,
+    input[type="time"]::-webkit-inner-spin-button,
+    input[type="date"]::-webkit-calendar-picker-indicator,
+    input[type="time"]::-webkit-calendar-picker-indicator{
+        display: none;
+        -webkit-appearance: none;
+    }
+    /* We didn't found a way to remove the calendar icon from Firefox yet, sad.png */
+
+
+    input[type="date"], input[type="time"] {
+        font-family: ${typographyBody2Medium.fontFamily};
+        font-size: ${typographyBody2Medium.fontSize};
+        font-weight: ${typographyBody2Medium.fontWeight};
+    }
+
+`;

package/build/index.d.ts

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

package/build/index.js

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

package/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "@fluid-topics/ft-text-input",
+    "version": "1.2.71",
+    "description": "Text Input",
+    "keywords": [
+        "Lit"
+    ],
+    "author": "Fluid Topics <devtopics@antidot.net>",
+    "license": "ISC",
+    "main": "build/index.js",
+    "web": "build/ft-text-input.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.71",
+        "lit": "3.1.0"
+    },
+    "devDependencies": {
+        "@fluid-topics/ft-wc-test-utils": "1.2.71"
+    },
+    "gitHead": "b4c6a27961db848c53bcc5f9344ec146f1e4629c"
+}