@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 4.37 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{r as e,h as t,a as i,g as r}from"./p-654179c2.js";import{s as a}from"./p-93ade441.js";const p=":root{--cbp-form-field-wrapper-padding-start:var(--cbp-form-field-padding-inline);--cbp-form-field-wrapper-padding-end:var(--cbp-form-field-padding-inline);--cbp-form-field-overlay-start-width:0;--cbp-form-field-overlay-end-width:0;--cbp-form-field-attached-button-width:0}cbp-form-field-wrapper{position:relative;display:flex;gap:var(--cbp-space-4x)}cbp-form-field-wrapper .cbp-form-field-wrapper-shrinkwrap{position:relative;display:block;flex-basis:100%}cbp-form-field-wrapper .cbp-form-field-wrapper-shrinkwrap input:not(#fakeId){padding-inline-start:calc(var(--cbp-form-field-overlay-start-width) + var(--cbp-form-field-wrapper-padding-start));padding-inline-end:calc(var(--cbp-form-field-overlay-end-width) + var(--cbp-form-field-wrapper-padding-end))}cbp-form-field-wrapper .cbp-form-field-wrapper-shrinkwrap [slot]{position:absolute;inset-block-start:0;display:inline-flex;align-items:center;height:100%;color:var(--cbp-form-field-color)}cbp-form-field-wrapper .cbp-form-field-wrapper-shrinkwrap [slot=cbp-form-field-overlay-start]{inset-inline-start:var(--cbp-space-2x);font-weight:var(--cbp-font-weight-bold);font-style:italic}cbp-form-field-wrapper .cbp-form-field-wrapper-shrinkwrap [slot=cbp-form-field-overlay-end]{inset-inline-end:calc(var(--cbp-form-field-attached-button-width) + var(--cbp-space-2x));font-style:italic}cbp-form-field-wrapper .cbp-form-field-wrapper-shrinkwrap [slot=cbp-form-field-attached-button]{--cbp-button-border-radius:0 var(--cbp-border-radius-soft) var(--cbp-border-radius-soft) 0;inset-inline-end:0}cbp-form-field-wrapper .cbp-form-field-wrapper-shrinkwrap [slot=cbp-form-field-attached-button] cbp-segmented-button-group cbp-button:first-child{--cbp-button-border-radius:0}cbp-form-field-wrapper [slot=cbp-form-field-unattached-buttons]{display:flex;gap:var(--cbp-space-4x)}";const d=p;const s=class{constructor(t){e(this,t);this.visible=false}getSizeInfo(){this.visible=!!this.host.offsetWidth;if(this.visible){if(this.observer)this.observer.disconnect();this.overlayStartWidth=this.overlayStart?this.overlayStart.offsetWidth+8:0;this.overlayEndWidth=this.overlayEnd?this.overlayEnd.offsetWidth+8:0;this.attachedButtonWidth=this.attachedButton?this.attachedButton.offsetWidth:0;this.overlayEndWidth=this.overlayEndWidth+this.attachedButtonWidth;a(this.host,{"--cbp-form-field-overlay-start-width":`${this.overlayStartWidth}px`,"--cbp-form-field-overlay-end-width":`${this.overlayEndWidth}px`,"--cbp-form-field-attached-button-width":`${this.attachedButtonWidth}px`})}else if(!this.observer){this.observer=new ResizeObserver((()=>{this.getSizeInfo()}));this.observer.observe(this.host)}}componentWillLoad(){this.parent=this.host.closest("cbp-form-field");this.formField=this.host.querySelector("input,select,textarea");this.attachedButton=this.host.querySelector("[slot=cbp-form-field-attached-button] cbp-button");this.overlayStart=this.host.querySelector("[slot=cbp-form-field-overlay-start]");this.overlayEnd=this.host.querySelector("[slot=cbp-form-field-overlay-end]")}componentDidLoad(){this.getSizeInfo();let e="";const t=["overlayStart","overlayEnd"];t.forEach((t=>{if(this[t]){let i=`${t}ID`;if(this[t].getAttribute("id")){i=this[t].getAttribute("id")}else{i=`${this.parent.fieldId}-${t}`;this[t].setAttribute("id",`${i}`)}e?e+=` ${i}`:e=i}}));if(e){let t=this.formField.getAttribute("aria-describedby");t?this.formField.setAttribute("aria-describedby",`${t} ${e}`):this.formField.setAttribute("aria-describedby",`${e}`)}}render(){return t(i,{key:"6a9fbfd393b8a350e461db94db7146ae65f1b899"},t("div",{key:"0550678952982395016494b9693b84a6eadff7dc",class:"cbp-form-field-wrapper-shrinkwrap"},t("slot",{key:"4eec1c91d5bfefbb6d34802a9e8c7e1f38673517",name:"cbp-form-field-overlay-start"}),t("slot",{key:"002adbff58e17fb44c30643d807eb7474fdf25a3"}),t("slot",{key:"d64d674782f707f9ab865c901d20f750fec3e675",name:"cbp-form-field-overlay-end"}),t("slot",{key:"aa394d70ec8185d9fea62482ba148e17a5c2c488",name:"cbp-form-field-attached-button"})),t("slot",{key:"2d41b0753352da41d0522e2053062b5b590a9808",name:"cbp-form-field-unattached-buttons"}))}get host(){return r(this)}};s.style=d;export{s as cbp_form_field_wrapper};
//# sourceMappingURL=p-e99ffd7f.entry.js.map