UNPKG

@synergy-design-system/components

Version:

This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define

88 lines (84 loc) 2.21 kB
import { tag_custom_styles_default } from "./chunk.2NIFD3YE.js"; import { tag_styles_default } from "./chunk.6EPU7YUS.js"; import { SynIconButton } from "./chunk.RJPPRJP3.js"; import { LocalizeController } from "./chunk.OAQRCZOO.js"; import { enableDefaultSettings } from "./chunk.HYFCK7MM.js"; import { component_styles_default } from "./chunk.NLYVOJGK.js"; import { SynergyElement } from "./chunk.3THJTCRO.js"; import { __decorateClass } from "./chunk.Z4XV3SMG.js"; // src/components/tag/tag.component.ts import { classMap } from "lit/directives/class-map.js"; import { html } from "lit"; import { property } from "lit/decorators.js"; var SynTag = class extends SynergyElement { constructor() { super(...arguments); this.localize = new LocalizeController(this); this.size = "medium"; this.removable = false; } handleRemoveClick() { this.emit("syn-remove"); } render() { return html` <span part="base" class=${classMap({ tag: true, // Sizes "tag--small": this.size === "small", "tag--medium": this.size === "medium", "tag--large": this.size === "large", // Modifiers "tag--removable": this.removable })} > <slot part="content" class="tag__content"></slot> ${this.removable ? html` <syn-icon-button part="remove-button" exportparts="base:remove-button__base" name="x-lg" library="system" label=${this.localize.term("remove")} class="tag__remove" @click=${this.handleRemoveClick} tabindex="-1" ></syn-icon-button> ` : ""} </span> `; } }; SynTag.styles = [component_styles_default, tag_styles_default, tag_custom_styles_default]; SynTag.dependencies = { "syn-icon-button": SynIconButton }; __decorateClass([ property({ reflect: true }) ], SynTag.prototype, "size", 2); __decorateClass([ property({ type: Boolean }) ], SynTag.prototype, "removable", 2); SynTag = __decorateClass([ enableDefaultSettings("SynTag") ], SynTag); export { SynTag }; //# sourceMappingURL=chunk.TEJQXPAY.js.map