@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 16.9 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{p as r,H as o,d as i,h as e,c as t}from"./p-9caf8482.js";import{c,s as n}from"./p-9c1b2f31.js";import{d as l}from"./p-c79ac5f9.js";import{d as p}from"./p-4cdb3206.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* @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 a=b;const d=r(class r 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.enhanced=undefined;this.status={};this.error=false;this.disabled=false;this.context=undefined;this.sx={};this.files=[]}handleChange(r){if(this.enhanced&&this.multiple){let o=this.files;for(let i=0;i<r.target.files.length;i++){o=[...o,r.target.files[i]]}this.files=o;this.formField.value=""}else{let o=[];for(let i=0;i<r.target.files.length;i++){o=[...o,r.target.files[i]]}this.files=o}this.formField.focus();this.valueChange.emit({host:this.host,nativeElement:this.formField,value:this.files,nativeEvent:r})}watchDisabledHandler(r){if(this.formField){r?this.formField.setAttribute("disabled",""):this.formField.removeAttribute("disabled")}}watchStatusHandler(r){if(typeof r=="string"){this.status=JSON.parse(r)||{}}}handleDelete(r){const{detail:{value:o}}=r;if(this.enhanced){const r=o;this.files.splice(r,1);this.files=[...this.files];if(this.status.length>0){this.status.splice(r,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,value:this.files,nativeEvent:r})}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 r=this.formField.getAttribute("id");r?this.fieldId=r:this.formField.setAttribute("id",this.fieldId);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);if(this.disabled)this.formField.setAttribute("disabled",``);this.formField.addEventListener("change",(r=>this.handleChange(r)));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 r=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 e(t,{key:"de03c29905c9c1dc1d491f42aaae46ac31fdb469"},e("div",{key:"462000cb5c81900123dc4188d0032be95bb01b24",class:"cbp-file-input-wrapper"},e("div",{key:"a5f8616b904309fb5b437cfcf2975f47389f00ba",class:"cbp-file-input-visuals"},e("cbp-icon",{key:"47f7efaa585ac25ad60fcfd9abe44ee9335f977a",name:"file-lines",size:"2rem"}),e("div",{key:"7fc7785445e9df46205f312c9d1d90b16d80152b",class:"cbp-file-input-text"},r),e("cbp-button",{key:"c0c95e14cf252434cec2ef494263909e7ba60db9",fill:"solid",color:"secondary"},e("button",{key:"69400265faebd04d977dc816c0793ce3f7187996",slot:"cbp-button-custom",type:"button",tabindex:"-1","aria-hidden":"true"},e("cbp-icon",{key:"e47b0fd44d54832ffb38e231ad77be9627ff7e22",name:"upload"}),"Browse"))),e("slot",{key:"3f36a5722efaadf812dbb1daffdd93b5132586ca"})),e("div",{key:"12625e1afdf7503705b84cb4a26e4a3103d23aa7",class:"cbp-file-input-filelist"},this.files.map((({name:r,size:o},i)=>{var t,c;return e("div",{key:`${r}-${o}`,class:this.status.length>0?`cbp-file-input-file-${(t=this.status[i])===null||t===void 0?void 0:t.status}`:""},e("div",null,e("div",{id:`${this.fieldId}-file-${i}`},r),this.status.length>0&&e("div",null,e("hr",null),e("div",null,(c=this.status[i])===null||c===void 0?void 0:c.message))),e("cbp-button",{fill:"ghost",color:"secondary",value:`${i}`,accessibilityText:this.files.length>0&&this.multiple&&!this.enhanced?"Remove Files":`Remove ${r}`},e("cbp-icon",{name:"times"})))}))))}get host(){return this}static get watchers(){return{disabled:["watchDisabledHandler"],status:["watchStatusHandler"]}}static get style(){return a}},[4,"cbp-file-input",{name:[1],fieldId:[1025,"field-id"],multiple:[4],accept:[1],enhanced:[4],status:[8],error:[516],disabled:[1540],context:[513],sx:[8],files:[32]},[[0,"buttonClick","handleDelete"]],{disabled:["watchDisabledHandler"],status:["watchStatusHandler"]}]);function s(){if(typeof customElements==="undefined"){return}const r=["cbp-file-input","cbp-button","cbp-icon"];r.forEach((r=>{switch(r){case"cbp-file-input":if(!customElements.get(r)){customElements.define(r,d)}break;case"cbp-button":if(!customElements.get(r)){l()}break;case"cbp-icon":if(!customElements.get(r)){p()}break}}))}const u=d;const f=s;export{u as CbpFileInput,f as defineCustomElement};
//# sourceMappingURL=cbp-file-input.js.map