@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 11.8 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{p as e,H as o,d as i,h as r,c as t}from"./p-c5a784ab.js";import{c,s as n}from"./p-9c1b2f31.js";import{d as p}from"./p-7abe098c.js";import{d as l}from"./p-62fdbefd.js";const b='/* \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\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\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-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-dark: var(--cbp-color-text-lightest);\n --cbp-file-input-color-bg-dark: var(--cbp-color-gray-cool-70);\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-file-color-bg: var(--cbp-color-gray-cool-10);\n --cbp-file-input-file-color-bg-dark: var(--cbp-color-gray-cool-60);\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-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-file-color-bg: var(--cbp-file-input-file-color-bg-dark);\n}\n\ncbp-file-input {\n display: block;\n max-width: 22rem;\n container-type: inline-size;\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-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-border-focus);\n outline-offset: -1px;\n border-style: dashed;\n outline-offset: calc(var(--cbp-space-1x) * -1);\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}\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 outline-width: var(--cbp-border-size-lg);\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 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 display: flex;\n align-items: center;\n font-style: italic;\n text-wrap: pretty;\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 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-weight: var(--cbp-font-weight-medium);\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 a=b;const d=e(class e extends o{constructor(){super();this.__registerHost();this.valueChange=i(this,"valueChange",7);this.name=undefined;this.fieldId=c("cbp-file-input");this.multiple=undefined;this.accept=undefined;this.context=undefined;this.sx={};this.files=[]}handleChange(e){let o=[];for(let i=0;i<e.target.files.length;i++){o=[...o,e.target.files[i]]}this.files=o;this.valueChange.emit({host:this.host,nativeElement:this.formField,value:this.formField.value})}watchDisabledHandler(e){if(this.formField){e?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)||{}}n(this.host,Object.assign({},this.sx));this.formField=this.host.querySelector("input[type=file]");if(this.formField){const e=this.formField.getAttribute("id");e?this.fieldId=e: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 e=[];if(this.files.length>0){this.files.forEach((o=>{e=[...e,r("div",null,r("span",null,o.name),r("cbp-button",{fill:"ghost",color:"secondary",value:o.name},r("cbp-icon",{name:"times"})))]}))}let o=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 r(t,{key:"ab73981581eb3363d0915001aa8ca15240b5e274"},r("div",{key:"86e534135eed075da21adbf505f8b281c73cd300",class:"cbp-file-input-wrapper"},r("div",{key:"ec70acd5bde307cbcf9ce795ca02b05a73694d27",class:"cbp-file-input-visuals"},r("cbp-icon",{key:"273288ef24b8c1308e94ec70bb6c639b6a3d2def",name:"file-lines",size:"2rem",color:"var(--cbp-color-text-base)"}),r("div",{key:"1e89dc6c158c7df8c23a5f21317247bf3e4c49af",class:"cbp-file-input-text"},o),r("cbp-button",{key:"b89ce6041203d9f888a5a0691a5042fbd31059b3",fill:"solid",color:"secondary"},r("button",{key:"fe3f70303e74cf64839f2fd4a4bcfea1b0c37044",slot:"cbp-button-custom",type:"button",tabindex:"-1","aria-hidden":"true"},r("cbp-icon",{key:"a30e9cfe06648501817e29796315898907ec30c7",name:"upload"}),"Browse"))),r("slot",{key:"2421056d3cd8f7bc4ba679a852752fe357d2aeb8"})),this.files.length>0&&r("div",{key:"d3e3cfbd7ad9141baa2521826a56a9f89760e6a0",class:"cbp-file-input-filelist"},e))}get host(){return this}static get watchers(){return{disabled:["watchDisabledHandler"]}}static get style(){return a}},[4,"cbp-file-input",{name:[1],fieldId:[1025,"field-id"],multiple:[4],accept:[1],context:[513],sx:[8],files:[32]},[[0,"buttonClick","handleDelete"]],{disabled:["watchDisabledHandler"]}]);function s(){if(typeof customElements==="undefined"){return}const e=["cbp-file-input","cbp-button","cbp-icon"];e.forEach((e=>{switch(e){case"cbp-file-input":if(!customElements.get(e)){customElements.define(e,d)}break;case"cbp-button":if(!customElements.get(e)){p()}break;case"cbp-icon":if(!customElements.get(e)){l()}break}}))}const u=d;const f=s;export{u as CbpFileInput,f as defineCustomElement};
//# sourceMappingURL=cbp-file-input.js.map