@cbpds/web-components
Version:
Web components for the CBP Design System.
60 lines (56 loc) • 8.03 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 } from './utils-475ba472.js';
const cbpDropdownItemCss = ":root{--cbp-dropdown-item-color:var(--cbp-dropdown-menu-color);--cbp-dropdown-item-color-bg:transparent;--cbp-dropdown-item-color-border:var(--cbp-color-gray-cool-50);--cbp-dropdown-item-color-dark:var(--cbp-dropdown-menu-color-dark);--cbp-dropdown-item-color-bg-dark:transparent;--cbp-dropdown-item-color-border-dark:var(--cbp-color-gray-cool-50);--cbp-dropdown-item-border-size:var(--cbp-border-size-sm);--cbp-dropdown-item-padding-block:var(--cbp-space-2x);--cbp-dropdown-item-padding-inline-start:var(--cbp-space-1x);--cbp-dropdown-item-font-style:normal;--cbp-dropdown-item-font-style-selected:italic}[data-cbp-theme=light] cbp-dropdown[context*=dark] cbp-dropdown-item,[data-cbp-theme=dark] cbp-dropdown:not([context=dark-inverts]):not([context=light-always]) cbp-dropdown-item{--cbp-dropdown-item-color:var(--cbp-dropdown-item-color-dark);--cbp-dropdown-item-color-bg:var(--cbp-dropdown-item-color-bg-dark);--cbp-dropdown-item-color-border:var(--cbp-dropdown-item-color-border-dark);--cbp-checkbox-color-label:var(--cbp-checkbox-color-label-dark)}cbp-dropdown-item{display:block;color:var(--cbp-dropdown-item-color);background:var(--cbp-dropdown-item-color-bg);font-style:var(--cbp-dropdown-item-font-style);line-height:var(--cbp-line-height-xs);outline:0;cursor:default;}cbp-dropdown-item .cbp-dropdown-item-content{margin-inline-start:var(--cbp-space-3x);padding-inline-start:var(--cbp-dropdown-item-padding-inline-start);padding-block:var(--cbp-dropdown-item-padding-block);border-block-end:var(--cbp-dropdown-item-border-size) solid var(--cbp-dropdown-item-color-border)}cbp-dropdown-item:not([hidden]):last-of-type(){border-block-end-width:0}cbp-dropdown-item[selected]{--cbp-dropdown-item-color:var(--cbp-color-text-dark);--cbp-dropdown-item-color-dark:var(--cbp-color-text-light);--cbp-dropdown-item-font-style:var(--cbp-dropdown-item-font-style-selected)}cbp-dropdown-item:hover{--cbp-dropdown-item-color:var(--cbp-color-text-lightest);--cbp-dropdown-item-color-bg:var(--cbp-color-interactive-secondary-darker);--cbp-dropdown-item-color-border:transparent;--cbp-dropdown-item-color-dark:var(--cbp-color-text-darkest);--cbp-dropdown-item-color-bg-dark:var(--cbp-color-interactive-secondary-light);--cbp-dropdown-item-color-border-dark:transparent}cbp-dropdown-item[current],cbp-dropdown-item:focus{--cbp-dropdown-item-color:var(--cbp-color-text-lightest);--cbp-dropdown-item-color-bg:var(--cbp-color-interactive-focus-dark);--cbp-dropdown-item-color-border:transparent;--cbp-dropdown-item-color-dark:var(--cbp-color-text-darkest);--cbp-dropdown-item-color-bg-dark:var(--cbp-color-interactive-focus-light);--cbp-dropdown-item-color-border-dark:transparent}cbp-dropdown-item[disabled]{font-style:italic}cbp-dropdown-item cbp-checkbox{--cbp-checkbox-min-height:var(--cbp-space-7x);--cbp-checkbox-margin:0;--cbp-checkbox-color-halo-hover:transparent;--cbp-checkbox-color-halo-focus:transparent;--cbp-checkbox-color-halo-checked-hover:transparent;--cbp-checkbox-color-halo-checked-focus:transparent;--cbp-checkbox-color-halo-hover-dark:transparent;--cbp-checkbox-color-halo-focus-dark:transparent;--cbp-checkbox-color-halo-checked-hover-dark:transparent;--cbp-checkbox-color-halo-checked-focus-dark:transparent;--cbp-checkbox-font-weight-label:var(--cbp-font-weight-regular)}cbp-dropdown-item[current] cbp-checkbox,cbp-dropdown-item:focus cbp-checkbox,cbp-dropdown-item:hover cbp-checkbox{--cbp-checkbox-color-label:var(--cbp-color-text-lightest);--cbp-checkbox-color-label-dark:var(--cbp-color-text-darkest)}cbp-dropdown-item[current] cbp-checkbox,cbp-dropdown-item:focus cbp-checkbox{--cbp-checkbox-color:var(--cbp-color-text-lightest);--cbp-checkbox-color-bg:var(--cbp-color-gray-cool-70);--cbp-checkbox-color-border:var(--cbp-checkbox-color-border-focus-dark);--cbp-checkbox-color-border-hover:var(--cbp-checkbox-color-border-focus-dark);--cbp-checkbox-color-bg-checked:var(--cbp-checkbox-color-bg-checked-focus);--cbp-checkbox-color-border-checked:var(--cbp-checkbox-color-border-checked-focus);--cbp-checkbox-color-border-checked-hover:var(--cbp-checkbox-color-border-checked-focus);--cbp-checkbox-color-dark:var(--cbp-color-text-darkest);--cbp-checkbox-color-bg-dark:var(--cbp-color-white);--cbp-checkbox-color-border-dark:var(--cbp-color-interactive-secondary-dark);--cbp-checkbox-color-border-hover-dark:var(--cbp-color-interactive-secondary-dark);--cbp-checkbox-color-bg-checked-dark:var(--cbp-checkbox-color-bg-checked-focus-dark);--cbp-checkbox-color-border-checked-dark:var(--cbp-checkbox-color-border-checked-focus-dark);--cbp-checkbox-color-border-checked-hover-dark:var(--cbp-checkbox-color-border-checked-focus-dark)}cbp-dropdown-item:hover:not(:focus) cbp-checkbox{--cbp-checkbox-color:var(--cbp-color-text-darkest);--cbp-checkbox-color-bg:var(--cbp-color-gray-cool-70);--cbp-checkbox-color-border:var(--cbp-color-interactive-secondary-lighter);--cbp-checkbox-color-border-hover:var(--cbp-color-interactive-secondary-lighter);--cbp-checkbox-color-bg-checked:var(--cbp-color-interactive-selected-light);--cbp-checkbox-color-border-checked:var(--cbp-color-interactive-selected-light);--cbp-checkbox-color-border-checked-hover:var(--cbp-color-interactive-selected-light);--cbp-checkbox-color-dark:var(--cbp-color-text-lightest);--cbp-checkbox-color-bg-dark:var(--cbp-color-white);--cbp-checkbox-color-border-dark:var(--cbp-color-interactive-secondary-dark);--cbp-checkbox-color-border-hover-dark:var(--cbp-color-interactive-secondary-darker);--cbp-checkbox-color-bg-checked-dark:var(--cbp-color-interactive-selected-dark);--cbp-checkbox-color-border-checked-dark:var(--cbp-color-interactive-selected-dark);--cbp-checkbox-color-border-checked-hover-dark:var(--cbp-color-interactive-selected-dark)}";
const CbpDropdownItemStyle0 = cbpDropdownItemCss;
const CbpDropdownItem = class {
handleClick(e) {
const { target } = e;
if (!this.disabled) {
if (target.tagName != 'LABEL') {
const label = this.host.querySelector('.cbp-dropdown-item-content').innerText;
this.dropdownItemClick.emit({
host: this.host,
target: target,
label: label,
value: !!this.value ? this.value : label,
nativeEvent: e,
});
}
}
}
watchSelected(newValue) {
if (this.checkbox)
this.checkbox.checked = newValue;
}
constructor(hostRef) {
registerInstance(this, hostRef);
this.dropdownItemClick = createEvent(this, "dropdownItemClick", 7);
this.value = undefined;
this.disabled = undefined;
this.current = undefined;
this.itemId = createNamespaceKey('cbp-dropdown-item');
this.selected = undefined;
if (!this.host.hasAttribute('slot'))
this.host.slot = "cbp-dropdown-items";
}
componentWillLoad() {
this.checkbox = this.host.querySelector('input[type=checkbox]');
}
componentDidLoad() {
if (this.selected && this.checkbox)
this.checkbox.checked = true;
}
render() {
return (h(Host, { key: 'da359461438a85ea9b3f19fd484298885441a93d', role: "option", id: this.itemId, onClick: e => this.handleClick(e), "aria-selected": this.selected ? 'true' : 'false' }, h("div", { key: 'e6ecc12b478f136686a3c1376ae9ebf1175268cb', class: "cbp-dropdown-item-content" }, h("slot", { key: '49a9ccfae4068a92c81f70cdcebff0a6f902c36e' }))));
}
get host() { return getElement(this); }
static get watchers() { return {
"selected": ["watchSelected"]
}; }
};
CbpDropdownItem.style = CbpDropdownItemStyle0;
export { CbpDropdownItem as cbp_dropdown_item };
//# sourceMappingURL=cbp-dropdown-item.entry.js.map