@cbpds/web-components
Version:
Web components for the CBP Design System.
156 lines (150 loc) • 17.8 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-cd71cbd5.js');
const utils = require('./utils-99c9e716.js');
const cbpFormFieldCss = ":root{--cbp-form-field-color:var(--cbp-color-text-darkest);--cbp-form-field-color-bg:var(--cbp-color-white);--cbp-form-field-color-border:var(--cbp-color-interactive-secondary-base);--cbp-form-field-color-border-hover:var(--cbp-color-interactive-secondary-darker);--cbp-form-field-color-border-focus:var(--cbp-color-interactive-focus-dark);--cbp-form-field-color-label:var(--cbp-color-text-darkest);--cbp-form-field-color-description:var(--cbp-color-text-darkest);--cbp-form-field-color-placeholder:var(--cbp-color-text-dark);--cbp-form-field-color-dark:var(--cbp-color-text-lightest);--cbp-form-field-color-bg-dark:var(--cbp-color-gray-cool-70);--cbp-form-field-color-border-dark:var(--cbp-color-interactive-secondary-light);--cbp-form-field-color-border-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-form-field-color-border-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-form-field-color-label-dark:var(--cbp-color-text-lightest);--cbp-form-field-color-description-dark:var(--cbp-color-text-lightest);--cbp-form-field-color-placeholder-dark:var(--cbp-color-text-light);--cbp-form-field-padding-inline:var(--cbp-space-2x);--cbp-form-field-margin-bottom:var(--cbp-space-4x);--cbp-form-field-border-radius:var(--cbp-border-radius-soft);--cbp-form-field-select-chevron:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 512 512\" fill=\"%23fcfcfc\"><path d=\"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"/></svg>');--cbp-form-field-select-chevron-dark:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 512 512\" fill=\"%231b1b1b\"><path d=\"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"/></svg>')}[data-cbp-theme=light] cbp-form-field[context*=dark],[data-cbp-theme=dark] cbp-form-field:not([context=dark-inverts]):not([context=light-always]){--cbp-form-field-color-label:var(--cbp-form-field-color-label-dark);--cbp-form-field-color-description:var(--cbp-form-field-color-description-dark);--cbp-form-field-color:var(--cbp-form-field-color-dark);--cbp-form-field-color-bg:var(--cbp-form-field-color-bg-dark);--cbp-form-field-color-border:var(--cbp-form-field-color-border-dark);--cbp-form-field-color-border-hover:var(--cbp-form-field-color-border-hover-dark);--cbp-form-field-color-border-focus:var(--cbp-form-field-color-border-focus-dark);--cbp-form-field-color-placeholder:var(--cbp-form-field-color-placeholder-dark);--cbp-form-field-select-chevron:var(--cbp-form-field-select-chevron-dark)}cbp-form-field{display:block;margin-bottom:var(--cbp-form-field-margin-bottom)}cbp-form-field fieldset,cbp-form-field legend{all:unset}cbp-form-field fieldset{display:block}cbp-form-field .cbp-form-field-label{display:block;color:var(--cbp-form-field-color-label);font-size:var(--cbp-font-size-body);font-weight:var(--cbp-font-weight-bold);font-style:italic;line-height:var(--cbp-line-height-xs)}cbp-form-field .cbp-form-field-description{display:block;color:var(--cbp-form-field-color-description);font-size:var(--cbp-font-size-subhead);font-weight:var(--cbp-font-weight-medium);font-style:italic;line-height:var(--cbp-line-height-xs);margin-bottom:var(--cbp-space-1x)}cbp-form-field .cbp-form-field-container{position:relative}cbp-form-field input,cbp-form-field textarea,cbp-form-field select,cbp-form-field .cbp-custom-form-control{width:100%;max-width:100%;min-height:var(--cbp-space-9x);padding-inline:var(--cbp-form-field-padding-inline);font-family:inherit;font-size:var(--cbp-font-size-body);line-height:var(--cbp-line-height-xs);text-align:start;vertical-align:middle;color:var(--cbp-form-field-color);background-color:var(--cbp-form-field-color-bg);border-style:solid;border-width:var(--cbp-border-size-md);border-color:var(--cbp-form-field-color-border);border-radius:var(--cbp-form-field-border-radius);outline-style:solid;outline-width:0;outline-color:var(--cbp-form-field-color-border-focus);outline-offset:-1px;scrollbar-width:thin;scrollbar-color:var(--cbp-form-field-color-border) var(--cbp-form-field-color-bg)}cbp-form-field input::-webkit-scrollbar,cbp-form-field textarea::-webkit-scrollbar,cbp-form-field select::-webkit-scrollbar,cbp-form-field .cbp-custom-form-control::-webkit-scrollbar{width:var(--cbp-space-1x)}cbp-form-field input::-webkit-scrollbar-track,cbp-form-field textarea::-webkit-scrollbar-track,cbp-form-field select::-webkit-scrollbar-track,cbp-form-field .cbp-custom-form-control::-webkit-scrollbar-track{background-color:var(--cbp-form-field-color-bg)}cbp-form-field input::-webkit-scrollbar-thumb,cbp-form-field textarea::-webkit-scrollbar-thumb,cbp-form-field select::-webkit-scrollbar-thumb,cbp-form-field .cbp-custom-form-control::-webkit-scrollbar-thumb{background-color:var(--cbp-form-field-color-border)}cbp-form-field input:hover,cbp-form-field textarea:hover,cbp-form-field select:hover,cbp-form-field .cbp-custom-form-control:hover{--cbp-form-field-color-border:var(--cbp-form-field-color-border-hover)}cbp-form-field input:focus,cbp-form-field input:focus-visible,cbp-form-field textarea:focus,cbp-form-field textarea:focus-visible,cbp-form-field select:focus,cbp-form-field select:focus-visible,cbp-form-field .cbp-custom-form-control:focus,cbp-form-field .cbp-custom-form-control:focus-visible{--cbp-form-field-color-border:var(--cbp-form-field-color-border-focus);outline-width:var(--cbp-border-size-lg)}cbp-form-field input[readonly],cbp-form-field input:disabled,cbp-form-field textarea[readonly],cbp-form-field textarea:disabled,cbp-form-field select[readonly],cbp-form-field select:disabled,cbp-form-field .cbp-custom-form-control[readonly],cbp-form-field .cbp-custom-form-control:disabled{font-style:italic;cursor:not-allowed}cbp-form-field[disabled],cbp-form-field:has(:not(button):disabled){--cbp-form-field-color:var(--cbp-color-interactive-disabled-dark);--cbp-form-field-color-bg:var(--cbp-color-interactive-disabled-light);--cbp-form-field-color-border:var(--cbp-color-interactive-disabled-dark);--cbp-form-field-color-border-hover:var(--cbp-color-interactive-disabled-dark);--cbp-form-field-color-dark:var(--cbp-color-interactive-disabled-light);--cbp-form-field-color-bg-dark:var(--cbp-color-interactive-disabled-dark);--cbp-form-field-color-border-dark:var(--cbp-color-interactive-disabled-light);--cbp-form-field-color-border-hover-dark:var(--cbp-color-interactive-disabled-light);--cbp-form-field-color-placeholder:transparent}cbp-form-field[readonly],cbp-form-field:has(*[readonly]){--cbp-form-field-color-bg:var(--cbp-color-gray-cool-10);--cbp-form-field-color-border:var(--cbp-color-interactive-secondary-light);--cbp-form-field-color-border-hover:var(--cbp-color-interactive-secondary-light);--cbp-form-field-color-border-focus:var(--cbp-color-interactive-secondary-light);--cbp-form-field-color-bg-dark:var(--cbp-color-gray-cool-80);--cbp-form-field-color-border-dark:var(--cbp-color-interactive-secondary-dark);--cbp-form-field-color-border-hover-dark:var(--cbp-color-interactive-secondary-dark);--cbp-form-field-color-border-focus:var(--cbp-color-interactive-secondary-dark);--cbp-form-field-color-placeholder:transparent}cbp-form-field[readonly] cbp-button[fill=solid]:has(button:disabled),cbp-form-field:has(*[readonly]) cbp-button[fill=solid]:has(button:disabled){--cbp-button-color:var(--cbp-color-text-lightest);--cbp-button-color-bg:var(--cbp-color-white);--cbp-button-color-border:var(--cbp-form-field-color-border);--cbp-button-color-dark:var(--cbp-color-text-base);--cbp-button-color-bg-dark:var(--cbp-form-field-color-border-dark);--cbp-button-color-border-dark:var(--cbp-form-field-color-border-dark)}cbp-form-field[readonly] cbp-button[fill=outline]:has(button:disabled),cbp-form-field:has(*[readonly]) cbp-button[fill=outline]:has(button:disabled){--cbp-button-color:var(--cbp-color-interactive-secondary-base);--cbp-button-color-bg:var(--cbp-color-interactive-secondary-light);--cbp-button-color-border:var(--cbp-color-interactive-secondary-base);--cbp-button-color-dark:var(--cbp-color-interactive-secondary-base);--cbp-button-color-bg-dark:var(--cbp-form-field-color-bg-dark);--cbp-button-color-border-dark:var(--cbp-color-interactive-secondary-base)}cbp-form-field ::placeholder{color:var(--cbp-form-field-color-placeholder);font-style:italic}cbp-form-field input[type=file]{line-height:var(--cbp-space-8x)}cbp-form-field ::file-selector-button{display:none}cbp-form-field textarea{min-height:6.75rem;max-height:80vh;padding-block:var(--cbp-space-2x);resize:vertical}cbp-form-field select,cbp-form-field cbp-dropdown .cbp-custom-form-control{appearance:none;text-overflow:ellipsis;padding-block:calc(var(--cbp-space-2x) - 2px)}cbp-form-field select option,cbp-form-field cbp-dropdown .cbp-custom-form-control option{color:var(--cbp-form-field-color);background-color:var(--cbp-form-field-color-bg)}cbp-form-field select optgroup,cbp-form-field cbp-dropdown .cbp-custom-form-control optgroup{color:var(--cbp-form-field-color);background-color:var(--cbp-form-field-color-bg);font-weight:var(--cbp-font-weight-bold)}cbp-form-field select:not([multiple]):not([size]){--cbp-form-field-dropdown-faux-button-width:calc(var(--cbp-space-9x) - var(--cbp-border-size-md));background:right calc(var(--cbp-form-field-dropdown-faux-button-width) / 2 - 8px) top calc(1rem - 8px) no-repeat var(--cbp-form-field-select-chevron), right -0.4px top 0px repeat-y linear-gradient(90deg, var(--cbp-form-field-color-bg) calc(100% - var(--cbp-form-field-dropdown-faux-button-width)), var(--cbp-form-field-color-border) var(--cbp-space-9x));padding-inline-end:var(--cbp-space-9x)}cbp-form-field[error]{--cbp-form-field-color-bg:var(--cbp-color-danger-lighter);--cbp-form-field-color-border:var(--cbp-color-danger-dark);--cbp-form-field-color-border-hover:var(--cbp-color-danger-darker);--cbp-form-field-color-description:var(--cbp-color-danger-dark);--cbp-form-field-color-bg-dark:var(--cbp-color-danger-darker);--cbp-form-field-color-border-dark:var(--cbp-color-danger-light);--cbp-form-field-color-border-hover-dark:var(--cbp-color-danger-lighter);--cbp-form-field-color-description-dark:var(--cbp-color-danger-light)}cbp-form-field input:is(:-webkit-autofill,:autofill),cbp-form-field input:is(:-webkit-autofill,:autofill):focus{box-shadow:0 0 0 1000px var(--cbp-form-field-color-bg) inset;-webkit-text-fill-color:var(--cbp-form-field-color)}cbp-form-field ::-ms-reveal{display:none}";
const CbpFormFieldStyle0 = cbpFormFieldCss;
const CbpFormField = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.valueChange = index.createEvent(this, "valueChange", 7);
this.label = undefined;
this.description = undefined;
this.fieldId = utils.createNamespaceKey('cbp-formfield');
this.group = undefined;
this.error = undefined;
this.errorMessages = undefined;
this.readonly = undefined;
this.disabled = undefined;
this.context = undefined;
this.sx = {};
}
handleChange(e) {
this.valueChange.emit({
host: this.host,
nativeElement: this.formField,
value: this.formField.value,
nativeEvent: e
});
}
watchReadonlyHandler(newValue) {
if (this.formField) {
(newValue)
? this.formField.setAttribute('readonly', '')
: this.formField.removeAttribute('readonly');
}
if (this.formFieldComponent) {
this.formFieldComponent.readonly = newValue;
}
if (this.buttons) {
this.buttons.forEach((el) => {
el.disabled = this.disabled || this.readonly;
});
}
}
watchDisabledHandler(newValue) {
if (this.formField) {
(newValue)
? this.formField.setAttribute('disabled', '')
: this.formField.removeAttribute('disabled');
}
if (this.formFieldComponent) {
this.formFieldComponent.disabled = newValue;
}
if (this.buttons) {
this.buttons.forEach((el) => {
el.disabled = this.disabled || this.readonly;
});
}
}
watchErrorHandler(newValue) {
if (this.formField) {
(newValue)
? this.formField.setAttribute('aria-invalid', 'true')
: this.formField.removeAttribute('aria-invalid');
}
if (this.formFieldComponent) {
this.formFieldComponent.error = newValue;
}
if (this.buttons) {
this.buttons.forEach((el) => {
(newValue)
? el.color = "danger"
: el.color = "secondary";
});
}
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
utils.setCSSProps(this.host, Object.assign({}, this.sx));
}
componentDidLoad() {
if (!this.group) {
this.formField = this.host.querySelector('button[role=combobox],input,select,textarea');
this.formFieldComponent = this.host.querySelector('cbp-dropdown,cbp-slider,cbp-file-input');
this.buttons = this.host.querySelectorAll('cbp-button');
this.attachedButtons = this.host.querySelectorAll('[slot=cbp-form-field-attached-button] cbp-button');
this.hasDescription = !!this.description || !!this.host.querySelector('[slot=cbp-form-field-description]');
if (this.formField) {
this.formField.getAttribute('id')
? this.fieldId = this.formField.getAttribute('id')
: this.formField.setAttribute('id', `${this.fieldId}`);
this.hasDescription && this.formField.setAttribute('aria-describedby', `${this.fieldId}-description`);
this.formField.addEventListener('change', (e) => this.handleChange(e));
}
if (!!this.formField) {
if (this.readonly)
this.formField.setAttribute('readonly', '');
if (this.disabled)
this.formField.setAttribute('disabled', '');
if (this.error)
this.formField.setAttribute('aria-invalid', 'true');
}
if (this.formFieldComponent) {
this.formFieldComponent.fieldId
? this.fieldId = this.formFieldComponent.fieldId
: this.formFieldComponent.fieldId = this.fieldId;
if (this.readonly)
this.formFieldComponent.readonly = true;
if (this.disabled)
this.formFieldComponent.disabled = true;
if (this.error)
this.formFieldComponent.error = true;
}
if (!!this.buttons) {
this.buttons.forEach((el) => {
if (this.disabled || this.readonly)
el.disabled = true;
});
}
if (!!this.attachedButtons) {
this.attachedButtons.forEach((el) => {
if (this.error)
el.color = "danger";
});
}
}
}
render() {
if (this.group) {
return (index.h(index.Host, null, index.h("fieldset", { disabled: this.disabled, "aria-labelledby": `${this.fieldId}-grouplabel`, "aria-describedby": `${this.fieldId}-description`, "aria-invalid": this.error ? 'true' : false }, index.h("legend", { id: `${this.fieldId}-grouplabel`, class: "cbp-form-field-label" }, this.label, index.h("slot", { name: "cbp-form-field-label" })), index.h("div", { id: `${this.fieldId}-description`, class: "cbp-form-field-description" }, this.error && index.h("cbp-icon", { name: "triangle-exclamation", color: "var(--cbp-form-field-color-description)", sx: '{"margin-inline-end":"var(--cbp-space-1x)","vertical-align":"text-top"}' }), this.description, index.h("slot", { name: "cbp-form-field-description" })), index.h("div", { class: "cbp-form-field-container" }, index.h("slot", null)), index.h("slot", { name: "cbp-form-field-extra" }))));
}
else {
return (index.h(index.Host, null, index.h("label", { htmlFor: this.fieldId, id: `${this.fieldId}-label`, class: "cbp-form-field-label" }, this.label, index.h("slot", { name: "cbp-form-field-label" })), index.h("div", { id: `${this.fieldId}-description`, class: "cbp-form-field-description" }, this.error && index.h("cbp-icon", { name: "triangle-exclamation", color: "var(--cbp-form-field-color-description)", size: "var(--cbp-space-3x)", sx: '{"margin-inline-end":"var(--cbp-space-1x)"}' }), this.description, index.h("slot", { name: "cbp-form-field-description" })), index.h("div", { class: "cbp-form-field-container" }, index.h("slot", null)), index.h("slot", { name: "cbp-form-field-extra" })));
}
}
get host() { return index.getElement(this); }
static get watchers() { return {
"readonly": ["watchReadonlyHandler"],
"disabled": ["watchDisabledHandler"],
"error": ["watchErrorHandler"]
}; }
};
CbpFormField.style = CbpFormFieldStyle0;
exports.cbp_form_field = CbpFormField;
//# sourceMappingURL=cbp-form-field.cjs.entry.js.map