@bulmil/core
Version:
76 lines (71 loc) • 11.8 kB
JavaScript
/*!
* Bulmil - MIT License
*/
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
const fileCss = ".file-cta,.file-name{-moz-appearance:none;-webkit-appearance:none;-ms-flex-align:center;align-items:center;border:1px solid transparent;border-radius:4px;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{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.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:hsl(0, 0%, 100%);border-color:transparent;color:hsl(0, 0%, 4%)}.file.is-white:hover .file-cta,.file.is-white.is-hovered .file-cta{background-color:#f9f9f9;border-color:transparent;color:hsl(0, 0%, 4%)}.file.is-white:focus .file-cta,.file.is-white.is-focused .file-cta{border-color:transparent;box-shadow:0 0 0.5em rgba(255, 255, 255, 0.25);color:hsl(0, 0%, 4%)}.file.is-white:active .file-cta,.file.is-white.is-active .file-cta{background-color:#f2f2f2;border-color:transparent;color:hsl(0, 0%, 4%)}.file.is-black .file-cta{background-color:hsl(0, 0%, 4%);border-color:transparent;color:hsl(0, 0%, 100%)}.file.is-black:hover .file-cta,.file.is-black.is-hovered .file-cta{background-color:#040404;border-color:transparent;color:hsl(0, 0%, 100%)}.file.is-black:focus .file-cta,.file.is-black.is-focused .file-cta{border-color:transparent;box-shadow:0 0 0.5em rgba(10, 10, 10, 0.25);color:hsl(0, 0%, 100%)}.file.is-black:active .file-cta,.file.is-black.is-active .file-cta{background-color:black;border-color:transparent;color:hsl(0, 0%, 100%)}.file.is-light .file-cta{background-color:hsl(0, 0%, 96%);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;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:hsl(0, 0%, 21%);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;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;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;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:hsl(207, 61%, 53%);border-color:transparent;color:#fff}.file.is-info:hover .file-cta,.file.is-info.is-hovered .file-cta{background-color:#3488ce;border-color:transparent;color:#fff}.file.is-info:focus .file-cta,.file.is-info.is-focused .file-cta{border-color:transparent;box-shadow:0 0 0.5em rgba(62, 142, 208, 0.25);color:#fff}.file.is-info:active .file-cta,.file.is-info.is-active .file-cta{background-color:#3082c5;border-color:transparent;color:#fff}.file.is-success .file-cta{background-color:hsl(153, 53%, 53%);border-color:transparent;color:#fff}.file.is-success:hover .file-cta,.file.is-success.is-hovered .file-cta{background-color:#3ec487;border-color:transparent;color:#fff}.file.is-success:focus .file-cta,.file.is-success.is-focused .file-cta{border-color:transparent;box-shadow:0 0 0.5em rgba(72, 199, 142, 0.25);color:#fff}.file.is-success:active .file-cta,.file.is-success.is-active .file-cta{background-color:#3abb81;border-color:transparent;color:#fff}.file.is-warning .file-cta{background-color:hsl(44, 100%, 77%);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:#ffdc7d;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;box-shadow:0 0 0.5em rgba(255, 224, 138, 0.25);color:rgba(0, 0, 0, 0.7)}.file.is-warning:active .file-cta,.file.is-warning.is-active .file-cta{background-color:#ffd970;border-color:transparent;color:rgba(0, 0, 0, 0.7)}.file.is-danger .file-cta{background-color:hsl(348, 86%, 61%);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;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-normal{font-size:1rem}.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:hsl(0, 0%, 21%)}.file-label:hover .file-name{border-color:#d5d5d5}.file-label:active .file-cta{background-color:#e8e8e8;color:hsl(0, 0%, 21%)}.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:hsl(0, 0%, 86%);border-radius:4px;font-size:1em;padding-left:1em;padding-right:1em;white-space:nowrap}.file-cta{background-color:hsl(0, 0%, 96%);color:hsl(0, 0%, 29%)}.file-name{border-color:hsl(0, 0%, 86%);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 BmFileStyle0 = fileCss;
const FileInput = /*@__PURE__*/ proxyCustomElement(class FileInput extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.handleFileChange = (event) => {
this.file = event.target.files[0];
};
this.name = '';
this.placeholder = 'Choose a file…';
this.color = undefined;
this.size = undefined;
this.alignment = undefined;
this.hasName = false;
this.isRight = false;
this.isFullwidth = false;
this.file = undefined;
this.isBoxed = false;
}
get fileName() {
return this.file && this.file.name;
}
get displayName() {
return this.hasName && Boolean(this.fileName);
}
render() {
return (h("div", { key: 'f3eec4d9b6fc133c7da3d944d2cfde2eef933372', 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", { key: 'fbdbda44685cc706db00e8cd806ab1571f4fbbaf', class: "file-label" }, h("input", { key: '852e6564788eb78cf7ee353c3fca5301406ea34e', onChange: this.handleFileChange, class: "file-input", type: "file", name: this.name }), h("span", { key: 'fd1a527e1e4c344b30bec5bf6c992463f7e55065', class: "file-cta" }, h("span", { key: 'c11e986c682b3e64bba5d9ff322f0b1b52abfe04', class: "file-icon" }, h("i", { key: '33e7d7c2465ac660100395afcc777347e55366be', class: "fas fa-upload" })), h("span", { key: 'a53ebd921892faf1b7ceb6787ff4101db39564aa', class: "file-label" }, this.placeholder)), this.displayName && h("span", { key: 'a69e9d84777680645cde26581f4950961a12e307', class: "file-name" }, this.fileName))));
}
static get style() { return BmFileStyle0; }
}, [0, "bm-file", {
"name": [1],
"placeholder": [1],
"color": [1],
"size": [1],
"alignment": [1],
"hasName": [4, "has-name"],
"isRight": [4, "is-right"],
"isFullwidth": [4, "is-fullwidth"],
"file": [1040],
"isBoxed": [4, "is-boxed"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["bm-file"];
components.forEach(tagName => { switch (tagName) {
case "bm-file":
if (!customElements.get(tagName)) {
customElements.define(tagName, FileInput);
}
break;
} });
}
const BmFile = FileInput;
const defineCustomElement = defineCustomElement$1;
export { BmFile, defineCustomElement };