@fluid-topics/ft-input-label 1.2.69 → 1.2.71

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

@@ -0,0 +1,13 @@
+import { ClassInfo } from "lit/directives/class-map.js";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+export interface FtBaseInputLabelProperties {
+    text?: string;
+    raised?: boolean;
+}
+export declare class FtBaseInputLabel extends FtLitElement implements FtBaseInputLabelProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    text: string;
+    raised: boolean;
+    get inputLabelClasses(): ClassInfo;
+    protected render(): import("lit-html").TemplateResult<1>;
+}

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

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

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

@@ -1,12 +1,12 @@
-import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
 import { FtInputLabelProperties } from "./ft-input-label.properties";
-export declare class FtInputLabel extends FtLitElement implements FtInputLabelProperties {
+import { FtBaseInputLabel } from "./ft-base-input-label";
+import { ClassInfo } from "lit/development/directives/class-map";
+export declare class FtInputLabel extends FtBaseInputLabel implements FtInputLabelProperties {
     static elementDefinitions: ElementDefinitionsMap;
-    static styles: import("lit").CSSResult[];
-    text: string;
-    raised: boolean;
     outlined: boolean;
-    disabled: boolean;
     error: boolean;
-    protected render(): import("lit-html").TemplateResult<1>;
+    disabled: boolean;
+    static styles: import("lit").CSSResult[];
+    get inputLabelClasses(): ClassInfo;
 }

package/build/ft-input-label.js

@@ -4,39 +4,25 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 } from "lit";
 import { property } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtTypographyCaption } from "@fluid-topics/ft-typography/build/ft-typography.styles";
 import { styles } from "./ft-input-label.styles";
-class FtInputLabel extends FtLitElement {
+import { FtBaseInputLabel } from "./ft-base-input-label";
+class FtInputLabel extends FtBaseInputLabel {
     constructor() {
         super(...arguments);
-        this.text = "";
-        this.raised = false;
         this.outlined = false;
-        this.disabled = false;
         this.error = false;
+        this.disabled = false;
     }
-    render() {
-        const classes = {
+    get inputLabelClasses() {
+        return {
             "ft-input-label": true,
             "ft-input-label--raised": this.raised,
             "ft-input-label--outlined": this.outlined,
             "ft-input-label--disabled": this.disabled,
             "ft-input-label--in-error": this.error,
         };
-        return html `
-            <div class="${classMap(classes)}">
-                ${this.text ? html `
-                    <div class="ft-input-label--text ft-typography--caption">
-                        <span class="ft-input-label--floating-text">${this.text}</span>
-                        <span class="ft-input-label--hidden-text" aria-hidden="true">${this.text}</span>
-                    </div>
-                ` : null}
-            </div>
-        `;
     }
 }
 FtInputLabel.elementDefinitions = {};
@@ -44,19 +30,13 @@ FtInputLabel.styles = [
     FtTypographyCaption,
     styles
 ];
-__decorate([
-    property({ type: String })
-], FtInputLabel.prototype, "text", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtInputLabel.prototype, "raised", void 0);
 __decorate([
     property({ type: Boolean })
 ], FtInputLabel.prototype, "outlined", void 0);
 __decorate([
     property({ type: Boolean })
-], FtInputLabel.prototype, "disabled", void 0);
+], FtInputLabel.prototype, "error", void 0);
 __decorate([
     property({ type: Boolean })
-], FtInputLabel.prototype, "error", void 0);
+], FtInputLabel.prototype, "disabled", void 0);
 export { FtInputLabel };