@universal-material/web
Version:
Material web components
85 lines • 2.75 kB
JavaScript
import { __decorate } from "tslib";
import { property, state } from 'lit/decorators.js';
import { UmButtonBase } from './button-base.js';
import { styles } from './toggle-button.styles.js';
export class UmToggleButton extends UmButtonBase {
constructor() {
super(...arguments);
/**
* When true, the button will toggle between selected and unselected
* states
*/
this.toggle = false;
/**
* When true, the button will toggle between round and square shapes
*/
this.toggleShape = false;
/**
* Sets the selected state
*/
this.selected = false;
/**
* Sets the shape of the button
*/
this.shape = 'round';
/**
* Sets the size of the button
*/
this.size = 'small';
/**
* The `aria-label` of the button when the button is toggleable and selected.
*/
this.ariaLabelSelected = '';
this._hasSelectionIcon = false;
}
static { this.styles = [UmButtonBase.styles, styles]; }
_getContainerClasses() {
return {
...super._getContainerClasses(),
[this.shape]: true,
[this.size]: true,
selected: this.selected,
toggle: this.toggle,
'toggle-shape': this.toggleShape,
'selection-icon': this._hasSelectionIcon,
};
}
_handleClick(event) {
super._handleClick(event);
if (!this.toggle) {
return;
}
this.selected = !this.selected;
this.dispatchEvent(new Event('change', { bubbles: true }));
}
getAriaLabel() {
return this.selected
? this.ariaLabelSelected || super.getAriaLabel()
: super.getAriaLabel();
}
_handleSelectedIconSlotChange(e) {
this._hasSelectionIcon = e.target.assignedElements({ flatten: true }).length > 0;
}
}
__decorate([
property({ type: Boolean, reflect: true })
], UmToggleButton.prototype, "toggle", void 0);
__decorate([
property({ attribute: 'toggle-shape', type: Boolean, reflect: true })
], UmToggleButton.prototype, "toggleShape", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], UmToggleButton.prototype, "selected", void 0);
__decorate([
property({ reflect: true })
], UmToggleButton.prototype, "shape", void 0);
__decorate([
property({ reflect: true })
], UmToggleButton.prototype, "size", void 0);
__decorate([
property({ attribute: 'aria-label-selected' })
], UmToggleButton.prototype, "ariaLabelSelected", void 0);
__decorate([
state()
], UmToggleButton.prototype, "_hasSelectionIcon", void 0);
//# sourceMappingURL=toggle-button.js.map