@cbpds/web-components
Version:
Web components for the CBP Design System.
79 lines (75 loc) • 5.72 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { r as registerInstance, h, a as Host, g as getElement } from './index-31e2d0a8.js';
import { s as setCSSProps } from './utils-475ba472.js';
const cbpFormFieldWrapperCss = ":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 CbpFormFieldWrapperStyle0 = cbpFormFieldWrapperCss;
const CbpFormFieldWrapper = class {
constructor(hostRef) {
registerInstance(this, hostRef);
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;
setCSSProps(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 overlayids = '';
const overlays = ["overlayStart", "overlayEnd"];
overlays.forEach((overlay) => {
if (this[overlay]) {
let id = `${overlay}ID`;
if (this[overlay].getAttribute('id')) {
id = this[overlay].getAttribute('id');
}
else {
id = `${this.parent.fieldId}-${overlay}`;
this[overlay].setAttribute('id', `${id}`);
}
overlayids
? overlayids += ` ${id}`
: overlayids = id;
}
});
if (overlayids) {
let ariadescribedby = this.formField.getAttribute('aria-describedby');
ariadescribedby
? this.formField.setAttribute('aria-describedby', `${ariadescribedby} ${overlayids}`)
: this.formField.setAttribute('aria-describedby', `${overlayids}`);
}
}
render() {
return (h(Host, { key: '785ae85e842f97af3ed0c0bfde8483fbd36a78f3' }, h("div", { key: 'c2e04db3dfa8d28c639c03916170ba04c82df0cb', class: "cbp-form-field-wrapper-shrinkwrap" }, h("slot", { key: '258ab2cae61ac8d99113d5a58c12009b14e2d9d3', name: "cbp-form-field-overlay-start" }), h("slot", { key: '8ecf048c75b53d40412bb6ceaf2519b16c778902' }), h("slot", { key: '8ce0a866f81e2146b582822977db857de91982f5', name: "cbp-form-field-overlay-end" }), h("slot", { key: '83c5f82b8867ab76314569d86373c2e278b4a7a5', name: "cbp-form-field-attached-button" })), h("slot", { key: 'eaee9113688709084969c6317c101d1819e7e55e', name: "cbp-form-field-unattached-buttons" })));
}
get host() { return getElement(this); }
};
CbpFormFieldWrapper.style = CbpFormFieldWrapperStyle0;
export { CbpFormFieldWrapper as cbp_form_field_wrapper };
//# sourceMappingURL=cbp-form-field-wrapper.entry.js.map