bulmil/dist/esm/bm-file.entry.js

import { r as registerInstance, h } from './index-d4feb066.js';

const fileCss = ".file{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.file-cta,.file-name{-moz-appearance:none;-webkit-appearance:none;-ms-flex-align:center;align-items:center;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:none;box-shadow:none;display:-ms-inline-flexbox;display:inline-flex;font-size:1rem;height:2.5em;-ms-flex-pack:start;justify-content:flex-start;line-height:1.5;padding-bottom:calc(0.5em - 1px);padding-left:calc(0.75em - 1px);padding-right:calc(0.75em - 1px);padding-top:calc(0.5em - 1px);position:relative;vertical-align:top}.file-cta:focus,.file-name:focus,.is-focused.file-cta,.is-focused.file-name,.file-cta:active,.file-name:active,.is-active.file-cta,.is-active.file-name{outline:none}[disabled].file-cta,[disabled].file-name,fieldset[disabled] .file-cta,fieldset[disabled] .file-name{cursor:not-allowed}.file{-ms-flex-align:stretch;align-items:stretch;display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;position:relative}.file.is-white .file-cta{background-color:white;border-color:transparent;color:#0a0a0a}.file.is-white:hover .file-cta,.file.is-white.is-hovered .file-cta{background-color:#f9f9f9;border-color:transparent;color:#0a0a0a}.file.is-white:focus .file-cta,.file.is-white.is-focused .file-cta{border-color:transparent;-webkit-box-shadow:0 0 0.5em rgba(255, 255, 255, 0.25);box-shadow:0 0 0.5em rgba(255, 255, 255, 0.25);color:#0a0a0a}.file.is-white:active .file-cta,.file.is-white.is-active .file-cta{background-color:#f2f2f2;border-color:transparent;color:#0a0a0a}.file.is-black .file-cta{background-color:#0a0a0a;border-color:transparent;color:white}.file.is-black:hover .file-cta,.file.is-black.is-hovered .file-cta{background-color:#040404;border-color:transparent;color:white}.file.is-black:focus .file-cta,.file.is-black.is-focused .file-cta{border-color:transparent;-webkit-box-shadow:0 0 0.5em rgba(10, 10, 10, 0.25);box-shadow:0 0 0.5em rgba(10, 10, 10, 0.25);color:white}.file.is-black:active .file-cta,.file.is-black.is-active .file-cta{background-color:black;border-color:transparent;color:white}.file.is-light .file-cta{background-color:whitesmoke;border-color:transparent;color:rgba(0, 0, 0, 0.7)}.file.is-light:hover .file-cta,.file.is-light.is-hovered .file-cta{background-color:#eeeeee;border-color:transparent;color:rgba(0, 0, 0, 0.7)}.file.is-light:focus .file-cta,.file.is-light.is-focused .file-cta{border-color:transparent;-webkit-box-shadow:0 0 0.5em rgba(245, 245, 245, 0.25);box-shadow:0 0 0.5em rgba(245, 245, 245, 0.25);color:rgba(0, 0, 0, 0.7)}.file.is-light:active .file-cta,.file.is-light.is-active .file-cta{background-color:#e8e8e8;border-color:transparent;color:rgba(0, 0, 0, 0.7)}.file.is-dark .file-cta{background-color:#363636;border-color:transparent;color:#fff}.file.is-dark:hover .file-cta,.file.is-dark.is-hovered .file-cta{background-color:#2f2f2f;border-color:transparent;color:#fff}.file.is-dark:focus .file-cta,.file.is-dark.is-focused .file-cta{border-color:transparent;-webkit-box-shadow:0 0 0.5em rgba(54, 54, 54, 0.25);box-shadow:0 0 0.5em rgba(54, 54, 54, 0.25);color:#fff}.file.is-dark:active .file-cta,.file.is-dark.is-active .file-cta{background-color:#292929;border-color:transparent;color:#fff}.file.is-primary .file-cta{background-color:#5851ff;border-color:transparent;color:#fff}.file.is-primary:hover .file-cta,.file.is-primary.is-hovered .file-cta{background-color:#4c44ff;border-color:transparent;color:#fff}.file.is-primary:focus .file-cta,.file.is-primary.is-focused .file-cta{border-color:transparent;-webkit-box-shadow:0 0 0.5em rgba(88, 81, 255, 0.25);box-shadow:0 0 0.5em rgba(88, 81, 255, 0.25);color:#fff}.file.is-primary:active .file-cta,.file.is-primary.is-active .file-cta{background-color:#4038ff;border-color:transparent;color:#fff}.file.is-link .file-cta{background-color:#5851ff;border-color:transparent;color:#fff}.file.is-link:hover .file-cta,.file.is-link.is-hovered .file-cta{background-color:#4c44ff;border-color:transparent;color:#fff}.file.is-link:focus .file-cta,.file.is-link.is-focused .file-cta{border-color:transparent;-webkit-box-shadow:0 0 0.5em rgba(88, 81, 255, 0.25);box-shadow:0 0 0.5em rgba(88, 81, 255, 0.25);color:#fff}.file.is-link:active .file-cta,.file.is-link.is-active .file-cta{background-color:#4038ff;border-color:transparent;color:#fff}.file.is-info .file-cta{background-color:#3298dc;border-color:transparent;color:#fff}.file.is-info:hover .file-cta,.file.is-info.is-hovered .file-cta{background-color:#2793da;border-color:transparent;color:#fff}.file.is-info:focus .file-cta,.file.is-info.is-focused .file-cta{border-color:transparent;-webkit-box-shadow:0 0 0.5em rgba(50, 152, 220, 0.25);box-shadow:0 0 0.5em rgba(50, 152, 220, 0.25);color:#fff}.file.is-info:active .file-cta,.file.is-info.is-active .file-cta{background-color:#238cd1;border-color:transparent;color:#fff}.file.is-success .file-cta{background-color:#48c774;border-color:transparent;color:#fff}.file.is-success:hover .file-cta,.file.is-success.is-hovered .file-cta{background-color:#3ec46d;border-color:transparent;color:#fff}.file.is-success:focus .file-cta,.file.is-success.is-focused .file-cta{border-color:transparent;-webkit-box-shadow:0 0 0.5em rgba(72, 199, 116, 0.25);box-shadow:0 0 0.5em rgba(72, 199, 116, 0.25);color:#fff}.file.is-success:active .file-cta,.file.is-success.is-active .file-cta{background-color:#3abb67;border-color:transparent;color:#fff}.file.is-warning .file-cta{background-color:#ffdd57;border-color:transparent;color:rgba(0, 0, 0, 0.7)}.file.is-warning:hover .file-cta,.file.is-warning.is-hovered .file-cta{background-color:#ffdb4a;border-color:transparent;color:rgba(0, 0, 0, 0.7)}.file.is-warning:focus .file-cta,.file.is-warning.is-focused .file-cta{border-color:transparent;-webkit-box-shadow:0 0 0.5em rgba(255, 221, 87, 0.25);box-shadow:0 0 0.5em rgba(255, 221, 87, 0.25);color:rgba(0, 0, 0, 0.7)}.file.is-warning:active .file-cta,.file.is-warning.is-active .file-cta{background-color:#ffd83d;border-color:transparent;color:rgba(0, 0, 0, 0.7)}.file.is-danger .file-cta{background-color:#f14668;border-color:transparent;color:#fff}.file.is-danger:hover .file-cta,.file.is-danger.is-hovered .file-cta{background-color:#f03a5f;border-color:transparent;color:#fff}.file.is-danger:focus .file-cta,.file.is-danger.is-focused .file-cta{border-color:transparent;-webkit-box-shadow:0 0 0.5em rgba(241, 70, 104, 0.25);box-shadow:0 0 0.5em rgba(241, 70, 104, 0.25);color:#fff}.file.is-danger:active .file-cta,.file.is-danger.is-active .file-cta{background-color:#ef2e55;border-color:transparent;color:#fff}.file.is-small{font-size:0.75rem}.file.is-medium{font-size:1.25rem}.file.is-medium .file-icon .fa{font-size:21px}.file.is-large{font-size:1.5rem}.file.is-large .file-icon .fa{font-size:28px}.file.has-name .file-cta{border-bottom-right-radius:0;border-top-right-radius:0}.file.has-name .file-name{border-bottom-left-radius:0;border-top-left-radius:0}.file.has-name.is-empty .file-cta{border-radius:4px}.file.has-name.is-empty .file-name{display:none}.file.is-boxed .file-label{-ms-flex-direction:column;flex-direction:column}.file.is-boxed .file-cta{-ms-flex-direction:column;flex-direction:column;height:auto;padding:1em 3em}.file.is-boxed .file-name{border-width:0 1px 1px}.file.is-boxed .file-icon{height:1.5em;width:1.5em}.file.is-boxed .file-icon .fa{font-size:21px}.file.is-boxed.is-small .file-icon .fa{font-size:14px}.file.is-boxed.is-medium .file-icon .fa{font-size:28px}.file.is-boxed.is-large .file-icon .fa{font-size:35px}.file.is-boxed.has-name .file-cta{border-radius:4px 4px 0 0}.file.is-boxed.has-name .file-name{border-radius:0 0 4px 4px;border-width:0 1px 1px}.file.is-centered{-ms-flex-pack:center;justify-content:center}.file.is-fullwidth .file-label{width:100%}.file.is-fullwidth .file-name{-ms-flex-positive:1;flex-grow:1;max-width:none}.file.is-right{-ms-flex-pack:end;justify-content:flex-end}.file.is-right .file-cta{border-radius:0 4px 4px 0}.file.is-right .file-name{border-radius:4px 0 0 4px;border-width:1px 0 1px 1px;-ms-flex-order:-1;order:-1}.file-label{-ms-flex-align:stretch;align-items:stretch;display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-pack:start;justify-content:flex-start;overflow:hidden;position:relative}.file-label:hover .file-cta{background-color:#eeeeee;color:#363636}.file-label:hover .file-name{border-color:#d5d5d5}.file-label:active .file-cta{background-color:#e8e8e8;color:#363636}.file-label:active .file-name{border-color:#cfcfcf}.file-input{height:100%;left:0;opacity:0;outline:none;position:absolute;top:0;width:100%}.file-cta,.file-name{border-color:#dbdbdb;border-radius:4px;font-size:1em;padding-left:1em;padding-right:1em;white-space:nowrap}.file-cta{background-color:whitesmoke;color:#4a4a4a}.file-name{border-color:#dbdbdb;border-style:solid;border-width:1px 1px 1px 0;display:block;max-width:16em;overflow:hidden;text-align:inherit;text-overflow:ellipsis}.file-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;height:1em;-ms-flex-pack:center;justify-content:center;margin-right:0.5em;width:1em}.file-icon .fa{font-size:14px}";

