@fluid-topics/ft-base-input 1.2.70

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

@@ -0,0 +1,19 @@
+import { Status } from "@fluid-topics/ft-wc-utils";
+import { FtdsBaseInterface } from "@fluid-topics/ft-wc-utils/build/FtdsBase";
+import { FtIcon } from "@fluid-topics/ft-icon";
+export interface FtdsBaseInputProperties extends FtdsBaseInterface {
+    status: Status;
+    disabled: boolean;
+    hideLabel: boolean;
+    label: string;
+    raiseLabel: boolean;
+    errorMessages?: string[];
+    warningMessages?: string[];
+    helperText?: string;
+    appendIcon?: FtIcon | true;
+    appendIconLabel?: string;
+    appendIconIsClickable?: boolean;
+    prependIcon?: FtIcon | true;
+    prependIconLabel?: string;
+    prependIconIsClickable?: boolean;
+}

package/build/ft-base-input.properties.js

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

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

@@ -0,0 +1,36 @@
+export declare const FtdsBaseInputCssVariables: {
+    defaultInputFontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    defaultInputLineHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    labelColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    largeFieldHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    largeFieldVerticalGap: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    largeFieldHorizontalGap: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    largeFieldHorizontalPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    largeFieldIconSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    mediumFieldHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    mediumFieldVerticalGap: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    mediumFieldHorizontalGap: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    mediumFieldHorizontalPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    mediumFieldIconSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    disabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    defaultBorderWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    defaultBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    errorBorderWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    errorBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    warningBorderWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    warningBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    focusOutlineOffset: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    focusOutlineWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    focusFocusRingColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    appendIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    prependIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    helperHorizontalPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    helperHorizontalGap: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    helperIconSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    helperIconHorizontalGap: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    defaultHelperTextColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    errorHelperIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    warningHelperIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const styles: import("lit").CSSResult;

package/build/ft-base-input.styles.js

@@ -0,0 +1,205 @@
+import { css } from "lit";
+import { FtCssVariableFactory, textInput, typographyBody2Medium, typographyCaption2Medium, } from "@fluid-topics/ft-wc-utils";
+export const FtdsBaseInputCssVariables = {
+    defaultInputFontSize: FtCssVariableFactory.create("--ftds-base-input-default-input-font-size", "", "SIZE", typographyBody2Medium.fontSize),
+    defaultInputLineHeight: FtCssVariableFactory.create("--ftds-base-input-default-input-line-height", "", "NUMBER", typographyBody2Medium.lineHeight),
+    labelColor: FtCssVariableFactory.create("--ftds-base-input-label-color", "", "COLOR", textInput.labelColor),
+    largeFieldHeight: FtCssVariableFactory.create("--ftds-base-input-large-field-height", "", "SIZE", textInput.largeFieldHeight),
+    largeFieldVerticalGap: FtCssVariableFactory.create("--ftds-base-input-large-field-vertical-gap", "", "SIZE", textInput.largeFieldVerticalGap),
+    largeFieldHorizontalGap: FtCssVariableFactory.create("--ftds-base-input-large-field-horizontal-gap", "", "SIZE", textInput.largeFieldHorizontalGap),
+    largeFieldHorizontalPadding: FtCssVariableFactory.create("--ftds-base-input-large-field-horizontal-padding", "", "SIZE", textInput.largeFieldHorizontalPadding),
+    largeFieldIconSize: FtCssVariableFactory.create("--ftds-base-input-large-icon-size", "", "SIZE", textInput.largeFieldIconSize),
+    mediumFieldHeight: FtCssVariableFactory.create("--ftds-base-input-medium-field-height", "", "SIZE", textInput.mediumFieldHeight),
+    mediumFieldVerticalGap: FtCssVariableFactory.create("--ftds-base-input-medium-field-vertical-gap", "", "SIZE", textInput.mediumFieldVerticalGap),
+    mediumFieldHorizontalGap: FtCssVariableFactory.create("--ftds-base-input-medium-field-horizontal-gap", "", "SIZE", textInput.mediumFieldHorizontalGap),
+    mediumFieldHorizontalPadding: FtCssVariableFactory.create("--ftds-base-input-medium-field-horizontal-padding", "", "SIZE", textInput.mediumFieldHorizontalPadding),
+    mediumFieldIconSize: FtCssVariableFactory.create("--ftds-base-input-medium-icon-size", "", "SIZE", textInput.mediumFieldIconSize),
+    disabledComponentOpacity: FtCssVariableFactory.create("--ftds-base-input-disabled-component-opacity", "", "NUMBER", textInput.disabledComponentOpacity),
+    defaultBorderWidth: FtCssVariableFactory.create("--ftds-base-input-default-border-width", "", "SIZE", textInput.defaultBorderWidth),
+    defaultBorderColor: FtCssVariableFactory.create("--ftds-base-input-default-border-color", "", "COLOR", textInput.defaultBorderColor),
+    errorBorderWidth: FtCssVariableFactory.create("--ftds-base-input-error-border-width", "", "SIZE", textInput.errorBorderWidth),
+    errorBorderColor: FtCssVariableFactory.create("--ftds-base-input-error-border-color", "", "COLOR", textInput.errorBorderColor),
+    warningBorderWidth: FtCssVariableFactory.create("--ftds-base-input-warning-border-width", "", "SIZE", textInput.warningBorderWidth),
+    warningBorderColor: FtCssVariableFactory.create("--ftds-base-input-warning-border-color", "", "COLOR", textInput.warningBorderColor),
+    borderRadius: FtCssVariableFactory.create("--ftds-base-input-border-radius", "", "COLOR", textInput.borderRadius),
+    focusOutlineOffset: FtCssVariableFactory.create("--ftds-base-input-focus-outline-offset", "", "SIZE", textInput.focusOutlineOffset),
+    focusOutlineWidth: FtCssVariableFactory.create("--ftds-base-input-focus-outline-width", "", "SIZE", textInput.focusOutlineWidth),
+    focusFocusRingColor: FtCssVariableFactory.create("--ftds-base-input-focus-ring-color", "", "COLOR", textInput.focusFocusRingColor),
+    appendIconColor: FtCssVariableFactory.create("--ftds-base-input-append-icon-color", "", "COLOR", textInput.trailingIconColor),
+    prependIconColor: FtCssVariableFactory.create("--ftds-base-input-prepend-icon-color", "", "COLOR", textInput.trailingIconColor),
+    helperHorizontalPadding: FtCssVariableFactory.create("--ftds-base-input-helper-horizontal-padding", "", "COLOR", textInput.helperHorizontalPadding),
+    helperHorizontalGap: FtCssVariableFactory.create("--ftds-base-input-helper-horizontal-gap", "", "COLOR", textInput.helperHorizontalGap),
+    helperIconSize: FtCssVariableFactory.create("--ftds-base-input-helper-icon-size", "", "COLOR", textInput.helperIconSize),
+    helperIconHorizontalGap: FtCssVariableFactory.create("--ftds-base-input-helper-horizontal-gap", "", "COLOR", textInput.helperHorizontalGap),
+    defaultHelperTextColor: FtCssVariableFactory.create("--ftds-base-input-helper-default-helper-text", "", "COLOR", textInput.defaultHelperTextColor),
+    errorHelperIconColor: FtCssVariableFactory.create("--ftds-base-input-helper-error-helper-icon-color", "", "COLOR", textInput.errorHelperIconColor),
+    warningHelperIconColor: FtCssVariableFactory.create("--ftds-base-input-helper-warning-helper-icon-color", "", "COLOR", textInput.warningHelperIconColor),
+};
+//language=css
+export const styles = css `
+
+    *:focus {
+        outline: none;
+    }
+
+    slot::slotted(*) {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        border: none;
+        padding: 0;
+    }
+
+    slot::slotted(*:focus) {
+        outline: none;
+    }
+
+    slot:not([name])::slotted(*) { /* all elements inside of the default slot, in which will be the actual input */
+        font-size: ${FtdsBaseInputCssVariables.defaultInputFontSize};
+        line-height: ${FtdsBaseInputCssVariables.defaultInputLineHeight};
+    }
+
+    .ftds-input {
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        align-items: stretch;
+        position: relative;
+        height: var(--field-height);
+    }
+
+    .ftds-input.ftds--size-large {
+        --field-height: ${FtdsBaseInputCssVariables.largeFieldHeight};
+        --field-vertical-gap: ${FtdsBaseInputCssVariables.largeFieldVerticalGap};
+        --field-horizontal-gap: ${FtdsBaseInputCssVariables.largeFieldHorizontalGap};
+        --field-horizontal-padding: ${FtdsBaseInputCssVariables.largeFieldHorizontalPadding};
+        --icon-size: ${FtdsBaseInputCssVariables.largeFieldIconSize};
+    }
+
+    .ftds-input.ftds--size-medium {
+        --field-height: ${FtdsBaseInputCssVariables.mediumFieldHeight};
+        --field-vertical-gap: ${FtdsBaseInputCssVariables.mediumFieldVerticalGap};
+        --field-horizontal-gap: ${FtdsBaseInputCssVariables.mediumFieldHorizontalGap};
+        --field-horizontal-padding: ${FtdsBaseInputCssVariables.mediumFieldHorizontalPadding};
+        --icon-size: ${FtdsBaseInputCssVariables.mediumFieldIconSize};
+    }
+
+    .ftds-input.disabled {
+        opacity: ${FtdsBaseInputCssVariables.disabledComponentOpacity};
+    }
+
+    .inside-structure {
+        width: 100%;
+        box-sizing: border-box;
+        font-size: ${FtdsBaseInputCssVariables.defaultInputFontSize};
+        line-height: ${FtdsBaseInputCssVariables.defaultInputLineHeight};
+        border: ${FtdsBaseInputCssVariables.defaultBorderWidth} solid ${FtdsBaseInputCssVariables.defaultBorderColor};
+        border-radius: ${FtdsBaseInputCssVariables.borderRadius};
+        --current-border-width: ${FtdsBaseInputCssVariables.defaultBorderWidth};
+        outline-offset: calc(${FtdsBaseInputCssVariables.focusOutlineOffset} - ${FtdsBaseInputCssVariables.defaultBorderWidth});
+
+        --typo-caption-height: calc(${typographyCaption2Medium.lineHeight} * ${typographyCaption2Medium.fontSize});
+        --typo-body-height: calc(${FtdsBaseInputCssVariables.defaultInputLineHeight} * ${FtdsBaseInputCssVariables.defaultInputFontSize});
+        --caption-label-and-value-combined-height: calc(var(--field-vertical-gap) + var(--typo-caption-height) + var(--typo-body-height));
+
+        --input-content-vertical-padding: calc((var(--field-height) - var(--caption-label-and-value-combined-height)) / 2);
+        --value-padding-bottom: calc(var(--input-content-vertical-padding) - var(--current-border-width));
+        --value-padding-top: calc(var(--input-content-vertical-padding) + var(--field-vertical-gap) + var(--typo-caption-height) - var(--current-border-width));
+        padding: var(--value-padding-top) var(--field-horizontal-padding) var(--value-padding-bottom);
+    }
+
+    .ftds-input.no-label .inside-structure {
+        --value-padding-bottom: calc(((var(--field-height) - var(--typo-body-height)) / 2) - var(--current-border-width));
+        --value-padding-top: calc(((var(--field-height) - var(--typo-body-height)) / 2) - var(--current-border-width));
+    }
+
+    .ftds-input.with-prepend-icon .inside-structure {
+        padding-left: calc(var(--icon-size) + var(--field-horizontal-padding) + var(--field-horizontal-gap));
+    }
+
+    .ftds-input.with-append-icon .inside-structure {
+        padding-right: calc(var(--icon-size) + var(--field-horizontal-padding) + var(--field-horizontal-gap));
+    }
+
+    .ftds-input.error .inside-structure {
+        border: ${FtdsBaseInputCssVariables.errorBorderWidth} solid ${FtdsBaseInputCssVariables.errorBorderColor};
+        --current-border-width: ${FtdsBaseInputCssVariables.errorBorderWidth};
+    }
+
+    .ftds-input.warning .inside-structure {
+        border: ${FtdsBaseInputCssVariables.warningBorderWidth} solid ${FtdsBaseInputCssVariables.warningBorderColor};
+        --current-border-width: ${FtdsBaseInputCssVariables.warningBorderWidth};
+    }
+
+    .ftds-input.focused .inside-structure {
+        outline: ${FtdsBaseInputCssVariables.focusOutlineWidth} solid ${FtdsBaseInputCssVariables.focusFocusRingColor};
+    }
+
+    .inside-structure .inside-structure--icon {
+        position: absolute;
+        top: calc((var(--field-height) - var(--icon-size)) / 2);
+        height: var(--icon-size);
+        display: flex;
+        align-items: center;
+    }
+
+    .inside-structure .inside-structure--icon {
+        position: absolute;
+        top: calc((var(--field-height) - var(--icon-size)) / 2);
+        right: var(--field-horizontal-padding);
+        height: var(--icon-size);
+    }
+
+    .inside-structure .inside-structure--icon.append {
+        right: var(--field-horizontal-padding);
+        color: ${FtdsBaseInputCssVariables.appendIconColor};
+    }
+
+    .inside-structure .inside-structure--icon.prepend {
+        left: var(--field-horizontal-padding);
+        color: ${FtdsBaseInputCssVariables.prependIconColor};
+    }
+
+    .inside-structure .inside-structure--icon.append button {
+        color: ${FtdsBaseInputCssVariables.appendIconColor};
+    }
+
+    .inside-structure .inside-structure--icon.prepend button {
+        color: ${FtdsBaseInputCssVariables.prependIconColor};
+    }
+
+    .inside-structure .inside-structure--icon button {
+        border: none;
+        padding: 0;
+        background: none;
+        cursor: pointer;
+    }
+
+    .inside-structure .inside-structure--icon button:focus-visible {
+        outline: ${FtdsBaseInputCssVariables.focusOutlineWidth} solid ${FtdsBaseInputCssVariables.focusFocusRingColor};
+        border-radius: ${FtdsBaseInputCssVariables.borderRadius};
+    }
+
+    ftds-input-label {
+        --ft-input-label-color: ${FtdsBaseInputCssVariables.labelColor};
+    }
+
+    .ftds-input.with-prepend-icon ftds-input-label {
+        --ft-input-label-additional-padding-left: calc(var(--icon-size) + var(--field-horizontal-gap));
+    }
+
+    .ftds-input.with-append-icon ftds-input-label {
+        --ft-input-label-additional-padding-right: calc(var(--icon-size) + var(--field-horizontal-gap));
+    }
+
+    ftds-input-helper-text {
+        margin-top: ${FtdsBaseInputCssVariables.helperHorizontalGap};
+        padding-left: ${FtdsBaseInputCssVariables.helperHorizontalPadding};
+        --ftds-helper-text-icon-size: ${FtdsBaseInputCssVariables.helperIconSize};
+        --ftds-helper-text-icon-horizontal-gap:${FtdsBaseInputCssVariables.helperIconHorizontalGap};
+        --ftds-helper-text-color: ${FtdsBaseInputCssVariables.defaultHelperTextColor};
+        --ftds-helper-text-error-icon-color: ${FtdsBaseInputCssVariables.errorHelperIconColor};
+        --ftds-helper-text-warning-icon-color: ${FtdsBaseInputCssVariables.warningHelperIconColor};
+    }
+
+`;

package/build/index.d.ts

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

package/build/index.js

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

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@fluid-topics/ft-base-input",
+  "version": "1.2.70",
+  "description": "Base input structure for Admin Design System inputs",
+  "keywords": [
+    "Lit"
+  ],
+  "author": "Fluid Topics <devtopics@antidot.net>",
+  "license": "ISC",
+  "main": "build/index.js",
+  "web": "build/ft-base-input.min.js",
+  "typings": "build/index",
+  "files": [
+    "build/**/*.ts",
+    "build/**/*.js"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
+  },
+  "dependencies": {
+    "@fluid-topics/ft-icon": "1.2.70",
+    "@fluid-topics/ft-input-label": "1.2.70",
+    "@fluid-topics/ft-ripple": "1.2.70",
+    "@fluid-topics/ft-typography": "1.2.70",
+    "@fluid-topics/ft-wc-utils": "1.2.70",
+    "lit": "3.1.0"
+  },
+  "gitHead": "f3062e7380fa19f4c699b1cee22fa3c9f3c0c0a7"
+}