@fluid-topics/ft-file-button 2.0.38 → 2.1.1

package/build/definitions.d.ts

@@ -1,7 +1,5 @@
-import { FtdsFileButton } from "./ftds-file-button";
 import { FtFileButton } from "./ft-file-button";
 declare const _default: {
     "ft-file-button": typeof FtFileButton;
-    "ftds-file-button": typeof FtdsFileButton;
 };
 export default _default;

package/build/definitions.js

@@ -1,6 +1,4 @@
-import { FtdsFileButton } from "./ftds-file-button";
 import { FtFileButton } from "./ft-file-button";
 export default {
     "ft-file-button": FtFileButton,
-    "ftds-file-button": FtdsFileButton,
 };

package/build/ft-file-button.d.ts

@@ -1,6 +1,24 @@
-import { FtBaseFileButton } from "./ft-base-file-button";
-import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
-export declare class FtFileButton extends FtBaseFileButton {
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtFileButtonProperties } from "./ft-file-button.properties";
+import { FtIconVariants } from "@fluid-topics/ft-icon";
+export declare class FileChangeEvent extends CustomEvent<{
+    file: File;
+}> {
+    constructor(file: File);
+}
+export declare class FtFileButton extends FtLitElement implements FtFileButtonProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult;
+    disabled: boolean;
+    label: string;
+    icon?: string;
+    iconVariant?: FtIconVariants;
+    trailingIcon: boolean;
+    accept: string;
+    private input;
+    private button;
+    focus(): void;
+    clear(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private onFileChange;
 }

package/build/ft-file-button.js

@@ -1,9 +1,84 @@
-import { FtBaseFileButton } from "./ft-base-file-button";
+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, query, } from "lit/decorators.js";
+import { FtLitElement, } from "@fluid-topics/ft-wc-utils";
 import { FtButton } from "@fluid-topics/ft-button";
-import { styles } from "./ft-file-button.styles";
-export class FtFileButton extends FtBaseFileButton {
+import { fileButtonStyles } from "./ft-file-button.styles";
+export class FileChangeEvent extends CustomEvent {
+    constructor(file) {
+        super("change", { detail: { file } });
+    }
+}
+export class FtFileButton extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.label = "";
+        this.icon = undefined;
+        this.trailingIcon = false;
+        this.accept = "";
+    }
+    focus() {
+        this.button.focus();
+    }
+    clear() {
+        this.input.value = "";
+    }
+    render() {
+        return html `
+            <div class="ft-file-button">
+                <ft-button ?disabled=${this.disabled}
+                           label="${this.label}"
+                           icon="${this.icon}"
+                           .iconVariant=${this.iconVariant}
+                           ?trailingIcon=${this.trailingIcon}
+                           @click=${() => this.input.click()}>
+                    <slot></slot>
+                </ft-button>
+                <input class="ft-file-button--input"
+                       type="file"
+                       accept="${this.accept}"
+                       @change=${this.onFileChange}
+                       hidden/>
+            </div>
+        `;
+    }
+    onFileChange() {
+        if (this.input.files.length > 0) {
+            this.dispatchEvent(new FileChangeEvent(this.input.files.item(0)));
+        }
+    }
 }
 FtFileButton.elementDefinitions = {
-    "ft-or-ftds-button": FtButton,
+    "ft-button": FtButton,
 };
-FtFileButton.styles = styles;
+FtFileButton.styles = fileButtonStyles;
+__decorate([
+    property({ type: Boolean })
+], FtFileButton.prototype, "disabled", void 0);
+__decorate([
+    property()
+], FtFileButton.prototype, "label", void 0);
+__decorate([
+    property()
+], FtFileButton.prototype, "icon", void 0);
+__decorate([
+    property()
+], FtFileButton.prototype, "iconVariant", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtFileButton.prototype, "trailingIcon", void 0);
+__decorate([
+    property()
+], FtFileButton.prototype, "accept", void 0);
+__decorate([
+    query(".ft-file-button--input")
+], FtFileButton.prototype, "input", void 0);
+__decorate([
+    query("ft-button")
+], FtFileButton.prototype, "button", void 0);