@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: '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" })));
}
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