@cbpds/web-components
Version:
Web components for the CBP Design System.
68 lines (62 loc) • 5.33 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-507f2a89.js');
const utils = require('./utils-99c9e716.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) {
index.registerInstance(this, hostRef);
}
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;
utils.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`,
});
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 (index.h(index.Host, { key: '6ed12911511f8992774fcb9fc583753f342758ff' }, index.h("div", { key: '646b437bbb9bc70f18d898c46836a8866282c29a', class: "cbp-form-field-wrapper-shrinkwrap" }, index.h("slot", { key: '9523c7cd9a85d06e7f876560295869d8a29b143f', name: "cbp-form-field-overlay-start" }), index.h("slot", { key: '8a39ee25e904f9f4daec9423c1437059578cfdbb' }), index.h("slot", { key: '063056a3adeeacecd3590d2467a555a0250c20e6', name: "cbp-form-field-overlay-end" }), index.h("slot", { key: 'f9771c727b454d419186e84bade54e7e9ade0b46', name: "cbp-form-field-attached-button" })), index.h("slot", { key: '01f006d8acfe7813bfc026492b321017a4136e42', name: "cbp-form-field-unattached-buttons" })));
}
get host() { return index.getElement(this); }
};
CbpFormFieldWrapper.style = CbpFormFieldWrapperStyle0;
exports.cbp_form_field_wrapper = CbpFormFieldWrapper;
//# sourceMappingURL=cbp-form-field-wrapper.cjs.entry.js.map