@cbpds/web-components/dist/components/cbp-form-field.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import{p as r,H as o,d as e,h as c,c as i}from"./p-9caf8482.js";import{c as l,s as t}from"./p-9c1b2f31.js";import{d}from"./p-4cdb3206.js";const a=':root{--cbp-form-field-color:var(--cbp-color-text-darkest);--cbp-form-field-color-bg:var(--cbp-color-white);--cbp-form-field-color-border:var(--cbp-color-interactive-secondary-base);--cbp-form-field-color-border-hover:var(--cbp-color-interactive-secondary-darker);--cbp-form-field-color-border-focus:var(--cbp-color-interactive-focus-dark);--cbp-form-field-color-label:var(--cbp-color-text-darkest);--cbp-form-field-color-description:var(--cbp-color-text-darkest);--cbp-form-field-color-placeholder:var(--cbp-color-text-dark);--cbp-form-field-color-dark:var(--cbp-color-text-lightest);--cbp-form-field-color-bg-dark:var(--cbp-color-gray-cool-70);--cbp-form-field-color-border-dark:var(--cbp-color-interactive-secondary-light);--cbp-form-field-color-border-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-form-field-color-border-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-form-field-color-label-dark:var(--cbp-color-text-lightest);--cbp-form-field-color-description-dark:var(--cbp-color-text-lightest);--cbp-form-field-color-placeholder-dark:var(--cbp-color-text-light);--cbp-form-field-padding-inline:var(--cbp-space-2x);--cbp-form-field-margin-bottom:var(--cbp-space-4x);--cbp-form-field-border-radius:var(--cbp-border-radius-soft);--cbp-form-field-select-chevron:url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" fill="%23fcfcfc"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>\');--cbp-form-field-select-chevron-dark:url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" fill="%231b1b1b"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>\')}[data-cbp-theme=light] cbp-form-field[context*=dark],[data-cbp-theme=dark] cbp-form-field:not([context=dark-inverts]):not([context=light-always]){--cbp-form-field-color-label:var(--cbp-form-field-color-label-dark);--cbp-form-field-color-description:var(--cbp-form-field-color-description-dark);--cbp-form-field-color:var(--cbp-form-field-color-dark);--cbp-form-field-color-bg:var(--cbp-form-field-color-bg-dark);--cbp-form-field-color-border:var(--cbp-form-field-color-border-dark);--cbp-form-field-color-border-hover:var(--cbp-form-field-color-border-hover-dark);--cbp-form-field-color-border-focus:var(--cbp-form-field-color-border-focus-dark);--cbp-form-field-color-placeholder:var(--cbp-form-field-color-placeholder-dark);--cbp-form-field-select-chevron:var(--cbp-form-field-select-chevron-dark)}cbp-form-field{display:block;margin-bottom:var(--cbp-form-field-margin-bottom)}cbp-form-field fieldset,cbp-form-field legend{all:unset}cbp-form-field fieldset{display:block}cbp-form-field .cbp-form-field-label{display:block;color:var(--cbp-form-field-color-label);font-size:var(--cbp-font-size-body);font-weight:var(--cbp-font-weight-bold);font-style:italic;line-height:var(--cbp-line-height-xs)}cbp-form-field .cbp-form-field-description{display:block;color:var(--cbp-form-field-color-description);font-size:var(--cbp-font-size-subhead);font-weight:var(--cbp-font-weight-medium);font-style:italic;line-height:var(--cbp-line-height-xs);margin-bottom:var(--cbp-space-1x)}cbp-form-field .cbp-form-field-container{position:relative}cbp-form-field input,cbp-form-field textarea,cbp-form-field select,cbp-form-field .cbp-custom-form-control{width:100%;max-width:100%;min-height:var(--cbp-space-9x);padding-inline:var(--cbp-form-field-padding-inline);font-family:inherit;font-size:var(--cbp-font-size-body);line-height:var(--cbp-line-height-xs);text-align:start;vertical-align:middle;color:var(--cbp-form-field-color);background-color:var(--cbp-form-field-color-bg);border-style:solid;border-width:var(--cbp-border-size-md);border-color:var(--cbp-form-field-color-border);border-radius:var(--cbp-form-field-border-radius);outline-style:solid;outline-width:0;outline-color:var(--cbp-form-field-color-border-focus);outline-offset:-1px;scrollbar-width:thin;scrollbar-color:var(--cbp-form-field-color-border) var(--cbp-form-field-color-bg)}cbp-form-field input::-webkit-scrollbar,cbp-form-field textarea::-webkit-scrollbar,cbp-form-field select::-webkit-scrollbar,cbp-form-field .cbp-custom-form-control::-webkit-scrollbar{width:var(--cbp-space-1x)}cbp-form-field input::-webkit-scrollbar-track,cbp-form-field textarea::-webkit-scrollbar-track,cbp-form-field select::-webkit-scrollbar-track,cbp-form-field .cbp-custom-form-control::-webkit-scrollbar-track{background-color:var(--cbp-form-field-color-bg)}cbp-form-field input::-webkit-scrollbar-thumb,cbp-form-field textarea::-webkit-scrollbar-thumb,cbp-form-field select::-webkit-scrollbar-thumb,cbp-form-field .cbp-custom-form-control::-webkit-scrollbar-thumb{background-color:var(--cbp-form-field-color-border)}cbp-form-field input:hover,cbp-form-field textarea:hover,cbp-form-field select:hover,cbp-form-field .cbp-custom-form-control:hover{--cbp-form-field-color-border:var(--cbp-form-field-color-border-hover)}cbp-form-field input:focus,cbp-form-field input:focus-visible,cbp-form-field textarea:focus,cbp-form-field textarea:focus-visible,cbp-form-field select:focus,cbp-form-field select:focus-visible,cbp-form-field .cbp-custom-form-control:focus,cbp-form-field .cbp-custom-form-control:focus-visible{--cbp-form-field-color-border:var(--cbp-form-field-color-border-focus);outline-width:var(--cbp-border-size-lg)}cbp-form-field input[readonly],cbp-form-field input:disabled,cbp-form-field textarea[readonly],cbp-form-field textarea:disabled,cbp-form-field select[readonly],cbp-form-field select:disabled,cbp-form-field .cbp-custom-form-control[readonly],cbp-form-field .cbp-custom-form-control:disabled{font-style:italic;cursor:not-allowed}cbp-form-field[disabled],cbp-form-field:has(:not(button):disabled){--cbp-form-field-color:var(--cbp-color-interactive-disabled-dark);--cbp-form-field-color-bg:var(--cbp-color-interactive-disabled-light);--cbp-form-field-color-border:var(--cbp-color-interactive-disabled-dark);--cbp-form-field-color-border-hover:var(--cbp-color-interactive-disabled-dark);--cbp-form-field-color-dark:var(--cbp-color-interactive-disabled-light);--cbp-form-field-color-bg-dark:var(--cbp-color-interactive-disabled-dark);--cbp-form-field-color-border-dark:var(--cbp-color-interactive-disabled-light);--cbp-form-field-color-border-hover-dark:var(--cbp-color-interactive-disabled-light);--cbp-form-field-color-placeholder:transparent}cbp-form-field[readonly],cbp-form-field:has(*[readonly]){--cbp-form-field-color-bg:var(--cbp-color-gray-cool-10);--cbp-form-field-color-border:var(--cbp-color-interactive-secondary-light);--cbp-form-field-color-border-hover:var(--cbp-color-interactive-secondary-light);--cbp-form-field-color-border-focus:var(--cbp-color-interactive-secondary-light);--cbp-form-field-color-bg-dark:var(--cbp-color-gray-cool-80);--cbp-form-field-color-border-dark:var(--cbp-color-interactive-secondary-dark);--cbp-form-field-color-border-hover-dark:var(--cbp-color-interactive-secondary-dark);--cbp-form-field-color-border-focus:var(--cbp-color-interactive-secondary-dark);--cbp-form-field-color-placeholder:transparent}cbp-form-field[readonly] cbp-button[fill=solid]:has(button:disabled),cbp-form-field:has(*[readonly]) cbp-button[fill=solid]:has(button:disabled){--cbp-button-color:var(--cbp-color-text-lightest);--cbp-button-color-bg:var(--cbp-color-white);--cbp-button-color-border:var(--cbp-form-field-color-border);--cbp-button-color-dark:var(--cbp-color-text-base);--cbp-button-color-bg-dark:var(--cbp-form-field-color-border-dark);--cbp-button-color-border-dark:var(--cbp-form-field-color-border-dark)}cbp-form-field[readonly] cbp-button[fill=outline]:has(button:disabled),cbp-form-field:has(*[readonly]) cbp-button[fill=outline]:has(button:disabled){--cbp-button-color:var(--cbp-color-interactive-secondary-base);--cbp-button-color-bg:var(--cbp-color-interactive-secondary-light);--cbp-button-color-border:var(--cbp-color-interactive-secondary-base);--cbp-button-color-dark:var(--cbp-color-interactive-secondary-base);--cbp-button-color-bg-dark:var(--cbp-form-field-color-bg-dark);--cbp-button-color-border-dark:var(--cbp-color-interactive-secondary-base)}cbp-form-field ::placeholder{color:var(--cbp-form-field-color-placeholder);font-style:italic}cbp-form-field input[type=file]{line-height:var(--cbp-space-8x)}cbp-form-field ::file-selector-button{display:none}cbp-form-field textarea{min-height:6.75rem;max-height:80vh;padding-block:var(--cbp-space-2x);resize:vertical}cbp-form-field select,cbp-form-field cbp-dropdown .cbp-custom-form-control{appearance:none;text-overflow:ellipsis;padding-block:calc(var(--cbp-space-2x) - 2px)}cbp-form-field select option,cbp-form-field cbp-dropdown .cbp-custom-form-control option{color:var(--cbp-form-field-color);background-color:var(--cbp-form-field-color-bg)}cbp-form-field select optgroup,cbp-form-field cbp-dropdown .cbp-custom-form-control optgroup{color:var(--cbp-form-field-color);background-color:var(--cbp-form-field-color-bg);font-weight:var(--cbp-font-weight-bold)}cbp-form-field select:not([multiple]):not([size]){--cbp-form-field-dropdown-faux-button-width:calc(var(--cbp-space-9x) - var(--cbp-border-size-md));background:right calc(var(--cbp-form-field-dropdown-faux-button-width) / 2 - 8px) top calc(1rem - 8px) no-repeat var(--cbp-form-field-select-chevron), right -0.4px top 0px repeat-y linear-gradient(90deg, var(--cbp-form-field-color-bg) calc(100% - var(--cbp-form-field-dropdown-faux-button-width)), var(--cbp-form-field-color-border) var(--cbp-space-9x));padding-inline-end:var(--cbp-space-9x)}cbp-form-field[error]{--cbp-form-field-color-bg:var(--cbp-color-danger-lighter);--cbp-form-field-color-border:var(--cbp-color-danger-dark);--cbp-form-field-color-border-hover:var(--cbp-color-danger-darker);--cbp-form-field-color-description:var(--cbp-color-danger-dark);--cbp-form-field-color-bg-dark:var(--cbp-color-danger-darker);--cbp-form-field-color-border-dark:var(--cbp-color-danger-light);--cbp-form-field-color-border-hover-dark:var(--cbp-color-danger-lighter);--cbp-form-field-color-description-dark:var(--cbp-color-danger-light)}cbp-form-field input:is(:-webkit-autofill,:autofill),cbp-form-field input:is(:-webkit-autofill,:autofill):focus{box-shadow:0 0 0 1000px var(--cbp-form-field-color-bg) inset;-webkit-text-fill-color:var(--cbp-form-field-color)}cbp-form-field ::-ms-reveal{display:none}';const b=a;const f=r(class r extends o{constructor(){super();this.__registerHost();this.valueChange=e(this,"valueChange",7);this.label=undefined;this.description=undefined;this.fieldId=l("cbp-formfield");this.group=undefined;this.error=undefined;this.errorMessages=undefined;this.readonly=undefined;this.disabled=undefined;this.context=undefined;this.sx={}}handleChange(r){this.valueChange.emit({host:this.host,nativeElement:this.formField,value:this.formField.value,nativeEvent:r})}watchReadonlyHandler(r){if(this.formField){r?this.formField.setAttribute("readonly",""):this.formField.removeAttribute("readonly")}if(this.formFieldComponent){this.formFieldComponent.readonly=r}if(this.buttons){this.buttons.forEach((r=>{r.disabled=this.disabled||this.readonly}))}}watchDisabledHandler(r){if(this.formField){r?this.formField.setAttribute("disabled",""):this.formField.removeAttribute("disabled")}if(this.formFieldComponent){this.formFieldComponent.disabled=r}if(this.buttons){this.buttons.forEach((r=>{r.disabled=this.disabled||this.readonly}))}}watchErrorHandler(r){if(this.formField){r?this.formField.setAttribute("aria-invalid","true"):this.formField.removeAttribute("aria-invalid")}if(this.formFieldComponent){this.formFieldComponent.error=r}if(this.buttons){this.buttons.forEach((o=>{r?o.color="danger":o.color="secondary"}))}}componentWillLoad(){if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}t(this.host,Object.assign({},this.sx))}componentDidLoad(){if(!this.group){this.formField=this.host.querySelector("button[role=combobox],input,select,textarea");this.formFieldComponent=this.host.querySelector("cbp-dropdown,cbp-slider,cbp-file-input");this.buttons=this.host.querySelectorAll("cbp-button");this.attachedButtons=this.host.querySelectorAll("[slot=cbp-form-field-attached-button] cbp-button");this.hasDescription=!!this.description||!!this.host.querySelector("[slot=cbp-form-field-description]");if(this.formField){this.formField.getAttribute("id")?this.fieldId=this.formField.getAttribute("id"):this.formField.setAttribute("id",`${this.fieldId}`);this.hasDescription&&this.formField.setAttribute("aria-describedby",`${this.fieldId}-description`);this.formField.addEventListener("change",(r=>this.handleChange(r)))}if(!!this.formField){if(this.readonly)this.formField.setAttribute("readonly","");if(this.disabled)this.formField.setAttribute("disabled","");if(this.error)this.formField.setAttribute("aria-invalid","true")}if(this.formFieldComponent){this.formFieldComponent.fieldId?this.fieldId=this.formFieldComponent.fieldId:this.formFieldComponent.fieldId=this.fieldId;if(this.readonly)this.formFieldComponent.readonly=true;if(this.disabled)this.formFieldComponent.disabled=true;if(this.error)this.formFieldComponent.error=true}if(!!this.buttons){this.buttons.forEach((r=>{if(this.disabled||this.readonly)r.disabled=true}))}if(!!this.attachedButtons){this.attachedButtons.forEach((r=>{if(this.error)r.color="danger"}))}}}render(){if(this.group){return c(i,null,c("fieldset",{disabled:this.disabled,"aria-labelledby":`${this.fieldId}-grouplabel`,"aria-describedby":`${this.fieldId}-description`,"aria-invalid":this.error?"true":false},c("legend",{id:`${this.fieldId}-grouplabel`,class:"cbp-form-field-label"},this.label,c("slot",{name:"cbp-form-field-label"})),c("div",{id:`${this.fieldId}-description`,class:"cbp-form-field-description"},this.error&&c("cbp-icon",{name:"triangle-exclamation",color:"var(--cbp-form-field-color-description)",sx:'{"margin-inline-end":"var(--cbp-space-1x)","vertical-align":"text-top"}'}),this.description,c("slot",{name:"cbp-form-field-description"})),c("div",{class:"cbp-form-field-container"},c("slot",null)),c("slot",{name:"cbp-form-field-extra"})))}else{return c(i,null,c("label",{htmlFor:this.fieldId,id:`${this.fieldId}-label`,class:"cbp-form-field-label"},this.label,c("slot",{name:"cbp-form-field-label"})),c("div",{id:`${this.fieldId}-description`,class:"cbp-form-field-description"},this.error&&c("cbp-icon",{name:"triangle-exclamation",color:"var(--cbp-form-field-color-description)",size:"var(--cbp-space-3x)",sx:'{"margin-inline-end":"var(--cbp-space-1x)"}'}),this.description,c("slot",{name:"cbp-form-field-description"})),c("div",{class:"cbp-form-field-container"},c("slot",null)),c("slot",{name:"cbp-form-field-extra"}))}}get host(){return this}static get watchers(){return{readonly:["watchReadonlyHandler"],disabled:["watchDisabledHandler"],error:["watchErrorHandler"]}}static get style(){return b}},[4,"cbp-form-field",{label:[1],description:[1],fieldId:[1,"field-id"],group:[516],error:[516],errorMessages:[8,"error-messages"],readonly:[516],disabled:[516],context:[513],sx:[8]},undefined,{readonly:["watchReadonlyHandler"],disabled:["watchDisabledHandler"],error:["watchErrorHandler"]}]);function p(){if(typeof customElements==="undefined"){return}const r=["cbp-form-field","cbp-icon"];r.forEach((r=>{switch(r){case"cbp-form-field":if(!customElements.get(r)){customElements.define(r,f)}break;case"cbp-icon":if(!customElements.get(r)){d()}break}}))}const s=f;const n=p;export{s as CbpFormField,n as defineCustomElement};
//# sourceMappingURL=cbp-form-field.js.map