@cbpds/web-components
Version:
Web components for the CBP Design System.
237 lines (236 loc) • 9.46 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps, createNamespaceKey } from "../../utils/utils";
export class CbpFileInput {
constructor() {
this.name = undefined;
this.fieldId = createNamespaceKey('cbp-file-input');
this.multiple = undefined;
this.accept = undefined;
this.context = undefined;
this.sx = {};
this.files = [];
}
handleChange(e) {
let files = [];
for (let i = 0; i < e.target.files.length; i++) {
files = [...files, e.target.files[i]];
}
this.files = files;
this.valueChange.emit({
host: this.host,
nativeElement: this.formField,
value: this.formField.value,
});
}
watchDisabledHandler(newValue) {
if (this.formField) {
(newValue)
? this.formField.setAttribute('disabled', '')
: this.formField.removeAttribute('disabled');
}
}
handleDelete() {
this.formField.value = '';
this.files = [];
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
this.formField = this.host.querySelector('input[type=file]');
if (this.formField) {
const Id = this.formField.getAttribute('id');
Id ? this.fieldId = Id : this.formField.setAttribute('id', this.fieldId);
this.formField.addEventListener('change', (e) => this.handleChange(e));
}
}
componentDidLoad() {
if (!!this.formField) {
if (this.multiple)
this.formField.setAttribute('multiple', '');
if (this.accept)
this.formField.setAttribute('accept', this.accept);
if (this.name)
this.formField.setAttribute('name', this.name);
}
}
render() {
let fileList = [];
if (this.files.length > 0) {
this.files.forEach((item) => {
fileList = [
...fileList,
h("div", null, h("span", null, item.name), h("cbp-button", { fill: "ghost", color: "secondary", value: item.name }, h("cbp-icon", { name: "times" })))
];
});
}
let msg = this.files.length > 0
? `Drag & Drop File${this.multiple ? 's' : ''} Here or Browse to Replace`
: `Drag & Drop File${this.multiple ? 's' : ''} Here or Browse`;
return (h(Host, { key: 'ab73981581eb3363d0915001aa8ca15240b5e274' }, h("div", { key: '86e534135eed075da21adbf505f8b281c73cd300', class: "cbp-file-input-wrapper" }, h("div", { key: 'ec70acd5bde307cbcf9ce795ca02b05a73694d27', class: "cbp-file-input-visuals" }, h("cbp-icon", { key: '273288ef24b8c1308e94ec70bb6c639b6a3d2def', name: "file-lines", size: "2rem", color: "var(--cbp-color-text-base)" }), h("div", { key: '1e89dc6c158c7df8c23a5f21317247bf3e4c49af', class: "cbp-file-input-text" }, msg), h("cbp-button", { key: 'b89ce6041203d9f888a5a0691a5042fbd31059b3', fill: "solid", color: "secondary" }, h("button", { key: 'fe3f70303e74cf64839f2fd4a4bcfea1b0c37044', slot: "cbp-button-custom", type: "button", tabindex: "-1", "aria-hidden": "true" }, h("cbp-icon", { key: 'a30e9cfe06648501817e29796315898907ec30c7', name: "upload" }), "Browse"))), h("slot", { key: '2421056d3cd8f7bc4ba679a852752fe357d2aeb8' })), (this.files.length > 0) &&
h("div", { key: 'd3e3cfbd7ad9141baa2521826a56a9f89760e6a0', class: "cbp-file-input-filelist" }, fileList)));
}
static get is() { return "cbp-file-input"; }
static get originalStyleUrls() {
return {
"$": ["cbp-file-input.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-file-input.css"]
};
}
static get properties() {
return {
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The `name` attribute of the input, which is passed as part of formData (as a key)."
},
"attribute": "name",
"reflect": false
},
"fieldId": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Optionally specify the ID of the input here, which is used to generate related pattern node IDs and associate everything for accessibility."
},
"attribute": "field-id",
"reflect": false,
"defaultValue": "createNamespaceKey('cbp-file-input')"
},
"multiple": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies whether the file input accepts multiple files rather than a single file (may also be set directly on the slotted input)."
},
"attribute": "multiple",
"reflect": false
},
"accept": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the files types accepted by the file input (may also be set directly on the slotted input). This property is merely a suggestion to the browser and any file type restrictions should still be enforced in form validation."
},
"attribute": "accept",
"reflect": false
},
"context": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'",
"resolved": "\"dark-always\" | \"dark-inverts\" | \"light-always\" | \"light-inverts\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified."
},
"attribute": "context",
"reflect": true
},
"sx": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Supports adding inline styles as an object"
},
"attribute": "sx",
"reflect": false,
"defaultValue": "{}"
}
};
}
static get states() {
return {
"files": {}
};
}
static get events() {
return [{
"method": "valueChange",
"name": "valueChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "A custom event emitted when the click event occurs for either a rendered button or anchor/link."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "disabled",
"methodName": "watchDisabledHandler"
}];
}
static get listeners() {
return [{
"name": "buttonClick",
"method": "handleDelete",
"target": undefined,
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=cbp-file-input.js.map