@fluid-topics/ft-file-button 0.1.10

package/README.md

@@ -0,0 +1,19 @@
+File
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-file-button
+yarn add @fluid-topics/ft-file-button
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-file-button"
+
+function render() {
+    return html` <ft-file-button accept="*.pdf">Upload a file</ft-file-button> `
+}
+```

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

@@ -0,0 +1,27 @@
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+export interface FtFileButtonProperties {
+    disabled: boolean;
+    label: string;
+    icon?: string;
+    trailingIcon: boolean;
+    accept: string;
+}
+export declare const FtFileButtonCssVariables: {};
+export declare class FileChangeEvent extends CustomEvent<{
+    file: File;
+}> {
+    constructor(file: File);
+}
+export declare class FtFileButton extends FtLitElement implements FtFileButtonProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    protected getStyles(): import("lit").CSSResult;
+    disabled: boolean;
+    label: string;
+    icon?: string;
+    trailingIcon: boolean;
+    accept: string;
+    private input;
+    protected getTemplate(): import("lit-html").TemplateResult<1>;
+    private onFileChange;
+}
+//# sourceMappingURL=ft-file-button.d.ts.map

package/build/ft-file-button.js

@@ -0,0 +1,84 @@
+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 { css, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import { customElement, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtButton } from "@fluid-topics/ft-button";
+export const FtFileButtonCssVariables = {};
+export class FileChangeEvent extends CustomEvent {
+    constructor(file) {
+        super("change", { detail: { file } });
+    }
+}
+let FtFileButton = class FtFileButton extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.label = "";
+        this.icon = undefined;
+        this.trailingIcon = false;
+        this.accept = "";
+    }
+    getStyles() {
+        // language=CSS
+        return css `
+            .ft-file-button {
+            }
+        `;
+    }
+    getTemplate() {
+        return html `
+            <div class="ft-file-button">
+                <ft-button primary
+                           ?disabled=${this.disabled}
+                           label="${this.label}"
+                           icon="${this.icon}"
+                           ?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() {
+        var _a;
+        if (((_a = this.input.files) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            this.dispatchEvent(new FileChangeEvent(this.input.files.item(0)));
+        }
+    }
+};
+FtFileButton.elementDefinitions = {
+    "ft-button": FtButton,
+};
+__decorate([
+    property({ type: Boolean })
+], FtFileButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], FtFileButton.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], FtFileButton.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtFileButton.prototype, "trailingIcon", void 0);
+__decorate([
+    property({ type: String })
+], FtFileButton.prototype, "accept", void 0);
+__decorate([
+    query(".ft-file-button--input")
+], FtFileButton.prototype, "input", void 0);
+FtFileButton = __decorate([
+    customElement("ft-file-button")
+], FtFileButton);
+export { FtFileButton };
+//# sourceMappingURL=ft-file-button.js.map