@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 4.71 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{p as e,H as t,h as r,c as i}from"./p-9caf8482.js";import{s as a}from"./p-9c1b2f31.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 s=p;const d=e(class e extends t{constructor(){super();this.__registerHost();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 r=`${t}ID`;if(this[t].getAttribute("id")){r=this[t].getAttribute("id")}else{r=`${this.parent.fieldId}-${t}`;this[t].setAttribute("id",`${r}`)}e?e+=` ${r}`:e=r}}));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 r(i,{key:"6a9fbfd393b8a350e461db94db7146ae65f1b899"},r("div",{key:"0550678952982395016494b9693b84a6eadff7dc",class:"cbp-form-field-wrapper-shrinkwrap"},r("slot",{key:"4eec1c91d5bfefbb6d34802a9e8c7e1f38673517",name:"cbp-form-field-overlay-start"}),r("slot",{key:"002adbff58e17fb44c30643d807eb7474fdf25a3"}),r("slot",{key:"d64d674782f707f9ab865c901d20f750fec3e675",name:"cbp-form-field-overlay-end"}),r("slot",{key:"aa394d70ec8185d9fea62482ba148e17a5c2c488",name:"cbp-form-field-attached-button"})),r("slot",{key:"2d41b0753352da41d0522e2053062b5b590a9808",name:"cbp-form-field-unattached-buttons"}))}get host(){return this}static get style(){return s}},[4,"cbp-form-field-wrapper"]);function o(){if(typeof customElements==="undefined"){return}const e=["cbp-form-field-wrapper"];e.forEach((e=>{switch(e){case"cbp-form-field-wrapper":if(!customElements.get(e)){customElements.define(e,d)}break}}))}const f=d;const c=o;export{f as CbpFormFieldWrapper,c as defineCustomElement};
//# sourceMappingURL=cbp-form-field-wrapper.js.map