const FileInput = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Name
         */
        this.name = '';
        /**
         * Placeholder
         */
        this.placeholder = 'Choose a file…';
        /**
         * Add a placeholder for the selected file name
         */
        this.hasName = false;
        /**
         * Move the CTA to the right side
         */
        this.isRight = false;
        /**
         * Expand the name to fill up the space
         */
        this.isFullwidth = false;
        /**
         * Boxed block
         */
        this.isBoxed = false;
        this.handleFileChange = (event) => {
            this.file = event.target.files[0];
        };
    }
    get fileName() {
        return this.file && this.file.name;
    }
    get displayName() {
        return this.hasName && Boolean(this.fileName);
    }
    render() {
        return (h("div", { class: {
                file: true,
                [this.size]: Boolean(this.size),
                [this.color]: Boolean(this.color),
                [this.alignment]: Boolean(this.alignment),
                'has-name': this.displayName,
                'is-right': this.isRight,
                'is-fullwidth': this.isFullwidth,
                'is-boxed': this.isBoxed,
            } }, h("label", { class: "file-label" }, h("input", { onChange: this.handleFileChange, class: "file-input", type: "file", name: this.name }), h("span", { class: "file-cta" }, h("span", { class: "file-icon" }, h("i", { class: "fas fa-upload" })), h("span", { class: "file-label" }, this.placeholder)), this.displayName && h("span", { class: "file-name" }, this.fileName))));
    }
};
FileInput.style = fileCss;

export { FileInput as bm_file };