@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
JavaScript
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