@cbpds/web-components
Version:
Web components for the CBP Design System.
89 lines (83 loc) • 11.2 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 cbpCheckboxCss = ":root{--cbp-checkbox-color:var(--cbp-color-text-lightest);--cbp-checkbox-color-bg:var(--cbp-color-white);--cbp-checkbox-color-border:var(--cbp-color-interactive-secondary-dark);--cbp-checkbox-color-border-hover:var(--cbp-color-interactive-secondary-darker);--cbp-checkbox-color-border-focus:var(--cbp-color-interactive-focus-dark);--cbp-checkbox-color-halo:transparent;--cbp-checkbox-color-halo-hover:var(--cbp-color-interactive-secondary-lighter);--cbp-checkbox-color-halo-focus:var(--cbp-color-interactive-focus-light);--cbp-checkbox-color-bg-checked:var(--cbp-color-interactive-selected-dark);--cbp-checkbox-color-bg-checked-focus:var(--cbp-color-interactive-focus-dark);--cbp-checkbox-color-border-checked:var(--cbp-color-interactive-selected-dark);--cbp-checkbox-color-border-checked-hover:var(--cbp-color-interactive-selected-dark);--cbp-checkbox-color-border-checked-focus:var(--cbp-color-white);--cbp-checkbox-color-halo-checked-hover:var(--cbp-color-interactive-selected-light);--cbp-checkbox-color-halo-checked-focus:var(--cbp-color-interactive-focus-light);--cbp-checkbox-color-label:var(--cbp-color-text-darkest);--cbp-checkbox-color-dark:var(--cbp-color-text-darkest);--cbp-checkbox-color-bg-dark:var(--cbp-color-gray-cool-70);--cbp-checkbox-color-border-dark:var(--cbp-color-interactive-secondary-light);--cbp-checkbox-color-border-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-checkbox-color-border-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-checkbox-color-halo-dark:transparent;--cbp-checkbox-color-halo-hover-dark:var(--cbp-color-text-darker);--cbp-checkbox-color-halo-focus-dark:var(--cbp-color-interactive-focus-dark);--cbp-checkbox-color-bg-checked-dark:var(--cbp-color-interactive-selected-light);--cbp-checkbox-color-bg-checked-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-checkbox-color-border-checked-dark:var(--cbp-color-interactive-selected-light);--cbp-checkbox-color-border-checked-hover-dark:var(--cbp-color-interactive-selected-light);--cbp-checkbox-color-border-checked-focus-dark:var(--cbp-color-black);--cbp-checkbox-color-halo-checked-hover-dark:var(--cbp-color-interactive-selected-dark);--cbp-checkbox-color-halo-checked-focus-dark:var(--cbp-color-interactive-focus-dark);--cbp-checkbox-color-label-dark:var(--cbp-color-text-lightest);--cbp-checkbox-min-height:var(--cbp-space-11x);--cbp-checkbox-margin:0 0 var(--cbp-space-1x) 0;--cbp-checkbox-font-weight-label:var(--cbp-font-weight-bold)}[data-cbp-theme=light] cbp-checkbox[context*=dark],[data-cbp-theme=dark] cbp-checkbox:not([context=dark-inverts]):not([context=light-always]){--cbp-checkbox-color:var(--cbp-checkbox-color-dark);--cbp-checkbox-color-bg:var(--cbp-checkbox-color-bg-dark);--cbp-checkbox-color-border:var(--cbp-checkbox-color-border-dark);--cbp-checkbox-color-border-hover:var(--cbp-checkbox-color-border-hover-dark);--cbp-checkbox-color-border-focus:var(--cbp-checkbox-color-border-focus-dark);--cbp-checkbox-color-halo:var(--cbp-checkbox-color-halo-dark);--cbp-checkbox-color-halo-hover:var(--cbp-checkbox-color-halo-hover-dark);--cbp-checkbox-color-halo-focus:var(--cbp-checkbox-color-halo-focus-dark);--cbp-checkbox-color-bg-checked:var(--cbp-checkbox-color-bg-checked-dark);--cbp-checkbox-color-bg-checked-focus:var(--cbp-checkbox-color-bg-checked-focus-dark);--cbp-checkbox-color-border-checked:var(--cbp-checkbox-color-border-checked-dark);--cbp-checkbox-color-border-checked-hover:var(--cbp-checkbox-color-border-checked-hover-dark);--cbp-checkbox-color-border-checked-focus:var(--cbp-checkbox-color-border-checked-focus-dark);--cbp-checkbox-color-halo-checked-hover:var(--cbp-checkbox-color-halo-checked-hover-dark);--cbp-checkbox-color-halo-checked-focus:var(--cbp-checkbox-color-halo-checked-focus-dark);--cbp-checkbox-color-label:var(--cbp-checkbox-color-label-dark)}cbp-checkbox{display:block;margin:var(--cbp-checkbox-margin);position:relative}cbp-checkbox label{display:grid;grid-template-columns:var(--cbp-space-6x) 1fr;align-items:center;gap:var(--cbp-space-2x);min-height:var(--cbp-checkbox-min-height);font-weight:var(--cbp-checkbox-font-weight-label);color:var(--cbp-checkbox-color-label)}cbp-checkbox input[type=checkbox]{appearance:none;display:grid;place-content:center;flex-grow:0;color:var(--cbp-checkbox-color);background-color:var(--cbp-checkbox-color-bg);min-height:unset;height:var(--cbp-space-6x);width:var(--cbp-space-6x);margin:0;border-color:var(--cbp-checkbox-color-border);border-style:solid;border-width:var(--cbp-border-size-md);border-radius:var(--cbp-border-radius-soft);outline:0;box-shadow:0 0 0 calc(var(--cbp-space-5x) / 2) var(--cbp-checkbox-color-halo);clip-path:circle(86%)}cbp-checkbox input[type=checkbox]::before{content:\"\";overflow:hidden}cbp-checkbox input[type=checkbox]:hover{--cbp-checkbox-color-border:var(--cbp-checkbox-color-border-hover);--cbp-checkbox-color-halo:var(--cbp-checkbox-color-halo-hover)}cbp-checkbox input[type=checkbox]:focus{--cbp-checkbox-color-border:var(--cbp-checkbox-color-border-focus);--cbp-checkbox-color-halo:var(--cbp-checkbox-color-halo-focus)}cbp-checkbox input[type=checkbox]:checked,cbp-checkbox input[type=checkbox]:indeterminate{--cbp-checkbox-color-bg:var(--cbp-checkbox-color-bg-checked);--cbp-checkbox-color-border:var(--cbp-checkbox-color-border-checked)}cbp-checkbox input[type=checkbox]:checked:hover,cbp-checkbox input[type=checkbox]:indeterminate:hover{--cbp-checkbox-color-border:var(--cbp-checkbox-color-border-checked-hover);--cbp-checkbox-color-halo:var(--cbp-checkbox-color-halo-checked-hover)}cbp-checkbox input[type=checkbox]:checked:focus,cbp-checkbox input[type=checkbox]:indeterminate:focus{--cbp-checkbox-color-bg:var(--cbp-checkbox-color-bg-checked-focus);--cbp-checkbox-color-border:var(--cbp-checkbox-color-border-checked-focus);--cbp-checkbox-color-halo:var(--cbp-checkbox-color-halo-checked-focus)}cbp-checkbox input[type=checkbox]:checked::before{height:var(--cbp-space-4x);width:var(--cbp-space-2x);border-right:solid var(--cbp-border-size-xl) var(--cbp-checkbox-color);border-bottom:solid var(--cbp-border-size-xl) var(--cbp-checkbox-color);transform:rotate(45deg) translateY(-10%) translateX(-10%)}cbp-checkbox input[type=checkbox]:indeterminate::before{height:0;width:var(--cbp-space-4x);border:solid var(--cbp-border-size-md) var(--cbp-checkbox-color);border-radius:var(--cbp-border-radius-soft)}cbp-checkbox[disabled],cbp-checkbox:has(*:disabled){cursor:not-allowed}cbp-checkbox[disabled] label,cbp-checkbox:has(*:disabled) label{font-style:italic;cursor:not-allowed}cbp-checkbox[disabled],cbp-checkbox:has(*:disabled){--cbp-checkbox-color:var(--cbp-color-interactive-disabled-light);--cbp-checkbox-color-bg:var(--cbp-color-interactive-disabled-light);--cbp-checkbox-color-border:var(--cbp-color-interactive-disabled-dark);--cbp-checkbox-color-border-hover:var(--cbp-color-interactive-disabled-dark);--cbp-checkbox-color-bg-checked:var(--cbp-color-interactive-disabled-dark);--cbp-checkbox-color-border-checked:var(--cbp-color-interactive-disabled-dark);--cbp-checkbox-color-border-checked-hover:var(--cbp-color-interactive-disabled-dark);--cbp-checkbox-color-halo-hover:transparent;--cbp-checkbox-color-halo-checked-hover:transparent;--cbp-checkbox-color-label:var(--cbp-color-interactive-disabled-dark);--cbp-checkbox-color-dark:var(--cbp-color-interactive-disabled-dark);--cbp-checkbox-color-bg-dark:var(--cbp-color-interactive-disabled-dark);--cbp-checkbox-color-border-dark:var(--cbp-color-interactive-disabled-light);--cbp-checkbox-color-border-hover-dark:var(--cbp-color-interactive-disabled-light);--cbp-checkbox-color-bg-checked-dark:var(--cbp-color-interactive-disabled-light);--cbp-checkbox-color-border-checked-dark:var(--cbp-color-interactive-disabled-light);--cbp-checkbox-color-border-checked-hover-dark:var(--cbp-color-interactive-disabled-light);--cbp-checkbox-color-halo-hover-dark:transparent;--cbp-checkbox-color-halo-checked-hover-dark:transparent;--cbp-checkbox-color-label-dark:var(--cbp-color-interactive-disabled-light)}";
const CbpCheckboxStyle0 = cbpCheckboxCss;
const CbpCheckbox = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.stateChanged = index.createEvent(this, "stateChanged", 7);
this.name = undefined;
this.value = undefined;
this.fieldId = utils.createNamespaceKey('cbp-checkbox');
this.checked = undefined;
this.indeterminate = undefined;
this.disabled = undefined;
this.context = undefined;
this.sx = {};
}
handleChange(e) {
this.checked = this.formField.checked;
this.stateChanged.emit({
host: this.host,
nativeElement: this.formField,
value: this.formField.value,
checked: this.formField.checked,
nativeEvent: e
});
}
watchDisabledHandler(newValue) {
if (this.formField) {
(newValue)
? this.formField.setAttribute('disabled', '')
: this.formField.removeAttribute('disabled');
}
}
watchIndeterminateHandler(newValue) {
if (this.formField)
this.formField.indeterminate = newValue;
if (newValue == true)
this.checked = false;
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
utils.setCSSProps(this.host, Object.assign({}, this.sx));
this.formField = this.host.querySelector('input[type=checkbox]');
if (this.formField) {
const checkboxId = this.formField.getAttribute('id');
checkboxId ? this.fieldId = checkboxId : this.formField.setAttribute('id', this.fieldId);
this.formField.addEventListener('change', (e) => this.handleChange(e));
}
}
componentDidLoad() {
if (!!this.formField) {
if (this.checked)
this.formField.checked = this.checked;
if (this.indeterminate && !this.checked)
this.formField.indeterminate = this.indeterminate;
if (this.disabled)
this.formField.setAttribute('disabled', '');
if (this.name)
this.formField.name = this.name;
if (this.value)
this.formField.value = this.value;
}
}
render() {
return (index.h(index.Host, { key: 'b8c518b700a73dfbf005165c00f3f27fd9a30b7f' }, index.h("label", { key: 'ae1bbdcfa0e047080d70e30b9e42f04b55122a39', htmlFor: this.fieldId }, index.h("slot", { key: '2ad2c977bcbb586f2055dcb6e33d19cd85244fc1' }))));
}
get host() { return index.getElement(this); }
static get watchers() { return {
"disabled": ["watchDisabledHandler"],
"indeterminate": ["watchIndeterminateHandler"]
}; }
};
CbpCheckbox.style = CbpCheckboxStyle0;
exports.cbp_checkbox = CbpCheckbox;
//# sourceMappingURL=cbp-checkbox.cjs.entry.js.map