@fluid-topics/ft-input-label 2.0.38 → 2.1.1

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

@@ -1,15 +1,15 @@
 export declare const FtInputLabelCssVariables: {
-    fontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    raisedFontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    raisedZIndex: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    verticalSpacing: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    horizontalSpacing: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    labelMaxWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    borderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    textColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    disabledTextColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    backgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    borderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    colorError: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    fontSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    raisedFontSize: import("@fluid-topics/design-system-variables").FtCssVariable;
+    raisedZIndex: import("@fluid-topics/design-system-variables").FtCssVariable;
+    verticalSpacing: import("@fluid-topics/design-system-variables").FtCssVariable;
+    horizontalSpacing: import("@fluid-topics/design-system-variables").FtCssVariable;
+    labelMaxWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
+    borderColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    textColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    disabledTextColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    backgroundColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    borderRadius: import("@fluid-topics/design-system-variables").FtCssVariable;
+    colorError: import("@fluid-topics/design-system-variables").FtCssVariable;
 };
 export declare const styles: import("lit").CSSResult;

package/build/index.d.ts

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

package/build/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-input-label",
-    "version": "2.0.38",
+    "version": "2.1.1",
     "description": "Dynamic label with outline",
     "keywords": [
         "Lit"
@@ -19,9 +19,9 @@
         "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
     },
     "dependencies": {
-        "@fluid-topics/ft-typography": "2.0.38",
-        "@fluid-topics/ft-wc-utils": "2.0.38",
+        "@fluid-topics/ft-typography": "2.1.1",
+        "@fluid-topics/ft-wc-utils": "2.1.1",
         "lit": "3.1.0"
     },
-    "gitHead": "8a5f1d6fb69ac18ec2e6d05dcf82e036d7423c35"
+    "gitHead": "a9f1e471fb2dba9aeb8c12394a25460f675597dc"
 }

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

@@ -1,9 +0,0 @@
-import { FtBaseInputLabel } from "./ft-base-input-label";
-import { FtdsInputLabelProperties } from "./ftds-input-label.properties";
-import { ClassInfo } from "lit/directives/class-map.js";
-declare const FtdsInputLabel_base: import("@fluid-topics/ft-wc-utils").FtdsBaseType<typeof FtBaseInputLabel>;
-export declare class FtdsInputLabel extends FtdsInputLabel_base implements FtdsInputLabelProperties {
-    static styles: any[];
-    get inputLabelClasses(): ClassInfo;
-}
-export {};

package/build/ftds-input-label.js

@@ -1,17 +0,0 @@
-import { FtBaseInputLabel } from "./ft-base-input-label";
-import { toFtdsBase } from "@fluid-topics/ft-wc-utils";
-import { designSystemStyles } from "./ftds-input-label.styles";
-import { FtTypographyCaption } from "@fluid-topics/ft-typography";
-export class FtdsInputLabel extends toFtdsBase(FtBaseInputLabel) {
-    get inputLabelClasses() {
-        return {
-            "ft-input-label": true,
-            "ft-input-label--raised": this.raised,
-            ...this.getDesignSystemBaseClasses()
-        };
-    }
-}
-FtdsInputLabel.styles = [
-    FtTypographyCaption,
-    designSystemStyles
-];

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

@@ -1,3 +0,0 @@
-import { FtBaseInputLabelProperties } from "./ft-base-input-label";
-export interface FtdsInputLabelProperties extends FtBaseInputLabelProperties {
-}

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

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

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

@@ -1,15 +0,0 @@
-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;
-};
-export declare const designSystemStyles: any;

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

