igniteui-webcomponents
Version:
Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
184 lines • 6.86 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var IgcButtonGroupComponent_1;
import { LitElement, html } from 'lit';
import { property, queryAssignedElements } from 'lit/decorators.js';
import { themes } from '../../theming/theming-decorator.js';
import { createMutationController, } from '../common/controllers/mutation-observer.js';
import { watch } from '../common/decorators/watch.js';
import { registerComponent } from '../common/definitions/register.js';
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
import { findElementFromEventPath } from '../common/util.js';
import { styles } from './themes/group.base.css.js';
import { all } from './themes/group.js';
import { styles as shared } from './themes/shared/group/group.common.css.js';
import IgcToggleButtonComponent from './toggle-button.js';
let IgcButtonGroupComponent = IgcButtonGroupComponent_1 = class IgcButtonGroupComponent extends EventEmitterMixin(LitElement) {
static register() {
registerComponent(IgcButtonGroupComponent_1, IgcToggleButtonComponent);
}
get isMultiple() {
return this.selection === 'multiple';
}
_observerCallback({ changes: { added, attributes }, }) {
if (this.isMultiple || this._selectedButtons.length <= 1) {
return;
}
const buttons = this.toggleButtons;
const idx = buttons.indexOf(added.length ? added.at(-1) : attributes.at(-1));
for (const [i, button] of buttons.entries()) {
if (button.selected && i !== idx) {
button.selected = false;
}
}
}
get _selectedButtons() {
return this.toggleButtons.filter((b) => b.selected);
}
get selectedItems() {
return this._selectedButtons.map((b) => b.value).filter((v) => v);
}
set selectedItems(values) {
this._selectedItems = new Set(Array.isArray(values) ? values : []);
this.setSelection(this._selectedItems);
}
updateDisabledState() {
this.toggleButtons.forEach((b) => {
b.disabled = this.disabled;
});
}
updateSelectionState() {
if (this._selectedButtons.length) {
this.toggleButtons.forEach((b) => {
b.selected = false;
});
}
}
constructor() {
super();
this._selectedItems = new Set();
this.disabled = false;
this.alignment = 'horizontal';
this.selection = 'single';
createMutationController(this, {
callback: this._observerCallback,
filter: [IgcToggleButtonComponent.tagName],
config: {
attributeFilter: ['selected'],
childList: true,
subtree: true,
},
});
}
firstUpdated() {
if (this.disabled) {
this.updateDisabledState();
}
const buttons = this._selectedButtons;
if (buttons.length) {
if (!this.isMultiple) {
const index = buttons.indexOf(buttons.at(-1));
for (let i = 0; i < index; i++) {
buttons[i].selected = false;
}
}
}
else {
this.setSelection(this._selectedItems);
}
}
handleClick(event) {
const button = findElementFromEventPath(IgcToggleButtonComponent.tagName, event);
if (button) {
this.isMultiple
? this.handleMultipleSelection(button)
: this.handleSingleSelection(button);
}
}
handleSingleSelection(button) {
const singleRequired = this.selection === 'single-required';
const selectedButton = this._selectedButtons.at(0);
const isSame = selectedButton && selectedButton.value === button.value;
if (selectedButton) {
if (singleRequired && isSame)
return;
this.emitDeselectEvent(selectedButton);
}
if (isSame)
return;
this.emitSelectEvent(button);
}
handleMultipleSelection(button) {
button.selected
? this.emitDeselectEvent(button)
: this.emitSelectEvent(button);
}
emitSelectEvent(button) {
button.selected = true;
this.emitEvent('igcSelect', { detail: button.value });
}
emitDeselectEvent(button) {
button.selected = false;
this.emitEvent('igcDeselect', { detail: button.value });
}
setSelection(values) {
if (!values.size) {
this.toggleButtons.forEach((b) => {
b.selected = false;
});
return;
}
for (const button of this.toggleButtons) {
if (values.has(button.value)) {
button.selected = true;
if (!this.isMultiple) {
break;
}
}
}
}
render() {
return html `
<div
part="group"
role="group"
aria-disabled=${this.disabled}
=${this.handleClick}
>
<slot></slot>
</div>
`;
}
};
IgcButtonGroupComponent.tagName = 'igc-button-group';
IgcButtonGroupComponent.styles = [styles, shared];
__decorate([
queryAssignedElements({ selector: IgcToggleButtonComponent.tagName })
], IgcButtonGroupComponent.prototype, "toggleButtons", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], IgcButtonGroupComponent.prototype, "disabled", void 0);
__decorate([
property({ reflect: true })
], IgcButtonGroupComponent.prototype, "alignment", void 0);
__decorate([
property({ reflect: false })
], IgcButtonGroupComponent.prototype, "selection", void 0);
__decorate([
property({ attribute: 'selected-items', type: Array, reflect: false })
], IgcButtonGroupComponent.prototype, "selectedItems", null);
__decorate([
watch('disabled', { waitUntilFirstUpdate: true })
], IgcButtonGroupComponent.prototype, "updateDisabledState", null);
__decorate([
watch('selection', { waitUntilFirstUpdate: true })
], IgcButtonGroupComponent.prototype, "updateSelectionState", null);
IgcButtonGroupComponent = IgcButtonGroupComponent_1 = __decorate([
themes(all)
], IgcButtonGroupComponent);
export default IgcButtonGroupComponent;
//# sourceMappingURL=button-group.js.map