@cbpds/web-components
Version:
Web components for the CBP Design System.
82 lines (81 loc) • 3.87 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpFormFieldWrapper {
constructor() {
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: '6a9fbfd393b8a350e461db94db7146ae65f1b899' }, h("div", { key: '0550678952982395016494b9693b84a6eadff7dc', class: "cbp-form-field-wrapper-shrinkwrap" }, h("slot", { key: '4eec1c91d5bfefbb6d34802a9e8c7e1f38673517', name: "cbp-form-field-overlay-start" }), h("slot", { key: '002adbff58e17fb44c30643d807eb7474fdf25a3' }), h("slot", { key: 'd64d674782f707f9ab865c901d20f750fec3e675', name: "cbp-form-field-overlay-end" }), h("slot", { key: 'aa394d70ec8185d9fea62482ba148e17a5c2c488', name: "cbp-form-field-attached-button" })), h("slot", { key: '2d41b0753352da41d0522e2053062b5b590a9808', name: "cbp-form-field-unattached-buttons" })));
}
static get is() { return "cbp-form-field-wrapper"; }
static get originalStyleUrls() {
return {
"$": ["cbp-form-field-wrapper.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-form-field-wrapper.css"]
};
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=cbp-form-field-wrapper.js.map