@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 4.44 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{p as e,H as r,h as t,c as i}from"./p-c5a784ab.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 o=p;const d=e(class e extends r{constructor(){super();this.__registerHost()}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.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`});let e="";const r=["overlayStart","overlayEnd"];r.forEach((r=>{if(this[r]){let t=`${r}ID`;if(this[r].getAttribute("id")){t=this[r].getAttribute("id")}else{t=`${this.parent.fieldId}-${r}`;this[r].setAttribute("id",`${t}`)}e?e+=` ${t}`:e=t}}));if(e){let r=this.formField.getAttribute("aria-describedby");r?this.formField.setAttribute("aria-describedby",`${r} ${e}`):this.formField.setAttribute("aria-describedby",`${e}`)}}render(){return t(i,{key:"6ed12911511f8992774fcb9fc583753f342758ff"},t("div",{key:"646b437bbb9bc70f18d898c46836a8866282c29a",class:"cbp-form-field-wrapper-shrinkwrap"},t("slot",{key:"9523c7cd9a85d06e7f876560295869d8a29b143f",name:"cbp-form-field-overlay-start"}),t("slot",{key:"8a39ee25e904f9f4daec9423c1437059578cfdbb"}),t("slot",{key:"063056a3adeeacecd3590d2467a555a0250c20e6",name:"cbp-form-field-overlay-end"}),t("slot",{key:"f9771c727b454d419186e84bade54e7e9ade0b46",name:"cbp-form-field-attached-button"})),t("slot",{key:"01f006d8acfe7813bfc026492b321017a4136e42",name:"cbp-form-field-unattached-buttons"}))}get host(){return this}static get style(){return o}},[4,"cbp-form-field-wrapper"]);function f(){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 s=d;const c=f;export{s as CbpFormFieldWrapper,c as defineCustomElement};
//# sourceMappingURL=cbp-form-field-wrapper.js.map