@cbpds/web-components
Version:
Web components for the CBP Design System.
75 lines (71 loc) • 9.79 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-6c11fa0c.js';
import { c as createNamespaceKey, s as setCSSProps } from './utils-475ba472.js';
const cbpRadioCss = ":root{--cbp-radio-color-bg:var(--cbp-color-white);--cbp-radio-color-border:var(--cbp-color-interactive-secondary-dark);--cbp-radio-color-border-hover:var(--cbp-color-interactive-secondary-darker);--cbp-radio-color-border-focus:var(--cbp-color-interactive-focus-dark);--cbp-radio-color-halo:transparent;--cbp-radio-color-halo-hover:var(--cbp-color-interactive-secondary-lighter);--cbp-radio-color-halo-focus:var(--cbp-color-interactive-focus-light);--cbp-radio-color-checked:var(--cbp-color-interactive-selected-dark);--cbp-radio-color-checked-focus:var(--cbp-color-interactive-focus-dark);--cbp-radio-color-border-checked:var(--cbp-color-interactive-selected-dark);--cbp-radio-color-border-checked-hover:var(--cbp-color-interactive-selected-dark);--cbp-radio-color-border-checked-focus:var(--cbp-color-interactive-focus-dark);--cbp-radio-color-halo-checked-hover:var(--cbp-color-interactive-selected-light);--cbp-radio-color-halo-checked-focus:var(--cbp-color-interactive-focus-light);--cbp-radio-color-label:var(--cbp-color-text-darkest);--cbp-radio-color-bg-dark:var(--cbp-color-gray-cool-70);--cbp-radio-color-border-dark:var(--cbp-color-interactive-secondary-light);--cbp-radio-color-border-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-radio-color-border-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-radio-color-halo-dark:transparent;--cbp-radio-color-halo-hover-dark:var(--cbp-color-interactive-secondary-dark);--cbp-radio-color-halo-focus-dark:var(--cbp-color-interactive-focus-dark);--cbp-radio-color-checked-dark:var(--cbp-color-interactive-selected-light);--cbp-radio-color-checked-focus-dark:var(--cbp-color-white);--cbp-radio-color-border-checked-dark:var(--cbp-color-interactive-selected-light);--cbp-radio-color-border-checked-hover-dark:var(--cbp-color-interactive-selected-light);--cbp-radio-color-border-checked-focus-dark:var(--cbp-color-white);--cbp-radio-color-halo-checked-hover-dark:var(--cbp-color-interactive-selected-dark);--cbp-radio-color-halo-checked-focus-dark:var(--cbp-color-interactive-focus-dark);--cbp-radio-color-label-dark:var(--cbp-color-text-lightest);--cbp-radio-min-height:var(--cbp-space-11x);--cbp-radio-margin:0 0 var(--cbp-space-1x) 0;--cbp-radio-font-weight-label:var(--cbp-font-weight-bold)}[data-cbp-theme=light] cbp-radio[context*=dark],[data-cbp-theme=dark] cbp-radio:not([context=dark-inverts]):not([context=light-always]){--cbp-radio-color-bg:var(--cbp-radio-color-bg-dark);--cbp-radio-color-border:var(--cbp-radio-color-border-dark);--cbp-radio-color-border-hover:var(--cbp-radio-color-border-hover-dark);--cbp-radio-color-border-focus:var(--cbp-radio-color-border-focus-dark);--cbp-radio-color-halo:var(--cbp-radio-color-halo-dark);--cbp-radio-color-halo-hover:var(--cbp-radio-color-halo-hover-dark);--cbp-radio-color-halo-focus:var(--cbp-radio-color-halo-focus-dark);--cbp-radio-color-checked:var(--cbp-radio-color-checked-dark);--cbp-radio-color-checked-focus:var(--cbp-radio-color-checked-focus-dark);--cbp-radio-color-bg-checked-focus:var(--cbp-radio-color-bg-checked-focus-dark);--cbp-radio-color-border-checked:var(--cbp-radio-color-border-checked-dark);--cbp-radio-color-border-checked-hover:var(--cbp-radio-color-border-checked-hover-dark);--cbp-radio-color-border-checked-focus:var(--cbp-radio-color-border-checked-focus-dark);--cbp-radio-color-halo-checked-hover:var(--cbp-radio-color-halo-checked-hover-dark);--cbp-radio-color-halo-checked-focus:var(--cbp-radio-color-halo-checked-focus-dark);--cbp-radio-color-label:var(--cbp-radio-color-label-dark)}cbp-radio{display:block;margin:var(--cbp-radio-margin);position:relative}cbp-radio label{display:grid;grid-template-columns:var(--cbp-space-7x) 1fr;align-items:center;gap:var(--cbp-space-2x);min-height:var(--cbp-radio-min-height);font-weight:var(--cbp-radio-font-weight-label);color:var(--cbp-radio-color-label)}cbp-radio input[type=radio]{appearance:none;display:grid;place-content:center;background-color:var(--cbp-radio-color-bg);min-height:unset;height:var(--cbp-space-7x);width:var(--cbp-space-7x);margin:0;border-color:var(--cbp-radio-color-border);border-style:solid;border-width:var(--cbp-border-size-md);border-radius:var(--cbp-border-radius-circle);outline:0;box-shadow:0 0 0 calc(var(--cbp-space-5x) / 2) var(--cbp-radio-color-halo);clip-path:circle(80%)}cbp-radio input[type=radio]::before{content:\"\";overflow:hidden;height:var(--cbp-space-4x);width:var(--cbp-space-4x);transform:scale(0);background-color:var(--cbp-radio-color-checked);border-radius:var(--cbp-border-radius-circle)}cbp-radio input[type=radio]:hover{--cbp-radio-color-border:var(--cbp-radio-color-border-hover);--cbp-radio-color-halo:var(--cbp-radio-color-halo-hover)}cbp-radio input[type=radio]:focus{--cbp-radio-color-border:var(--cbp-radio-color-border-focus);--cbp-radio-color-halo:var(--cbp-radio-color-halo-focus)}cbp-radio input[type=radio]:checked{--cbp-radio-color-border:var(--cbp-radio-color-border-checked)}cbp-radio input[type=radio]:checked:hover{--cbp-radio-color-border:var(--cbp-radio-color-border-checked-hover);--cbp-radio-color-halo:var(--cbp-radio-color-halo-checked-hover)}cbp-radio input[type=radio]:checked:focus{--cbp-radio-color-checked:var(--cbp-radio-color-checked-focus);--cbp-radio-color-border:var(--cbp-radio-color-border-checked-focus);--cbp-radio-color-halo:var(--cbp-radio-color-halo-checked-focus)}cbp-radio input[type=radio]:checked::before{transform:scale(1);transition:all var(--cbp-motion-duration-shortest) ease-in-out}cbp-radio[disabled],cbp-radio:has(*:disabled){cursor:not-allowed}cbp-radio[disabled] label,cbp-radio:has(*:disabled) label{font-style:italic;cursor:not-allowed}cbp-radio[disabled],cbp-radio:has(*:disabled){--cbp-radio-color-bg:var(--cbp-color-interactive-disabled-light);--cbp-radio-color-border:var(--cbp-color-interactive-disabled-dark);--cbp-radio-color-border-hover:var(--cbp-color-interactive-disabled-dark);--cbp-radio-color-bg-checked:var(--cbp-color-interactive-disabled-dark);--cbp-radio-color-checked:var(--cbp-color-interactive-disabled-dark);--cbp-radio-color-border-checked:var(--cbp-color-interactive-disabled-dark);--cbp-radio-color-border-checked-hover:var(--cbp-color-interactive-disabled-dark);--cbp-radio-color-halo-hover:transparent;--cbp-radio-color-halo-checked-hover:transparent;--cbp-radio-color-label:var(--cbp-color-interactive-disabled-dark);--cbp-radio-color-bg-dark:var(--cbp-color-interactive-disabled-dark);--cbp-radio-color-border-dark:var(--cbp-color-interactive-disabled-light);--cbp-radio-color-border-hover-dark:var(--cbp-color-interactive-disabled-light);--cbp-radio-color-checked-dark:var(--cbp-color-interactive-disabled-light);--cbp-radio-color-bg-checked-dark:var(--cbp-color-interactive-disabled-light);--cbp-radio-color-border-checked-dark:var(--cbp-color-interactive-disabled-light);--cbp-radio-color-border-checked-hover-dark:var(--cbp-color-interactive-disabled-light);--cbp-radio-color-halo-hover-dark:transparent;--cbp-radio-color-halo-checked-hover-dark:transparent;--cbp-radio-color-label-dark:var(--cbp-color-interactive-disabled-light)}";
const CbpRadioStyle0 = cbpRadioCss;
const CbpRadio = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.stateChanged = createEvent(this, "stateChanged", 7);
this.name = undefined;
this.value = undefined;
this.fieldId = createNamespaceKey('cbp-radio');
this.checked = 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');
}
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
this.formField = this.host.querySelector('input[type=radio]');
if (this.formField) {
const radioId = this.formField.getAttribute('id');
radioId ? this.fieldId = radioId : 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.disabled)
this.formField.setAttribute('disabled', '');
if (this.name)
this.formField.name = this.name;
if (this.value)
this.formField.value = this.value;
}
}
render() {
return (h(Host, { key: 'cfce61c722739114fcaf764acdf47ae120e74858' }, h("label", { key: 'f4e650d7b9d5d9025bcc1250754b88e81bb599ac', htmlFor: this.fieldId }, h("slot", { key: '7df14637c3135ad257baec2d2cf4486f2486fb06' }))));
}
get host() { return getElement(this); }
static get watchers() { return {
"disabled": ["watchDisabledHandler"]
}; }
};
CbpRadio.style = CbpRadioStyle0;
export { CbpRadio as cbp_radio };
//# sourceMappingURL=cbp-radio.entry.js.map