@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
198 lines (193 loc) • 9 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-X1tirp06.js';
import { i as inheritAriaAttributes } from './p-VPqXjOQn.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$1 = /*@__PURE__*/ proxyCustomElement(class ModusWcButtonGroup extends H {
constructor() {
super();
this.__registerHost();
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 this; }
static get watchers() { return {
"variant": ["handlePropChange"],
"color": ["handlePropChange"],
"disabled": ["handlePropChange"],
"selectionType": ["handleSelectionTypeChange"]
}; }
static get style() { return modusWcButtonGroupCss; }
}, [4, "modus-wc-button-group", {
"variant": [1],
"color": [1],
"disabled": [4],
"orientation": [1],
"selectionType": [1, "selection-type"]
}, [[0, "buttonClick", "handleButtonClick"], [0, "slotchange", "handleSlotChange"]], {
"variant": ["handlePropChange"],
"color": ["handlePropChange"],
"disabled": ["handlePropChange"],
"selectionType": ["handleSelectionTypeChange"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["modus-wc-button-group"];
components.forEach(tagName => { switch (tagName) {
case "modus-wc-button-group":
if (!customElements.get(tagName)) {
customElements.define(tagName, ModusWcButtonGroup$1);
}
break;
} });
}
const ModusWcButtonGroup = ModusWcButtonGroup$1;
const defineCustomElement = defineCustomElement$1;
export { ModusWcButtonGroup, defineCustomElement };