@universal-material/web
Version:
Material web components
187 lines • 6.3 kB
JavaScript
import { __decorate } from "tslib";
import { html, nothing } from 'lit';
import { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js';
import { UmButtonWrapper } from '../shared/button-wrapper.js';
import { styles } from './chip.styles.js';
import '../ripple/ripple.js';
import '../elevation/elevation.js';
let UmChip = class UmChip extends UmButtonWrapper {
constructor() {
super(...arguments);
this.#clickable = false;
this.#toggle = false;
/**
* Whether the chip is selected or not
*/
this.selected = false;
/**
* Adds elevation to the chip
*/
this.elevated = false;
/**
* Add the remove icon
*/
this.removable = false;
/**
* Hide the selected icon
*/
this.hideSelectedIcon = false;
this._hasLeadingIcon = false;
this._hasSelectedIcon = false;
this._hasTrailingIcon = false;
}
static { this.styles = [UmButtonWrapper.styles, styles]; }
#clickable;
#toggle;
get clickable() {
return this.#clickable;
}
set clickable(value) {
this.#clickable = value;
this.renderRipple = this.#clickable || this.#toggle;
}
/**
* When true, the chip will toggle between selected and unselected
* states
*/
get toggle() {
return this.#toggle;
}
set toggle(value) {
this.#toggle = value;
this.renderRipple = this.#clickable || this.#toggle;
}
connectedCallback() {
super.connectedCallback();
this.renderRipple = this.#clickable || this.#toggle;
}
#handleRemoveClick(e) {
e.stopPropagation();
if (!e.pointerType) {
this.removeRipple.createRipple();
}
const removeEvent = new Event('remove', { cancelable: true });
this.dispatchEvent(removeEvent);
if (!removeEvent.defaultPrevented) {
this.remove();
}
}
#handleTrailingIconSlotChange() {
this._hasTrailingIcon = this._assignedTrailingIcons.length > 0;
}
#handleLeadingIconSlotChange() {
this._hasLeadingIcon = this._assignedLeadingIcons.length > 0;
}
#handleSelectedIconSlotChange() {
this._hasSelectedIcon = this._assignedSelectedIcons.length > 0;
}
_handleClick(event) {
super._handleClick(event);
if (!this.toggle) {
return;
}
this.selected = !this.selected;
this.dispatchEvent(new Event('change', { bubbles: true }));
}
_getContainerClasses() {
return {
...super._getContainerClasses(),
clickable: this.clickable,
toggle: this.toggle,
selected: this.selected,
removable: this.removable,
elevated: this.elevated && !this.disabled,
'trailing-icon': this._hasTrailingIcon,
'leading-icon': this._hasLeadingIcon,
'selected-icon': this._hasSelectedIcon,
'hide-selected-icon': this.hideSelectedIcon,
};
}
_renderContent() {
const remove = html `
<button class="icon remove-button focus-ring" ?disabled=${this.disabled} =${this.#handleRemoveClick}>
<u-ripple id="remove-ripple" ?disabled=${this.disabled}></u-ripple>
<slot name="remove-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor">
<path
d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
</svg>
</slot>
</button>
`;
const outline = !this.disabled && !this.elevated && !this.selected
? html `<div class="outline"></div>`
: nothing;
return html `
${outline}
<span class="icon leading" part="icon leading">
<slot name="leading-icon" ="${this.#handleLeadingIconSlotChange}"></slot>
</span>
<span class="icon icon-selected" part="icon selected">
<slot name="icon-selected" ="${this.#handleSelectedIconSlotChange}">
<svg
xmlns="http://www.w3.org/2000/svg"
height="1em"
viewBox="0 -960 960 960"
width="1em"
fill="currentColor">
<path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
</svg>
</slot>
</span>
<div class="label">
<slot></slot>
</div>
<slot
class="icon trailing"
part="icon trailing"
name="trailing-icon"
="${this.#handleTrailingIconSlotChange}"></slot>
${this.removable ? remove : nothing}
`;
}
};
__decorate([
property({ type: Boolean, reflect: true })
], UmChip.prototype, "selected", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], UmChip.prototype, "clickable", null);
__decorate([
property({ type: Boolean, reflect: true })
], UmChip.prototype, "elevated", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], UmChip.prototype, "toggle", null);
__decorate([
property({ type: Boolean, reflect: true })
], UmChip.prototype, "removable", void 0);
__decorate([
property({ type: Boolean, attribute: 'hide-selected-icon', reflect: true })
], UmChip.prototype, "hideSelectedIcon", void 0);
__decorate([
state()
], UmChip.prototype, "_hasLeadingIcon", void 0);
__decorate([
state()
], UmChip.prototype, "_hasSelectedIcon", void 0);
__decorate([
state()
], UmChip.prototype, "_hasTrailingIcon", void 0);
__decorate([
queryAssignedElements({ slot: 'leading-icon', flatten: true })
], UmChip.prototype, "_assignedLeadingIcons", void 0);
__decorate([
queryAssignedElements({ slot: 'icon-selected', flatten: true })
], UmChip.prototype, "_assignedSelectedIcons", void 0);
__decorate([
queryAssignedElements({ slot: 'trailing-icon', flatten: true })
], UmChip.prototype, "_assignedTrailingIcons", void 0);
__decorate([
query('#remove-ripple')
], UmChip.prototype, "removeRipple", void 0);
UmChip = __decorate([
customElement('u-chip')
], UmChip);
export { UmChip };
//# sourceMappingURL=chip.js.map