@synergy-design-system/components/dist/chunks/chunk.IX5SETIP.js

import {
  tag_group_styles_default
} from "./chunk.TWTN3XDM.js";
import {
  HasSlotController
} from "./chunk.CHFWLQN5.js";
import {
  enableDefaultSettings
} from "./chunk.WYMKPLYK.js";
import {
  watch
} from "./chunk.UR2E7Y2Q.js";
import {
  component_styles_default
} from "./chunk.2NT3B5WJ.js";
import {
  SynergyElement
} from "./chunk.L2IYPRPF.js";
import {
  __decorateClass
} from "./chunk.VK2FVWOF.js";

// src/components/tag-group/tag-group.component.ts
import { html } from "lit";
import { property, queryAssignedElements } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
var SynTagGroup = class extends SynergyElement {
  constructor() {
    super(...arguments);
    this.hasSlotController = new HasSlotController(this, "label");
    this.label = "";
    this.labelPosition = "top";
    this.size = "medium";
  }
  adjustTagSize() {
    this.tagsInDefaultSlot.forEach((tag) => {
      tag.setAttribute("size", this.size);
    });
  }
  handleSizeChange() {
    this.adjustTagSize();
  }
  handleSlotChange() {
    this.adjustTagSize();
  }
  render() {
    const hasLabelSlot = this.hasSlotController.test("label");
    const hasLabel = this.label ? true : !!hasLabelSlot;
    return html`
      <div 
        part="base"
        class=${classMap({
      "tag-group": true,
      "tag-group--large": this.size === "large",
      "tag-group--medium": this.size === "medium",
      "tag-group--small": this.size === "small",
      "tag-group--start": this.labelPosition === "start",
      "tag-group--top": this.labelPosition === "top"
    })}
      >

        <span
            part="tag-label"
            class="tag-group__label"
            aria-hidden=${hasLabel ? "false" : "true"}
          >
            <slot name="label">${this.label}</slot>
        </span>

        <slot @slotchange=${this.handleSlotChange}></slot>
      </div>
    `;
  }
};
SynTagGroup.styles = [
  component_styles_default,
  tag_group_styles_default
];
__decorateClass([
  queryAssignedElements({ selector: "syn-tag" })
], SynTagGroup.prototype, "tagsInDefaultSlot", 2);
__decorateClass([
  property()
], SynTagGroup.prototype, "label", 2);
__decorateClass([
  property({ attribute: "label-position", reflect: true })
], SynTagGroup.prototype, "labelPosition", 2);
__decorateClass([
  property({ reflect: true })
], SynTagGroup.prototype, "size", 2);
__decorateClass([
  watch("size", { waitUntilFirstUpdate: true })
], SynTagGroup.prototype, "handleSizeChange", 1);
SynTagGroup = __decorateClass([
  enableDefaultSettings("SynTagGroup")
], SynTagGroup);

export {
  SynTagGroup
};
//# sourceMappingURL=chunk.IX5SETIP.js.map