@universal-material/web
Version:
Material web components
187 lines • 6.26 kB
JavaScript
import { __decorate } from "tslib";
import { html, nothing } from 'lit';
import { customElement, property, query, queryAssignedElements } 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;
/**
* Whether the chip has a leading icon or not
*
* _Note:_ Readonly
*/
this.hasLeadingIcon = false;
/**
* Whether the chip has a selected icon or not
*
* _Note:_ Readonly
*/
this.hasSelectedIcon = false;
/**
* Whether the chip has a trailing icon or not
*
* _Note:_ Readonly
*/
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 }));
}
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>
`;
return html `
<div class="container">
<div class="outline"></div>
<span class="icon leading" part="icon leading">
<slot name="leading-icon" ="${this.#handleLeadingIconSlotChange}"></slot>
</span>
<span class="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}
</div>
`;
}
};
__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([
property({ type: Boolean, attribute: 'has-leading-icon', reflect: true })
], UmChip.prototype, "hasLeadingIcon", void 0);
__decorate([
property({ type: Boolean, attribute: 'has-selected-icon', reflect: true })
], UmChip.prototype, "hasSelectedIcon", void 0);
__decorate([
property({ type: Boolean, attribute: 'has-trailing-icon', reflect: true })
], 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