@fluid-topics/ftds-input-label 2.1.0

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

@@ -0,0 +1,4 @@
+export interface FtdsInputLabelProperties {
+    text?: string;
+    raised?: boolean;
+}

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

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

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

@@ -0,0 +1,17 @@
+export declare const FtdsInputLabelCssVariables: {
+    fontSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    fontSizeRaised: import("@fluid-topics/design-system-variables").FtCssVariable;
+    lineHeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    color: import("@fluid-topics/design-system-variables").FtCssVariable;
+    largeFieldHeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    largeFieldVerticalGap: import("@fluid-topics/design-system-variables").FtCssVariable;
+    largeFieldHorizontalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    mediumFieldHeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    mediumFieldVerticalGap: import("@fluid-topics/design-system-variables").FtCssVariable;
+    mediumFieldHorizontalPadding: import("@fluid-topics/design-system-variables").FtCssVariable;
+    additionalPaddingLeft: import("@fluid-topics/design-system-variables").FtCssVariable;
+    additionalPaddingRight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    verticalSpacing: import("@fluid-topics/design-system-variables").FtCssVariable;
+    horizontalSpacing: import("@fluid-topics/design-system-variables").FtCssVariable;
+};
+export declare const styles: any;

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

@@ -0,0 +1,106 @@
+import { css } from "lit";
+import { foundation, typographyBody2Medium, typographyCaption2Medium, } from "@fluid-topics/design-system-variables";
+import { FtTypographyCaptionCssVariables } from "@fluid-topics/ft-typography/build/ft-typography.styles";
+import { FtCssVariableFactory, semantic, setVariable, } from "@fluid-topics/ft-wc-utils";
+export const FtdsInputLabelCssVariables = {
+    fontSize: FtCssVariableFactory.extend("--ftds-input-label-font-size", "", typographyBody2Medium.fontSize),
+    fontSizeRaised: FtCssVariableFactory.extend("--ftds-input-label-font-size-raised", "", typographyCaption2Medium.fontSize),
+    lineHeight: FtCssVariableFactory.extend("--ftds-input-label-line-height", "", typographyCaption2Medium.lineHeight),
+    color: FtCssVariableFactory.extend("--ftds-input-label-color", "", semantic.contentGlobalSubtle),
+    largeFieldHeight: FtCssVariableFactory.create("--ftds-input-label-large-height", "", "SIZE", "50px"),
+    largeFieldVerticalGap: FtCssVariableFactory.extend("--ftds-input-label-large-field-vertical-gap", "", foundation.spacing05),
+    largeFieldHorizontalPadding: FtCssVariableFactory.extend("--ftds-input-label-large-field-horizontal-padding", "", foundation.spacing4),
+    mediumFieldHeight: FtCssVariableFactory.create("--ftds-input-label-medium-height", "", "SIZE", "40px"),
+    mediumFieldVerticalGap: FtCssVariableFactory.create("--ftds-input-label-medium-field-vertical-gap", "", "SIZE", "0px"),
+    mediumFieldHorizontalPadding: FtCssVariableFactory.extend("--ftds-input-label-medium-field-horizontal-padding", "", foundation.spacing4),
+    additionalPaddingLeft: FtCssVariableFactory.create("--ftds-input-label-additional-padding-left", "", "SIZE", "0px"),
+    additionalPaddingRight: FtCssVariableFactory.create("--ftds-input-label-additional-padding-right", "", "SIZE", "0px"),
+    verticalSpacing: FtCssVariableFactory.create("--ftds-input-label-vertical-spacing", "", "SIZE", "4px"),
+    horizontalSpacing: FtCssVariableFactory.create("--ftds-input-label-horizontal-spacing", "", "SIZE", "12px"),
+};
+// language=css
+export const styles = [
+    css `
+
+        :root {
+            --field-height: ${FtdsInputLabelCssVariables.largeFieldHeight};
+            --field-vertical-gap: ${FtdsInputLabelCssVariables.largeFieldVerticalGap};
+            --field-horizontal-padding: ${FtdsInputLabelCssVariables.largeFieldHorizontalPadding};
+
+            --typo-caption-height: calc(${typographyCaption2Medium.lineHeight} * ${typographyCaption2Medium.fontSize});
+            --typo-body-height: calc(${typographyBody2Medium.lineHeight} * ${typographyBody2Medium.fontSize});
+            --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);
+        }
+
+        .ftds-input-label {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            pointer-events: none;
+        }
+
+        .ftds-input-label.ftds--size-large {
+            --field-height: ${FtdsInputLabelCssVariables.largeFieldHeight};
+            --field-vertical-gap: ${FtdsInputLabelCssVariables.largeFieldVerticalGap};
+            --field-horizontal-padding: ${FtdsInputLabelCssVariables.largeFieldHorizontalPadding};
+        }
+
+        .ftds-input-label.ftds--size-medium {
+            --field-height: ${FtdsInputLabelCssVariables.mediumFieldHeight};
+            --field-vertical-gap: ${FtdsInputLabelCssVariables.mediumFieldVerticalGap};
+            --field-horizontal-padding: ${FtdsInputLabelCssVariables.mediumFieldHorizontalPadding};
+        }
+
+        .ftds-input-label--text {
+            display: flex;
+            flex-shrink: 1;
+            position: relative;
+            text-overflow: ellipsis;
+            z-index: 10;
+            width: 100%;
+            transition: font-size 250ms, line-height 250ms, color 250ms;
+            ${setVariable(FtTypographyCaptionCssVariables.fontSize, FtdsInputLabelCssVariables.fontSize)};
+            ${setVariable(FtTypographyCaptionCssVariables.lineHeight, FtdsInputLabelCssVariables.lineHeight)};
+        }
+
+        .ftds-input-label--hidden-text {
+            padding: 0 4px;
+            opacity: 0;
+            max-width: 100%;
+            box-sizing: border-box;
+        }
+
+        .ftds-input-label--floating-text {
+            position: absolute;
+            box-sizing: border-box;
+            transition: top 250ms;
+            width: 100%;
+
+            top: calc((var(--field-height) - var(--typo-body-height)) / 2);
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+
+            padding-top: ${FtdsInputLabelCssVariables.verticalSpacing};
+            padding-bottom: ${FtdsInputLabelCssVariables.verticalSpacing};
+            padding-left: calc(var(--field-horizontal-padding) + ${FtdsInputLabelCssVariables.additionalPaddingLeft});
+            padding-right: calc(var(--field-horizontal-padding) + ${FtdsInputLabelCssVariables.additionalPaddingRight});
+
+            margin: calc(${FtdsInputLabelCssVariables.verticalSpacing} * -1) 0;
+            color: ${FtdsInputLabelCssVariables.color};
+        }
+
+        .ftds-input-label--raised .ftds-input-label--text {
+            ${setVariable(FtTypographyCaptionCssVariables.fontSize, FtdsInputLabelCssVariables.fontSizeRaised)};
+            ${setVariable(FtTypographyCaptionCssVariables.lineHeight, FtdsInputLabelCssVariables.lineHeight)};
+        }
+
+        .ftds-input-label--raised .ftds-input-label--floating-text {
+            top: var(--input-content-vertical-padding);
+        }
+
+    `,
+];

package/build/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./ftds-input-label.styles";
+export * from "./ftds-input-label.properties";
+export * from "./ftds-input-label";
+import "./define";

package/build/index.js

@@ -0,0 +1,4 @@
+export * from "./ftds-input-label.styles";
+export * from "./ftds-input-label.properties";
+export * from "./ftds-input-label";
+import "./define";

package/package.json

@@ -0,0 +1,30 @@
+{
+    "name": "@fluid-topics/ftds-input-label",
+    "version": "2.1.0",
+    "description": "The design system input label component",
+    "keywords": [
+        "Lit"
+    ],
+    "author": "Fluid Topics <devtopics@antidot.net>",
+    "license": "ISC",
+    "main": "build/index.js",
+    "web": "build/ftds-input-label.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-typography": "2.1.0",
+        "@fluid-topics/ft-wc-utils": "2.1.0",
+        "lit": "3.1.0"
+    },
+    "devDependencies": {
+        "@fluid-topics/ft-wc-test-utils": "2.1.0"
+    },
+    "gitHead": "4727cf19d04236ad1d2b2cb43ce1c46298834c7e"
+}