UNPKG

10.6 kBJavaScriptView Raw
1import { r as registerInstance, h } from './index-d9cbe763.js';
2
3const 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-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:left;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}";
4
5const FileInput = class {
6 constructor(hostRef) {
7 registerInstance(this, hostRef);
8 /**
9 * CSS Classes
10 */
11 this.class = '';
12 /**
13 * Name
14 */
15 this.name = '';
16 /**
17 * Placeholder
18 */
19 this.placeholder = 'Choose a file…';
20 /**
21 * Add a placeholder for the selected file name
22 */
23 this.hasName = false;
24 /**
25 * Move the CTA to the right side
26 */
27 this.isRight = false;
28 /**
29 * Expand the name to fill up the space
30 */
31 this.isFullwidth = false;
32 /**
33 * Boxed block
34 */
35 this.isBoxed = false;
36 this.handleFileChange = (event) => {
37 this.file = event.target.files[0];
38 };
39 }
40 get fileName() {
41 return this.file && this.file.name;
42 }
43 get displayName() {
44 return this.hasName && Boolean(this.fileName);
45 }
46 render() {
47 return (h("div", { class: {
48 file: true,
49 [this.size]: Boolean(this.size),
50 [this.color]: Boolean(this.color),
51 [this.alignment]: Boolean(this.alignment),
52 'has-name': this.displayName,
53 'is-right': this.isRight,
54 'is-fullwidth': this.isFullwidth,
55 'is-boxed': this.isBoxed,
56 [this.class]: Boolean(this.class),
57 } }, 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))));
58 }
59};
60FileInput.style = fileCss;
61
62export { FileInput as bm_file };