@fluid-topics/ft-base-input 1.2.70

package/README.md

@@ -0,0 +1,23 @@
+A base input structure for Admin Design System inputs.
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-base-input
+yarn add @fluid-topics/ft-base-input
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-base-input"
+
+function render() {
+    return html`
+        <ft-base-input>
+            <my-input/>
+        </ft-base-input>
+    `
+}
+```

package/build/ft-base-input.d.ts

@@ -0,0 +1,29 @@
+import { ElementDefinitionsMap, FtdsBase, Status } from "@fluid-topics/ft-wc-utils";
+import { FtdsBaseInputProperties } from "./ft-base-input.properties";
+import { FtIcon } from "@fluid-topics/ft-icon";
+export declare class FtdsBaseInput extends FtdsBase implements FtdsBaseInputProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult[];
+    status: Status;
+    disabled: boolean;
+    label: string;
+    hideLabel: boolean;
+    raiseLabel: boolean;
+    helperText?: string;
+    appendIcon?: FtIcon | true;
+    appendIconLabel?: string;
+    appendIconIsClickable: boolean;
+    prependIcon?: FtIcon | true;
+    prependIconLabel?: string;
+    prependIconIsClickable: boolean;
+    errorMessages: string[];
+    warningMessages: string[];
+    hasFocus: boolean;
+    private container?;
+    private mainSlot;
+    private setFocusState;
+    private focusSlottedInput;
+    get shouldShowLabel(): string | false;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private renderIcon;
+}

package/build/ft-base-input.js

@@ -0,0 +1,186 @@
+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, nothing, } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { when } from "lit/directives/when.js";
+import { FtdsBase, Status, } from "@fluid-topics/ft-wc-utils";
+import { styles } from "./ft-base-input.styles";
+import { FtdsInputHelperText } from "@fluid-topics/ft-input-helper-text";
+import { FtdsInputLabel } from "@fluid-topics/ft-input-label";
+import { FtIcon } from "@fluid-topics/ft-icon";
+import { FtTooltip } from "@fluid-topics/ft-tooltip";
+class FtdsBaseInput extends FtdsBase {
+    constructor() {
+        super(...arguments);
+        this.status = Status.default;
+        this.disabled = false;
+        this.label = "";
+        this.hideLabel = false;
+        this.raiseLabel = false;
+        this.appendIconIsClickable = false;
+        this.prependIconIsClickable = false;
+        this.errorMessages = [];
+        this.warningMessages = [];
+        this.hasFocus = false;
+    }
+    setFocusState(focused) {
+        this.hasFocus = focused;
+        this.toggleAttribute("focused", focused);
+    }
+    focusSlottedInput() {
+        const nodes = this.mainSlot.assignedElements({ flatten: true });
+        const input = nodes.find(el => el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement);
+        input === null || input === void 0 ? void 0 : input.focus();
+    }
+    get shouldShowLabel() {
+        return !this.hideLabel && this.label;
+    }
+    render() {
+        const classes = {
+            "ftds-input": true,
+            "disabled": this.disabled,
+            "no-label": !this.shouldShowLabel,
+            "focused": this.hasFocus,
+            "with-prepend-icon": !!this.prependIcon,
+            "with-append-icon": !!this.appendIcon,
+            [this.status]: true,
+            ...this.getDesignSystemBaseClasses(),
+        };
+        return html `
+            <div class="${classMap(classes)}">
+
+                <div class="inside-structure" @click=${() => this.focusSlottedInput()}>
+                    <slot part="label" name="label">
+                        ${when(this.shouldShowLabel, () => html `
+                            <ftds-input-label
+                                aria-hidden="true"
+                                text="${this.label}"
+                                ?raised=${this.raiseLabel}
+                                .size="${this.size}"
+                            ></ftds-input-label>
+                        `)}
+                    </slot>
+                    <div class="inside-structure--icon prepend">
+                        <slot part="prepend-icon" name="prepend-icon">
+                            ${this.renderIcon("prepend")}
+                        </slot>
+                    </div>
+                    <div class="inside-structure--input">
+                        <slot
+                            @focusin=${() => this.setFocusState(true)}
+                            @focusout=${() => this.setFocusState(false)}
+                        ></slot>
+                    </div>
+                    <div class="inside-structure--icon append">
+                        <slot part="append-icon" name="append-icon">
+                            ${this.renderIcon("append")}
+                        </slot>
+                    </div>
+                </div>
+
+                <slot part="helper-text" name="helper-text">
+                    <ftds-input-helper-text
+                        .helperText="${this.helperText}"
+                        .errorMessages="${this.errorMessages}"
+                        .warningMessages="${this.warningMessages}"
+                    ></ftds-input-helper-text>
+                </slot>
+
+            </div>
+        `;
+    }
+    renderIcon(position) {
+        const icon = position === "append" ? this.appendIcon : this.prependIcon;
+        const eventName = position === "append" ? "append-icon-click" : "prepend-icon-click";
+        const isClickable = position === "append" ? this.appendIconIsClickable : this.prependIconIsClickable;
+        const iconText = position === "append" ? this.appendIconLabel : this.prependIconLabel;
+        if (!icon || icon === true) { // is prependIcon or appendIcon are simply "true", we let the component set its own icon, we simply prepare the space for it
+            return nothing;
+        }
+        else if (isClickable) {
+            return html `
+                <ft-tooltip .text=${iconText}>
+                    <button
+                        .aria-label=${iconText}
+                        @click=${(e) => {
+                e.stopPropagation();
+                this.dispatchEvent(new CustomEvent(eventName, e));
+            }}
+                    >
+                        <ft-icon .value=${icon}></ft-icon>
+                    </button>
+                </ft-tooltip>
+            `;
+        }
+        else {
+            return html `
+                <ft-icon .value=${icon}></ft-icon>`;
+        }
+    }
+}
+FtdsBaseInput.elementDefinitions = {
+    "ftds-input-helper-text": FtdsInputHelperText,
+    "ftds-input-label": FtdsInputLabel,
+    "ft-icon": FtIcon,
+    "ft-tooltip": FtTooltip
+};
+FtdsBaseInput.styles = [
+    styles,
+];
+__decorate([
+    property()
+], FtdsBaseInput.prototype, "status", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsBaseInput.prototype, "disabled", void 0);
+__decorate([
+    property()
+], FtdsBaseInput.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsBaseInput.prototype, "hideLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsBaseInput.prototype, "raiseLabel", void 0);
+__decorate([
+    property()
+], FtdsBaseInput.prototype, "helperText", void 0);
+__decorate([
+    property()
+], FtdsBaseInput.prototype, "appendIcon", void 0);
+__decorate([
+    property()
+], FtdsBaseInput.prototype, "appendIconLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsBaseInput.prototype, "appendIconIsClickable", void 0);
+__decorate([
+    property()
+], FtdsBaseInput.prototype, "prependIcon", void 0);
+__decorate([
+    property()
+], FtdsBaseInput.prototype, "prependIconLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsBaseInput.prototype, "prependIconIsClickable", void 0);
+__decorate([
+    state()
+], FtdsBaseInput.prototype, "errorMessages", void 0);
+__decorate([
+    state()
+], FtdsBaseInput.prototype, "warningMessages", void 0);
+__decorate([
+    state()
+], FtdsBaseInput.prototype, "hasFocus", void 0);
+__decorate([
+    query(".ft-base-input")
+], FtdsBaseInput.prototype, "container", void 0);
+__decorate([
+    query("slot:not([name])")
+], FtdsBaseInput.prototype, "mainSlot", void 0);
+export { FtdsBaseInput };