@fluid-topics/ftds-input-label 2.1.0

package/README.md

@@ -0,0 +1,19 @@
+The design system input label component
+
+## Install
+
+```shell
+npm install @fluid-topics/ftds-input-label
+yarn add @fluid-topics/ftds-input-label
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ftds-input-label"
+
+function render() {
+    return html` <ftds-input-label foo="bar"></ftds-input-label> `
+}
+```

package/build/define.d.ts

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

package/build/define.js

@@ -0,0 +1,3 @@
+import { customElements } from "@fluid-topics/ft-wc-utils";
+import definitions from "./definitions";
+customElements(definitions);

package/build/definitions.d.ts

@@ -0,0 +1,5 @@
+import { FtdsInputLabel } from "./ftds-input-label";
+declare const _default: {
+    "ftds-input-label": typeof FtdsInputLabel;
+};
+export default _default;

package/build/definitions.js

@@ -0,0 +1,4 @@
+import { FtdsInputLabel } from "./ftds-input-label";
+export default {
+    "ftds-input-label": FtdsInputLabel,
+};

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

@@ -0,0 +1,13 @@
+import { FtdsInputLabelProperties } from "./ftds-input-label.properties";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { ClassInfo } from "lit/directives/class-map.js";
+declare const FtdsInputLabel_base: import("@fluid-topics/ft-wc-utils").FtdsBaseType<typeof FtLitElement>;
+export declare class FtdsInputLabel extends FtdsInputLabel_base implements FtdsInputLabelProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    text: string;
+    raised: boolean;
+    static styles: any[];
+    get inputLabelClasses(): ClassInfo;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/build/ftds-input-label.js

@@ -0,0 +1,50 @@
+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 { FtLitElement, toFtdsBase, } from "@fluid-topics/ft-wc-utils";
+import { styles } from "./ftds-input-label.styles";
+import { classMap, } from "lit/directives/class-map.js";
+import { FtTypographyCaption } from "@fluid-topics/ft-typography";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+export class FtdsInputLabel extends toFtdsBase(FtLitElement) {
+    constructor() {
+        super(...arguments);
+        this.text = "";
+        this.raised = false;
+    }
+    get inputLabelClasses() {
+        return {
+            "ftds-input-label": true,
+            "ftds-input-label--raised": this.raised,
+            ...this.getDesignSystemBaseClasses(),
+        };
+    }
+    render() {
+        return html `
+            <div class="${classMap(this.inputLabelClasses)}">
+                ${when(this.text, () => html `
+                    <div class="ftds-input-label--text ft-typography--caption">
+                        <label class="ftds-input-label--floating-text">${this.text}</label>
+                        <span class="ftds-input-label--hidden-text" aria-hidden="true">${this.text}</span>
+                    </div>
+                `)}
+            </div>
+        `;
+    }
+}
+FtdsInputLabel.elementDefinitions = {};
+FtdsInputLabel.styles = [
+    FtTypographyCaption,
+    styles,
+];
+__decorate([
+    property({ type: String })
+], FtdsInputLabel.prototype, "text", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsInputLabel.prototype, "raised", void 0);