@fluid-topics/ftds-file-button 2.1.0

package/README.md

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

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 { FtdsFileButton } from "./ftds-file-button";
+declare const _default: {
+    "ftds-file-button": typeof FtdsFileButton;
+};
+export default _default;

package/build/definitions.js

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

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

@@ -0,0 +1,26 @@
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtdsIcons, FtdsIconVariants } from "@fluid-topics/ftds-icon";
+import { FtdsFileButtonProperties } from "./ftds-file-button.properties";
+export declare class FileChangeEvent extends CustomEvent<{
+    file: File;
+}> {
+    constructor(file: File);
+}
+declare const FtdsFileButton_base: import("@fluid-topics/ft-wc-utils").FtdsBaseType<typeof FtLitElement>;
+export declare class FtdsFileButton extends FtdsFileButton_base implements FtdsFileButtonProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    disabled: boolean;
+    label: string;
+    icon?: FtdsIcons;
+    iconVariant?: FtdsIconVariants;
+    trailingIcon: boolean;
+    accept: string;
+    private input;
+    private button;
+    focus(): void;
+    clear(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private onFileChange;
+}
+export {};

package/build/ftds-file-button.js

@@ -0,0 +1,85 @@
+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 { styles } from "./ftds-file-button.styles";
+import { FtdsButton } from "@fluid-topics/ftds-button";
+import { html } from "lit";
+import { property, query, } from "lit/decorators.js";
+import { FtLitElement, toFtdsBase, } from "@fluid-topics/ft-wc-utils";
+export class FileChangeEvent extends CustomEvent {
+    constructor(file) {
+        super("change", { detail: { file } });
+    }
+}
+export class FtdsFileButton extends toFtdsBase(FtLitElement) {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.label = "";
+        this.trailingIcon = false;
+        this.accept = "";
+    }
+    focus() {
+        this.button.focus();
+    }
+    clear() {
+        this.input.value = "";
+    }
+    render() {
+        return html `
+            <div class="ftds-file-button">
+                <ftds-button ?disabled=${this.disabled}
+                             label="${this.label}"
+                             family="${this.family}"
+                             size="${this.size}"
+                             icon="${this.icon}"
+                             .iconVariant=${this.iconVariant}
+                             ?trailingIcon=${this.trailingIcon}
+                             @click=${() => this.input.click()}>
+                    <slot></slot>
+                </ftds-button>
+                <input class="ftds-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)));
+        }
+    }
+}
+FtdsFileButton.elementDefinitions = {
+    "ftds-button": FtdsButton,
+};
+FtdsFileButton.styles = styles;
+__decorate([
+    property({ type: Boolean })
+], FtdsFileButton.prototype, "disabled", void 0);
+__decorate([
+    property()
+], FtdsFileButton.prototype, "label", void 0);
+__decorate([
+    property()
+], FtdsFileButton.prototype, "icon", void 0);
+__decorate([
+    property()
+], FtdsFileButton.prototype, "iconVariant", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsFileButton.prototype, "trailingIcon", void 0);
+__decorate([
+    property()
+], FtdsFileButton.prototype, "accept", void 0);
+__decorate([
+    query(".ftds-file-button--input")
+], FtdsFileButton.prototype, "input", void 0);
+__decorate([
+    query("ftds-button")
+], FtdsFileButton.prototype, "button", void 0);