@cbpds/web-components
Version:
Web components for the CBP Design System.
88 lines (84 loc) • 13.2 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-31e2d0a8.js';
import { s as setCSSProps } from './utils-475ba472.js';
const cbpToggleCss = ":root{--cbp-toggle-color-bg:var(--cbp-color-interactive-secondary-light);--cbp-toggle-color-bg-dark:var(--cbp-color-interactive-secondary-dark);--cbp-toggle-color-bg-selected:var(--cbp-color-interactive-selected-dark);--cbp-toggle-color-bg-selected-dark:var(--cbp-color-interactive-selected-light);--cbp-toggle-circle-color:var(--cbp-color-white);--cbp-toggle-circle-color-dark:var(--cbp-color-white);--cbp-toggle-circle-color-selected:var(--cbp-color-white);--cbp-toggle-circle-color-selected-dark:var(--cbp-color-interactive-secondary-darker);--cbp-toggle-circle-color-border:var(--cbp-toggle-circle-color);--cbp-toggle-circle-color-border-dark:var(--cbp-toggle-circle-color-dark);--cbp-toggle-circle-color-border-selected:var(--cbp-color-white);--cbp-toggle-circle-color-border-selected-dark:var(--cbp-color-interactive-secondary-darker);--cbp-toggle-outline-width:var(--cbp-space-half-x);--cbp-toggle-outline-style:solid;--cbp-toggle-color-bg-hover:var(--cbp-color-interactive-secondary-dark);--cbp-toggle-color-bg-hover-dark:var(--cbp-color-interactive-secondary-base);--cbp-toggle-circle-color-selected-hover:var(--cbp-color-interactive-selected-dark);--cbp-toggle-circle-color-selected-hover-dark:var(--cbp-color-interactive-selected-light);--cbp-toggle-circle-color-border-selected-hover:var(--cbp-color-white);--cbp-toggle-circle-color-border-selected-hover-dark:var(--cbp-color-interactive-secondary-darker);--cbp-toggle-circle-color-hover:var(--cbp-color-interactive-secondary-darker);--cbp-toggle-circle-color-hover-dark:var(--cbp-color-interactive-secondary-base);--cbp-toggle-circle-color-border-hover:var(--cbp-color-white);--cbp-toggle-circle-color-border-hover-dark:var(--cbp-color-white);--cbp-toggle-color-bg-focus:var(--cbp-color-interactive-focus-dark);--cbp-toggle-color-bg-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-toggle-color-outline-focus:var(--cbp-color-white);--cbp-toggle-color-outline-focus-dark:var(--cbp-color-black);--cbp-toggle-circle-color-selected-focus:var(--cbp-color-white);--cbp-toggle-circle-color-selected-focus-dark:var(--cbp-color-black);--cbp-toggle-circle-color-border-selected-focus:var(--cbp-color-white);--cbp-toggle-circle-color-border-selected-focus-dark:var(--cbp-color-black);--cbp-toggle-circle-color-focus:var(--cbp-color-white);--cbp-toggle-circle-color-focus-dark:var(--cbp-color-black);--cbp-toggle-circle-color-border-focus:var(--cbp-color-white);--cbp-toggle-circle-color-border-focus-dark:var(--cbp-color-black);--cbp-toggle-color-bg-disabled:var(--cbp-color-interactive-disabled-dark);--cbp-toggle-color-bg-disabled-dark:var(--cbp-color-interactive-disabled-light);--cbp-toggle-circle-color-disabled:var(--cbp-color-interactive-disabled-light);--cbp-toggle-circle-color-disabled-dark:var(--cbp-color-interactive-disabled-dark);--cbp-toggle-circle-color-border-disabled:var(--cbp-color-interactive-disabled-light);--cbp-toggle-circle-color-border-disabled-dark:var(--cbp-color-interactive-disabled-dark);--cbp-toggle-text-color:var(--cbp-color-text-darkest);--cbp-toggle-text-color-dark:var(--cbp-color-text-lightest);--cbp-toggle-control-width:3.25rem;--cbp-toggle-control-height:var(--cbp-space-7x);--cbp-toggle-circle-diameter:var(--cbp-space-4x);--cbp-toggle-circle-inset:0.375rem;--cbp-toggle-circle-border-width:var(--cbp-border-size-xl);--cbp-toggle-status-text-width:var(--cbp-space-16x);--cbp-toggle-description-text-width:min-content;--cbp-toggle-gap:var(--cbp-space-4x);--cbp-toggle-margin:0 0 var(--cbp-space-4x) 0;--cbp-toggle-custom-icon:\"\";--cbp-toggle-custom-icon-on:\"\";--cbp-toggle-custom-icon-off:\"\";--cbp-toggle-grid-columns:3fr var(--cbp-toggle-control-width) 1fr}[data-cbp-theme=light] cbp-toggle[context*=dark]:not([context=light-always]):not(#fakeId),[data-cbp-theme=dark] cbp-toggle:not([context=dark-inverts]):not([context=light-always]):not(#fakeId){--cbp-toggle-text-color:var(--cbp-toggle-text-color-dark);--cbp-toggle-color-bg:var(--cbp-toggle-color-bg-dark);--cbp-toggle-color-bg-selected:var(--cbp-toggle-color-bg-selected-dark);--cbp-toggle-circle-color:var(--cbp-toggle-circle-color-dark);--cbp-toggle-circle-color-border:var(--cbp-toggle-circle-color-border-dark);--cbp-toggle-circle-color-selected:var(--cbp-toggle-circle-color-selected-dark);--cbp-toggle-circle-color-border-selected:var(--cbp-toggle-circle-color-border-selected-dark);--cbp-toggle-color-bg-hover:var(--cbp-toggle-color-bg-hover-dark);--cbp-toggle-circle-color-selected-hover:var(--cbp-toggle-circle-color-selected-hover-dark);--cbp-toggle-circle-color-border-selected-hover:var(--cbp-toggle-circle-color-border-selected-hover-dark);--cbp-toggle-circle-color-hover:var(--cbp-toggle-circle-color-hover-dark);--cbp-toggle-circle-color-border-hover:var(--cbp-toggle-circle-color-border-hover-dark);--cbp-toggle-color-bg-focus:var(--cbp-toggle-color-bg-focus-dark);--cbp-toggle-color-outline-focus:var(--cbp-toggle-color-outline-focus-dark);--cbp-toggle-circle-color-selected-focus:var(--cbp-toggle-circle-color-selected-focus-dark);--cbp-toggle-circle-color-border-selected-focus:var(--cbp-toggle-circle-color-border-selected-focus-dark);--cbp-toggle-circle-color-focus:var(--cbp-toggle-circle-color-focus-dark);--cbp-toggle-circle-color-border-focus:var(--cbp-toggle-circle-color-border-focus-dark);--cbp-toggle-color-bg-disabled:var(--cbp-toggle-color-bg-disabled-dark);--cbp-toggle-circle-color-disabled:var(--cbp-toggle-circle-color-disabled-dark);--cbp-toggle-circle-color-border-disabled:var(--cbp-toggle-circle-color-border-disabled-dark)}cbp-toggle{display:flex;align-items:center;margin:var(--cbp-toggle-margin);color:var(--cbp-toggle-text-color)}cbp-toggle label{display:grid;grid-template-columns:var(--cbp-toggle-grid-columns);gap:var(--cbp-toggle-gap);align-items:center;width:100%}cbp-toggle input[type=checkbox]{all:unset;appearance:none;height:var(--cbp-toggle-control-height);min-width:var(--cbp-toggle-control-width);flex-basis:var(--cbp-toggle-control-width);border-radius:var(--cbp-border-radius-pill);background-color:var(--cbp-toggle-color-bg);outline-width:0;outline-style:var(--cbp-toggle-outline-style);outline-color:var(--cbp-toggle-color-outline-focus);outline-offset:calc(-1 * var(--cbp-space-1x));--cbp-toggle-custom-icon:var(--cbp-toggle-custom-icon-off)}cbp-toggle input[type=checkbox]::before,cbp-toggle input[type=checkbox]::after{display:inline-block;margin-block-start:var(--cbp-toggle-circle-inset);height:var(--cbp-toggle-circle-diameter);width:var(--cbp-toggle-circle-diameter);transition:margin 0.2s linear}cbp-toggle input[type=checkbox]::before{content:\"\";background-color:var(--cbp-toggle-circle-color);border-radius:var(--cbp-border-radius-circle);border:var(--cbp-toggle-circle-border-width) solid var(--cbp-toggle-circle-color-border);margin-inline:var(--cbp-toggle-circle-inset) var(--cbp-space-1x)}cbp-toggle input[type=checkbox]::after{content:var(--cbp-toggle-custom-icon);margin-inline:var(--cbp-space-1x) var(--cbp-toggle-circle-border-width)}cbp-toggle input[type=checkbox]:hover{--cbp-toggle-color-bg:var(--cbp-toggle-color-bg-hover);--cbp-toggle-circle-color:var(--cbp-toggle-circle-color-hover);--cbp-toggle-circle-color-border:var(--cbp-toggle-circle-color-border-hover)}cbp-toggle input[type=checkbox]:focus{--cbp-toggle-color-bg:var(--cbp-toggle-color-bg-focus);--cbp-toggle-color:var(--cbp-toggle-color-outline-focus);--cbp-toggle-circle-color:var(--cbp-toggle-circle-color-focus);--cbp-toggle-circle-color-border:var(--cbp-toggle-circle-color-border-focus);outline-width:var(--cbp-toggle-outline-width)}cbp-toggle input[type=checkbox]:checked{--cbp-toggle-custom-icon:var(--cbp-toggle-custom-icon-on);--cbp-toggle-color-bg:var(--cbp-toggle-color-bg-selected);--cbp-toggle-circle-color:var(--cbp-toggle-circle-color-selected);--cbp-toggle-circle-color-border:var(--cbp-toggle-circle-color-border-selected)}cbp-toggle input[type=checkbox]:checked::before{border-radius:var(--cbp-border-radius-circle);background-color:var(--cbp-toggle-circle-color);border:var(--cbp-toggle-circle-border-width) solid var(--cbp-toggle-circle-color-border);margin-inline-start:calc(var(--cbp-toggle-control-width) - var(--cbp-toggle-circle-diameter) - var(--cbp-toggle-circle-inset))}cbp-toggle input[type=checkbox]:checked::after{margin-inline:calc((var(--cbp-toggle-control-width) - var(--cbp-toggle-circle-diameter) + var(--cbp-toggle-circle-inset)) * -1) var(--cbp-space-1x)}cbp-toggle input[type=checkbox]:checked:hover{--cbp-toggle-circle-color:var(--cbp-toggle-circle-color-selected-hover);--cbp-toggle-circle-color-border:var(--cbp-toggle-circle-color-border-selected-hover)}cbp-toggle input[type=checkbox]:checked:focus{--cbp-toggle-circle-color:var(--cbp-toggle-circle-color-selected-focus);--cbp-toggle-circle-color-border:var(--cbp-toggle-circle-color-border-selected-focus)}cbp-toggle span:last-child{flex-basis:var(--cbp-toggle-status-text-width);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}cbp-toggle:has(:disabled),cbp-toggle:has(:disabled):hover{--cbp-toggle-color-bg:var(--cbp-toggle-color-bg-disabled);--cbp-toggle-color-bg-dark:var(--cbp-toggle-color-bg-disabled-dark);--cbp-toggle-circle-color:var(--cbp-toggle-circle-color-disabled);--cbp-toggle-circle-color-dark:var(--cbp-toggle-circle-color-disabled-dark);--cbp-toggle-circle-color-border:var(--cbp-toggle-circle-color-border-disabled);--cbp-toggle-circle-color-border-dark:var(--cbp-toggle-circle-color-border-disabled-dark);--cbp-toggle-color-bg-hover:var(--cbp-toggle-color-bg-disabled);--cbp-toggle-color-bg-hover-dark:var(--cbp-toggle-color-bg-disabled-dark);--cbp-toggle-circle-color-hover:var(--cbp-toggle-circle-color-disabled);--cbp-toggle-circle-color-hover-dark:var(--cbp-toggle-circle-color-disabled-dark);--cbp-toggle-circle-color-border-hover:var(--cbp-toggle-circle-color-border-disabled);--cbp-toggle-circle-color-border-hover-dark:var(--cbp-toggle-circle-color-border-disabled-dark)}";
const CbpToggleStyle0 = cbpToggleCss;
const CbpToggle = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.toggleClick = createEvent(this, "toggleClick", 7);
this.checked = undefined;
this.disabled = undefined;
this.hideStatus = undefined;
this.statusTextOn = 'On';
this.statusTextOff = 'Off';
this.name = undefined;
this.value = undefined;
this.context = undefined;
this.sx = {};
}
toggleEvent(e) {
this.checked = this.formField.checked;
this.toggleClick.emit({
host: this.host,
nativeElement: this.formField,
value: this.formField.value,
checked: this.formField.checked,
nativeEvent: e
});
}
async reset() {
var _a;
this.checked = this.initialChecked;
this.initialChecked ? (_a = this.formField) === null || _a === void 0 ? void 0 : _a.setAttribute('checked', '') : this === null || this === void 0 ? void 0 : this.formField.removeAttribute('checked');
}
watchDisabledHandler(newValue) {
if (this.formField) {
(newValue)
? this.formField.setAttribute('disabled', '')
: this.formField.removeAttribute('disabled');
}
}
watchCheckedHandler(newValue) {
if (this.formField) {
this.formField.checked = newValue;
}
}
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=checkbox]');
if (this.formField) {
this.formField.addEventListener('change', e => this.toggleEvent(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;
this.checked = this.formField.checked;
}
this.initialChecked = this.checked;
}
render() {
return (h(Host, { key: '8481e2da57ae96d8669c1059d2e30574e9893d06' }, h("label", { key: '2b906bc0006ef6a26b2b97fb8f8b95dde79132ba' }, h("slot", { key: '09cf8a44e54fcd60b2cfaa6296b6609dab81320d' }), !this.hideStatus && h("span", { key: 'ed61fd6141430229eaf981f2e2e46ff17191c447' }, this.checked ? this.statusTextOn : this.statusTextOff))));
}
get host() { return getElement(this); }
static get watchers() { return {
"disabled": ["watchDisabledHandler"],
"checked": ["watchCheckedHandler"]
}; }
};
CbpToggle.style = CbpToggleStyle0;
export { CbpToggle as cbp_toggle };
//# sourceMappingURL=cbp-toggle.entry.js.map