@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-e7f1ba21.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 o=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:"785ae85e842f97af3ed0c0bfde8483fbd36a78f3"},r("div",{key:"c2e04db3dfa8d28c639c03916170ba04c82df0cb",class:"cbp-form-field-wrapper-shrinkwrap"},r("slot",{key:"258ab2cae61ac8d99113d5a58c12009b14e2d9d3",name:"cbp-form-field-overlay-start"}),r("slot",{key:"8ecf048c75b53d40412bb6ceaf2519b16c778902"}),r("slot",{key:"8ce0a866f81e2146b582822977db857de91982f5",name:"cbp-form-field-overlay-end"}),r("slot",{key:"83c5f82b8867ab76314569d86373c2e278b4a7a5",name:"cbp-form-field-attached-button"})),r("slot",{key:"eaee9113688709084969c6317c101d1819e7e55e",name:"cbp-form-field-unattached-buttons"}))}get host(){return this}static get style(){return s}},[4,"cbp-form-field-wrapper"]);function d(){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,o)}break}}))}const f=o;const c=d;export{f as CbpFormFieldWrapper,c as defineCustomElement};
//# sourceMappingURL=cbp-form-field-wrapper.js.map