@@ -1,105 +0,0 @@
-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 { FtInputLabelCssVariables } from "./ft-input-label.styles";
-import { FtCssVariableFactory, semantic, setVariable } from "@fluid-topics/ft-wc-utils";
-export const FtdsInputLabelCssVariables = {
-    fontSize: FtCssVariableFactory.extend("--ft-input-label-font-size", "", typographyBody2Medium.fontSize),
-    fontSizeRaised: FtCssVariableFactory.extend("--ft-input-label-font-size-raised", "", typographyCaption2Medium.fontSize),
-    lineHeight: FtCssVariableFactory.extend("--ft-input-label-line-height", "", typographyCaption2Medium.lineHeight),
-    color: FtCssVariableFactory.extend("--ft-input-label-color", "", semantic.contentGlobalSubtle),
-    largeFieldHeight: FtCssVariableFactory.create("--ft-input-label-large-height", "", "SIZE", "50px"),
-    largeFieldVerticalGap: FtCssVariableFactory.extend("--ft-input-label-large-field-vertical-gap", "", foundation.spacing05),
-    largeFieldHorizontalPadding: FtCssVariableFactory.extend("--ft-input-label-large-field-horizontal-padding", "", foundation.spacing4),
-    mediumFieldHeight: FtCssVariableFactory.create("--ft-input-label-medium-height", "", "SIZE", "40px"),
-    mediumFieldVerticalGap: FtCssVariableFactory.create("--ft-input-label-medium-field-vertical-gap", "", "SIZE", "0px"),
-    mediumFieldHorizontalPadding: FtCssVariableFactory.extend("--ft-input-label-medium-field-horizontal-padding", "", foundation.spacing4),
-    additionalPaddingLeft: FtCssVariableFactory.create("--ft-input-label-additional-padding-left", "", "SIZE", "0px"),
-    additionalPaddingRight: FtCssVariableFactory.create("--ft-input-label-additional-padding-right", "", "SIZE", "0px"),
-};
-//language=css
-export const designSystemStyles = [
-    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);
-        }
-
-        .ft-input-label {
-            position: absolute;
-            inset: 0;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            pointer-events: none;
-        }
-
-        .ft-input-label.ftds--size-large {
-            --field-height: ${FtdsInputLabelCssVariables.largeFieldHeight};
-            --field-vertical-gap: ${FtdsInputLabelCssVariables.largeFieldVerticalGap};
-            --field-horizontal-padding: ${FtdsInputLabelCssVariables.largeFieldHorizontalPadding};
-        }
-
-        .ft-input-label.ftds--size-medium {
-            --field-height: ${FtdsInputLabelCssVariables.mediumFieldHeight};
-            --field-vertical-gap: ${FtdsInputLabelCssVariables.mediumFieldVerticalGap};
-            --field-horizontal-padding: ${FtdsInputLabelCssVariables.mediumFieldHorizontalPadding};
-        }
-
-        .ft-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)};
-        }
-
-        .ft-input-label--hidden-text {
-            padding: 0 4px;
-            opacity: 0;
-            max-width: 100%;
-            box-sizing: border-box;
-        }
-
-        .ft-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: ${FtInputLabelCssVariables.verticalSpacing};
-            padding-bottom: ${FtInputLabelCssVariables.verticalSpacing};
-            padding-left: calc(var(--field-horizontal-padding) + ${FtdsInputLabelCssVariables.additionalPaddingLeft});
-            padding-right: calc(var(--field-horizontal-padding) + ${FtdsInputLabelCssVariables.additionalPaddingRight});
-
-            margin: calc(${FtInputLabelCssVariables.verticalSpacing} * -1) 0;
-            color: ${FtdsInputLabelCssVariables.color};
-        }
-
-        .ft-input-label--raised .ft-input-label--text {
-            ${setVariable(FtTypographyCaptionCssVariables.fontSize, FtdsInputLabelCssVariables.fontSizeRaised)};
-            ${setVariable(FtTypographyCaptionCssVariables.lineHeight, FtdsInputLabelCssVariables.lineHeight)};
-        }
-
-        .ft-input-label--raised .ft-input-label--floating-text {
-            top: var(--input-content-vertical-padding);
-        }
-
-    `
-];