@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
172 lines (167 loc) • 7.97 kB
JavaScript
'use strict';
var index = require('./index-BwcuBgCv.js');
var utils = require('./utils-BUzvtuWk.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) {
index.registerInstance(this, hostRef);
this.buttonGroupClick = index.createEvent(this, "buttonGroupClick");
this.buttonSelectionChange = index.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 = utils.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 (index.h(index.Host, Object.assign({ key: '92b2c7c867d6aec96b888c8f0dd71e135bf386e8' }, this.inheritedAttributes, { role: "group", class: this.getClasses() }), index.h("slot", { key: '48d1977a140c0cfc32addcc6fe1ffb1dbeb81a21' })));
}
get el() { return index.getElement(this); }
static get watchers() { return {
"variant": ["handlePropChange"],
"color": ["handlePropChange"],
"disabled": ["handlePropChange"],
"selectionType": ["handleSelectionTypeChange"]
}; }
};
ModusWcButtonGroup.style = modusWcButtonGroupCss;
exports.modus_wc_button_group = ModusWcButtonGroup;