@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
170 lines (166 loc) • 8 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-D_4hbGjA.js';
import { i as inheritAriaAttributes } from './utils-DQvnWXRl.js';
const modusWcButtonGroupCss = "modus-wc-button-group.modus-wc-button-group{align-items:stretch;display:inline-flex}modus-wc-button-group.modus-wc-button-group>*{border-radius:0}modus-wc-button-group.modus-wc-button-group>* .modus-wc-btn{border-radius:0}modus-wc-button-group.modus-wc-button-group>*:first-child .modus-wc-btn{border-end-start-radius:var(--modus-wc-rounded-btn, 0.5rem);border-start-start-radius:var(--modus-wc-rounded-btn, 0.5rem)}modus-wc-button-group.modus-wc-button-group>*:last-child .modus-wc-btn{border-end-end-radius:var(--modus-wc-rounded-btn, 0.5rem);border-start-end-radius:var(--modus-wc-rounded-btn, 0.5rem)}modus-wc-button-group.modus-wc-button-group>*:not(:last-child) .modus-wc-btn{border-inline-end-width:0}modus-wc-button-group.modus-wc-button-group.modus-wc-join-vertical{align-items:stretch;flex-direction:column}modus-wc-button-group.modus-wc-button-group.modus-wc-join-vertical>* .modus-wc-btn{border-inline-end-width:1px;border-radius:0}modus-wc-button-group.modus-wc-button-group.modus-wc-join-vertical>*:first-child .modus-wc-btn{border-end-end-radius:0;border-end-start-radius:0;border-start-end-radius:var(--modus-wc-rounded-btn, 0.5rem);border-start-start-radius:var(--modus-wc-rounded-btn, 0.5rem)}modus-wc-button-group.modus-wc-button-group.modus-wc-join-vertical>*:last-child .modus-wc-btn{border-end-end-radius:var(--modus-wc-rounded-btn, 0.5rem);border-end-start-radius:var(--modus-wc-rounded-btn, 0.5rem);border-start-end-radius:0;border-start-start-radius:0}modus-wc-button-group.modus-wc-button-group.modus-wc-join-vertical>*:not(:last-child) .modus-wc-btn{border-block-end-width:0}";
const ModusWcButtonGroup = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.buttonGroupClick = createEvent(this, "buttonGroupClick");
this.buttonSelectionChange = createEvent(this, "buttonSelectionChange");
this.inheritedAttributes = {};
this.selectedButtons = [];
/** Style variant to apply to all buttons within the button group */
this.variant = 'outlined';
/** Disables all buttons within the button group */
this.disabled = false;
/** Orientation of the button group: horizontal or vertical */
this.orientation = 'horizontal';
/** Selection type for button group */
this.selectionType = 'default';
}
componentWillLoad() {
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
componentDidLoad() {
this.buttonElements = this.el.querySelectorAll('modus-wc-button');
this.syncButtonStates();
this.initializeSelectedButtons();
}
handlePropChange() {
this.syncButtonStates();
}
handleSelectionTypeChange() {
this.resetAllSelections();
}
handleButtonClick(event) {
const clickedButton = event.target;
if (this.selectionType === 'default') {
this.buttonGroupClick.emit({
button: clickedButton,
isSelected: false,
});
return;
}
switch (this.selectionType) {
case 'single':
void this.toggleSingleSelect(clickedButton);
break;
case 'multiple':
void this.toggleMultiSelect(clickedButton);
break;
}
}
handleSlotChange() {
this.buttonElements = this.el.querySelectorAll('modus-wc-button');
this.syncButtonStates();
this.initializeSelectedButtons();
}
initializeSelectedButtons() {
if (!this.buttonElements || !this.buttonElements.length)
return;
this.selectedButtons = [];
const pressedButtons = [];
Array.from(this.buttonElements).forEach((button) => {
if (button.hasAttribute('pressed')) {
pressedButtons.push(button);
}
});
if (this.selectionType === 'single' && pressedButtons.length > 0) {
const firstSelected = pressedButtons[0];
this.selectedButtons = [firstSelected];
// Remove pressed attribute from other buttons
pressedButtons.slice(1).forEach((button) => {
button.removeAttribute('pressed');
});
}
else if (this.selectionType === 'multiple') {
// For multiple selection, keep all pressed buttons
this.selectedButtons = pressedButtons;
}
}
syncButtonStates() {
if (!this.buttonElements || !this.buttonElements.length)
return;
this.setButtonAttribute('variant', this.variant);
this.setButtonAttribute('color', this.color || null);
this.setButtonAttribute('disabled', this.disabled ? 'true' : null);
}
setButtonAttribute(name, value) {
this.buttonElements.forEach((button) => {
if (value !== null && value !== undefined) {
button.setAttribute(name, value);
}
else {
button.removeAttribute(name);
}
});
}
toggleSingleSelect(clickedButton) {
const isCurrentlySelected = this.selectedButtons.includes(clickedButton);
// In single selection mode, clicking an already selected button does nothing
if (isCurrentlySelected) {
return;
}
// Deactivate all buttons
Array.from(this.buttonElements).forEach((button) => {
button.removeAttribute('pressed');
});
// Activate the clicked button
clickedButton.setAttribute('pressed', '');
this.selectedButtons = [clickedButton];
this.buttonGroupClick.emit({
button: clickedButton,
isSelected: true,
});
this.buttonSelectionChange.emit({
selectedButtons: this.selectedButtons,
});
}
toggleMultiSelect(clickedButton) {
const isCurrentlySelected = this.selectedButtons.includes(clickedButton);
if (isCurrentlySelected) {
// Deactivate and remove from selection
clickedButton.removeAttribute('pressed');
this.selectedButtons = this.selectedButtons.filter((btn) => btn !== clickedButton);
}
else {
// Activate and add to selection
clickedButton.setAttribute('pressed', '');
this.selectedButtons = [...this.selectedButtons, clickedButton];
}
this.buttonGroupClick.emit({
button: clickedButton,
isSelected: !isCurrentlySelected,
});
this.buttonSelectionChange.emit({
selectedButtons: this.selectedButtons,
});
}
resetAllSelections() {
if (!this.buttonElements)
return;
Array.from(this.buttonElements).forEach((button) => {
button.removeAttribute('pressed');
});
this.selectedButtons = [];
}
getClasses() {
const classList = ['modus-wc-button-group'];
// Add vertical class if needed
if (this.orientation === 'vertical') {
classList.push('modus-wc-join-vertical');
}
return classList.join(' ');
}
render() {
return (h(Host, Object.assign({ key: '92b2c7c867d6aec96b888c8f0dd71e135bf386e8' }, this.inheritedAttributes, { role: "group", class: this.getClasses() }), h("slot", { key: '48d1977a140c0cfc32addcc6fe1ffb1dbeb81a21' })));
}
get el() { return getElement(this); }
static get watchers() { return {
"variant": ["handlePropChange"],
"color": ["handlePropChange"],
"disabled": ["handlePropChange"],
"selectionType": ["handleSelectionTypeChange"]
}; }
};
ModusWcButtonGroup.style = modusWcButtonGroupCss;
export { ModusWcButtonGroup as modus_wc_button_group };