@cbpds/web-components
Version:
Web components for the CBP Design System.
144 lines (140 loc) • 18.7 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-31e2d0a8.js';
import { c as createNamespaceKey, s as setCSSProps } from './utils-475ba472.js';
const cbpFileInputCss = "/* \n * Caution: \"global styles\" get injected into every component and can cause file size bloat.\n * These should only include SASS variables and mixins that are not written out to CSS directly\n */\n/**\n* @prop --cbp-file-input-color: var(--cbp-color-text-darkest);\n* @prop --cbp-file-input-color-bg: var(--cbp-color-white);\n* @prop --cbp-file-input-color-border: var(--cbp-color-interactive-secondary-base);\n* @prop --cbp-file-input-color-border-hover: var(--cbp-color-interactive-secondary-darker);\n* @prop --cbp-file-input-color-border-focus: var(--cbp-color-interactive-focus-dark);\n* @prop --cbp-file-input-color-outline: transparent;\n* @prop --cbp-file-input-color-outline-hover: var(--cbp-color-interactive-secondary-light);\n* @prop --cbp-file-input-color-outline-focus: var(--cbp-color-interactive-focus-light);\n\n* @prop --cbp-file-input-color-dark: var(--cbp-color-text-lightest);\n* @prop --cbp-file-input-color-bg-dark: var(--cbp-color-gray-cool-70);\n* @prop --cbp-file-input-color-border-dark: var(--cbp-color-interactive-secondary-light);\n* @prop --cbp-file-input-color-border-hover-dark: var(--cbp-color-interactive-secondary-lighter);\n* @prop --cbp-file-input-color-border-focus-dark:var(--cbp-color-interactive-focus-light);\n* @prop --cbp-file-input-color-outline-dark: transparent;\n* @prop --cbp-file-input-color-outline-hover-dark: var(--cbp-color-interactive-secondary-dark);\n* @prop --cbp-file-input-color-outline-focus-dark: var(--cbp-color-white);\n\n* @prop --cbp-file-input-icon-color: var(--cbp-color-text-base);\n* @prop --cbp-file-input-file-color-bg: var(--cbp-color-gray-cool-10);\n* @prop --cbp-file-input-file-color-bg-dark: var(--cbp-color-gray-cool-60);\n*/\n:root {\n --cbp-file-input-color: var(--cbp-color-text-darkest);\n --cbp-file-input-color-bg: var(--cbp-color-white);\n --cbp-file-input-color-bg-dragged: var(--cbp-color-interactive-primary-lighter);\n --cbp-file-input-color-border: var(--cbp-color-interactive-secondary-base);\n --cbp-file-input-color-border-hover: var(--cbp-color-interactive-secondary-darker);\n --cbp-file-input-color-border-focus: var(--cbp-color-interactive-focus-dark);\n --cbp-file-input-color-outline: transparent;\n --cbp-file-input-color-outline-hover: var(--cbp-color-interactive-secondary-light);\n --cbp-file-input-color-outline-focus: var(--cbp-color-interactive-focus-light);\n --cbp-file-input-color-dark: var(--cbp-color-text-lightest);\n --cbp-file-input-color-bg-dark: var(--cbp-color-gray-cool-70);\n --cbp-file-input-color-bg-dragged-dark: var(--cbp-color-interactive-primary-darker);\n --cbp-file-input-color-border-dark: var(--cbp-color-interactive-secondary-light);\n --cbp-file-input-color-border-hover-dark: var(--cbp-color-interactive-secondary-lighter);\n --cbp-file-input-color-border-focus-dark:var(--cbp-color-interactive-focus-light);\n --cbp-file-input-color-outline-dark: transparent;\n --cbp-file-input-color-outline-hover-dark: var(--cbp-color-interactive-secondary-dark);\n --cbp-file-input-color-outline-focus-dark: var(--cbp-color-white);\n --cbp-file-input-icon-color: var(--cbp-color-text-base);\n --cbp-file-input-file-color-bg: var(--cbp-color-gray-cool-10);\n --cbp-file-input-file-color-bg-dark: var(--cbp-color-gray-cool-60);\n --cbp-file-input-file-color-bg-error: var(--cbp-color-danger-lighter);\n --cbp-file-input-file-color-bg-error-dark: var(--cbp-color-danger-darker);\n}\n\n[data-cbp-theme=light] cbp-file-input[context*=dark],\n[data-cbp-theme=dark] cbp-file-input:not([context=dark-inverts]):not([context=light-always]) {\n --cbp-file-input-color-label: var(--cbp-file-input-color-label-dark);\n --cbp-file-input-color: var(--cbp-file-input-color-dark);\n --cbp-file-input-color-bg: var(--cbp-file-input-color-bg-dark);\n --cbp-file-input-color-bg-dragged: var(--cbp-file-input-color-bg-dragged-dark);\n --cbp-file-input-color-border: var(--cbp-file-input-color-border-dark);\n --cbp-file-input-color-border-hover: var(--cbp-file-input-color-border-hover-dark);\n --cbp-file-input-color-border-focus: var(--cbp-file-input-color-border-focus-dark);\n --cbp-file-input-color-outline: var(--cbp-file-input-color-outline-dark);\n --cbp-file-input-color-outline-hover: var(--cbp-file-input-color-outline-hover-dark);\n --cbp-file-input-color-outline-focus: var(--cbp-file-input-color-outline-focus-dark);\n --cbp-file-input-file-color-bg: var(--cbp-file-input-file-color-bg-dark);\n --cbp-file-input-file-color-bg-error: var(--cbp-file-input-file-color-bg-error-dark);\n}\n\ncbp-file-input {\n display: block;\n margin-block-start: var(--cbp-space-2x);\n container-type: inline-size;\n}\ncbp-file-input[error] {\n --cbp-file-input-color-border: var(--cbp-color-danger-dark);\n --cbp-file-input-color-border-hover: var(--cbp-color-danger-dark);\n --cbp-file-input-color-outline-hover: var(--cbp-color-danger-light);\n --cbp-file-input-color-border-dark: var(--cbp-color-danger-light);\n --cbp-file-input-color-border-hover-dark: var(--cbp-color-danger-lighter);\n --cbp-file-input-color-outline-hover-dark: var(--cbp-color-danger-light);\n}\ncbp-file-input[error] .cbp-file-input-visuals cbp-button {\n --cbp-button-color-bg: var(--cbp-color-danger-dark);\n --cbp-button-color-bg-hover: var(--cbp-color-danger-darker);\n --cbp-button-color-border: var(--cbp-color-danger-dark);\n --cbp-button-color-border-hover: var(--cbp-color-danger-darker);\n --cbp-button-color-bg-dark: var(--cbp-color-danger-light);\n --cbp-button-color-bg-hover-dark: var(--cbp-color-danger-lighter);\n --cbp-button-color-border-dark: var(--cbp-color-danger-light);\n --cbp-button-color-border-hover-dark: var(--cbp-color-danger-lighter);\n}\ncbp-file-input:has(input.cbp-file-input-dragged) {\n --cbp-file-input-color-bg: var(--cbp-file-input-color-bg-dragged);\n --cbp-file-input-color-bg-dark: var(--cbp-file-input-color-bg-dragged-dark);\n}\ncbp-file-input:has(input:disabled) {\n --cbp-file-input-color: var(--cbp-color-interactive-disabled-dark);\n --cbp-file-input-color-dark: var(--cbp-color-interactive-disabled-light);\n --cbp-file-input-color-bg: transparent;\n --cbp-file-input-color-bg-dark: transparent;\n --cbp-file-input-color-border: var(--cbp-color-interactive-disabled-dark);\n --cbp-file-input-color-border-dark: var(--cbp-color-interactive-disabled-light);\n --cbp-file-input-icon-color: currentColor;\n --cbp-file-input-file-color-bg: var(--cbp-color-interactive-disabled-light);\n --cbp-file-input-file-color-bg-dark: var(--cbp-color-interactive-disabled-dark);\n}\ncbp-file-input .cbp-file-input-wrapper {\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n max-width: 100%;\n min-height: 4.5rem;\n margin-block-end: var(--cbp-space-4x);\n color: var(--cbp-file-input-color);\n background-color: var(--cbp-file-input-color-bg);\n border-width: var(--cbp-border-size-md);\n border-color: var(--cbp-file-input-color-border);\n border-radius: var(--cbp-file-input-border-radius);\n outline-style: solid;\n outline-width: 0;\n outline-color: var(--cbp-file-input-color-outline);\n outline-offset: calc((var(--cbp-border-size-md) + var(--cbp-border-size-xl)) * -1);\n border-style: dashed;\n}\ncbp-file-input .cbp-file-input-wrapper:hover:not(:has(input:disabled)) {\n --cbp-file-input-color-border: var(--cbp-file-input-color-border-hover);\n --cbp-file-input-color-outline: var(--cbp-file-input-color-outline-hover);\n outline-width: var(--cbp-border-size-xl);\n}\ncbp-file-input .cbp-file-input-wrapper:hover:not(:has(input:disabled)) cbp-button[fill=solid][color=secondary] {\n --cbp-button-color: var(--cbp-button-color-hover);\n --cbp-button-color-bg: var(--cbp-button-color-bg-hover);\n --cbp-button-color-border: var(--cbp-button-color-border-hover);\n --cbp-button-color-dark: var(--cbp-button-color-hover-dark);\n --cbp-button-color-bg-dark: var(--cbp-button-color-bg-hover-dark);\n --cbp-button-color-border-dark: var(--cbp-button-color-border-hover-dark);\n}\ncbp-file-input .cbp-file-input-wrapper:focus:not(:has(input:disabled)), cbp-file-input .cbp-file-input-wrapper:focus-within:not(:has(input:disabled)) {\n --cbp-file-input-color-border: var(--cbp-file-input-color-border-focus);\n --cbp-file-input-color-outline: var(--cbp-file-input-color-outline-focus);\n outline-width: var(--cbp-border-size-xl);\n}\ncbp-file-input .cbp-file-input-wrapper:focus:not(:has(input:disabled)) cbp-button[fill=solid][color=secondary], cbp-file-input .cbp-file-input-wrapper:focus-within:not(:has(input:disabled)) cbp-button[fill=solid][color=secondary] {\n --cbp-button-color: var(--cbp-button-color-focus);\n --cbp-button-color-bg: var(--cbp-button-color-bg-focus);\n --cbp-button-color-border: var(--cbp-button-color-border-focus);\n --cbp-button-color-dark: var(--cbp-button-color-focus-dark);\n --cbp-button-color-bg-dark: var(--cbp-button-color-bg-focus-dark);\n --cbp-button-color-border-dark: var(--cbp-button-color-border-focus-dark);\n}\ncbp-file-input .cbp-file-input-wrapper:focus:not(:has(input:disabled)) cbp-button[fill=solid][color=secondary] button, cbp-file-input .cbp-file-input-wrapper:focus-within:not(:has(input:disabled)) cbp-button[fill=solid][color=secondary] button {\n outline-width: var(--cbp-border-size-md);\n}\ncbp-file-input .cbp-file-input-wrapper[readonly], cbp-file-input .cbp-file-input-wrapper:disabled {\n font-style: italic;\n cursor: not-allowed;\n}\ncbp-file-input .cbp-file-input-wrapper .cbp-file-input-visuals {\n display: flex;\n align-items: center;\n gap: var(--cbp-space-3x);\n width: 100%;\n height: 100%;\n padding-inline-start: var(--cbp-space-4x);\n padding-inline-end: var(--cbp-space-3x);\n}\ncbp-file-input .cbp-file-input-wrapper .cbp-file-input-visuals .cbp-file-input-text {\n flex-grow: 1;\n display: flex;\n align-items: center;\n font-style: italic;\n text-wrap: pretty;\n}\ncbp-file-input .cbp-file-input-wrapper .cbp-file-input-visuals > cbp-icon {\n --cbp-icon-color: var(--cbp-file-input-icon-color);\n}\ncbp-file-input .cbp-file-input-wrapper input[type=file]:not(#fakeId) {\n appearance: none;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n opacity: 0;\n z-index: 2;\n}\ncbp-file-input .cbp-file-input-filelist {\n display: flex;\n flex-direction: column;\n gap: var(--cbp-space-4x);\n}\ncbp-file-input .cbp-file-input-filelist .cbp-file-input-file-error {\n --cbp-file-input-file-color-bg: var(--cbp-file-input-file-color-bg-error);\n}\ncbp-file-input .cbp-file-input-filelist > div {\n display: flex;\n align-items: center;\n gap: var(--cbp-space-2x);\n padding: var(--cbp-space-2x);\n background-color: var(--cbp-file-input-file-color-bg);\n font-style: italic;\n line-height: var(--cbp-line-height-xs);\n overflow: hidden;\n text-overflow: ellipsis;\n}\ncbp-file-input .cbp-file-input-filelist > div :first-child {\n flex-grow: 9;\n}\ncbp-file-input .cbp-file-input-filelist > div cbp-button:not(#fakeId) {\n --cbp-icon-size: var(--cbp-space-3x);\n --cbp-button-padding: 0;\n --cbp-button-min-width: var(--cbp-space-7x);\n --cbp-button-min-height: var(--cbp-space-7x);\n --cbp-button-width: var(--cbp-space-7x);\n --cbp-button-height: var(--cbp-space-7x);\n --cbp-button-border-radius: var(--cbp-border-radius-circle);\n --cbp-button-color-hover: var(--cbp-color-text-lightest);\n --cbp-button-color-hover-dark: var(--cbp-color-text-darkest);\n --cbp-button-color-bg-hover: var(--cbp-color-interactive-secondary-darker);\n --cbp-button-color-bg-hover-dark: var(--cbp-color-interactive-secondary-lighter);\n --cbp-button-color-border-hover: var(--cbp-color-interactive-secondary-darker);\n --cbp-button-color-border-hover-dark: var(--cbp-color-interactive-secondary-lighter);\n}\n\n@container (width <= 19rem) {\n .cbp-file-input-visuals cbp-icon {\n display: none;\n }\n}";
const CbpFileInputStyle0 = cbpFileInputCss;
const CbpFileInput = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.valueChange = createEvent(this, "valueChange", 7);
this.name = undefined;
this.fieldId = createNamespaceKey('cbp-file-input');
this.multiple = undefined;
this.accept = undefined;
this.enhanced = undefined;
this.status = {};
this.error = false;
this.disabled = false;
this.context = undefined;
this.sx = {};
this.files = [];
}
handleChange(e) {
if (this.enhanced && this.multiple) {
let files = this.files;
for (let i = 0; i < e.target.files.length; i++) {
files = [...files, e.target.files[i]];
}
this.files = files;
this.formField.value = '';
}
else {
let files = [];
for (let i = 0; i < e.target.files.length; i++) {
files = [...files, e.target.files[i]];
}
this.files = files;
}
this.formField.focus();
this.valueChange.emit({
host: this.host,
nativeElement: this.formField,
name: this.name,
value: this.files,
nativeEvent: e
});
}
async reset() {
this.formField.value = this.initialValue ? this.initialValue : '';
this.files = [];
}
async getData() {
const Data = {
host: this.host,
name: this.name,
files: this.files
};
return Data;
}
watchDisabledHandler(newValue) {
if (this.formField) {
(newValue)
? this.formField.setAttribute('disabled', '')
: this.formField.removeAttribute('disabled');
}
}
watchStatusHandler(newValue) {
if (typeof newValue == 'string') {
this.status = JSON.parse(newValue) || {};
}
}
handleDelete(e) {
const { detail: { value } } = e;
if (this.enhanced) {
const filterIndex = value;
this.files.splice(filterIndex, 1);
this.files = [...this.files];
if (this.status.length > 0) {
this.status.splice(filterIndex, 1);
this.status = [...this.status];
}
}
else {
this.formField.value = '';
this.files = [];
this.status = {};
}
this.formField.focus();
this.valueChange.emit({
host: this.host,
nativeElement: this.formField,
name: this.name,
value: this.files,
nativeEvent: e
});
}
componentWillLoad() {
var _a;
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);
const Name = this.formField.getAttribute('name');
Name ? this.name = Name : (this.name ? this.formField.setAttribute('Name', this.name) : null);
if (this.multiple)
this.formField.setAttribute('multiple', '');
if (this.accept)
this.formField.setAttribute('accept', this.accept);
if (this.disabled)
this.formField.setAttribute('disabled', ``);
this.initialValue = (_a = this.formField) === null || _a === void 0 ? void 0 : _a.value;
this.formField.addEventListener('change', (e) => this.handleChange(e));
this.formField.addEventListener('dragenter', () => this.formField.classList.add('cbp-file-input-dragged'));
this.formField.addEventListener('dragleave', () => this.formField.classList.remove('cbp-file-input-dragged'));
this.formField.addEventListener('drop', () => this.formField.classList.remove('cbp-file-input-dragged'));
}
}
render() {
let msg = (this.files.length == 0 || (this.enhanced && this.multiple))
? `Drag & Drop File${this.multiple ? 's' : ''} Here or Browse ${(this.files.length > 0 && this.enhanced && this.multiple) ? 'to Add More' : ''}`
: `Drag & Drop File${this.multiple ? 's' : ''} Here or Browse to Replace`;
return (h(Host, { key: '0945dbf3f6eb972cee225941bd1910f46404582d' }, h("div", { key: 'a938dc6769cff95c468d059161bb2d35dd8795ec', class: "cbp-file-input-wrapper" }, h("div", { key: '1dd01823ed4b0e3c894a5a1ee644f2d9eb8f3003', class: "cbp-file-input-visuals" }, h("cbp-icon", { key: '414d5fff8f25f53ff05bf59c15197c57a2d5f037', name: "file-lines", size: "2rem" }), h("div", { key: '3c7e40d1f2f4b849c5b9d45bfedb3610d528897a', class: "cbp-file-input-text" }, msg), h("cbp-button", { key: '875616422273c1cda4f4d1627802edabbbeef151', fill: "solid", color: "secondary" }, h("button", { key: '4db06ed1a150a86c21b38092adad3ade5bcafb45', slot: "cbp-button-custom", type: "button", tabindex: "-1", "aria-hidden": "true" }, h("cbp-icon", { key: '428e4cc506fedd29edce2b4fde54de518ec88712', name: "upload" }), "Browse"))), h("slot", { key: '474c77f164a5de590d59bfabd3181e4b1097c5fe' })), h("div", { key: '1b1d3631d093c6d1e50a3cd72f21abb14daabe53', class: "cbp-file-input-filelist" }, this.files.map(({ name, size }, index) => {
var _a, _b;
return h("div", { key: `${name}-${size}`, class: this.status.length > 0 ? `cbp-file-input-file-${(_a = this.status[index]) === null || _a === void 0 ? void 0 : _a.status}` : '' }, h("div", null, h("div", { id: `${this.fieldId}-file-${index}` }, name), this.status.length > 0 && h("div", null, h("hr", null), h("div", null, (_b = this.status[index]) === null || _b === void 0 ? void 0 : _b.message))), h("cbp-button", { fill: "ghost", color: "secondary", value: `${index}`, accessibilityText: (this.files.length > 0 && this.multiple && !this.enhanced) ? 'Remove Files' : `Remove ${name}` }, h("cbp-icon", { name: "times" })));
}))));
}
get host() { return getElement(this); }
static get watchers() { return {
"disabled": ["watchDisabledHandler"],
"status": ["watchStatusHandler"]
}; }
};
CbpFileInput.style = CbpFileInputStyle0;
export { CbpFileInput as cbp_file_input };
//# sourceMappingURL=cbp-file-input.entry.js.map