import {
  __decorateClass
} from "../../chunks/chunk.QU3DSPNU.js";
import { localized } from "@lit/localize";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { GdsElement } from "../../gds-element.js";
import { gdsCustomElement, html } from "../../scoping.js";
import { tokens } from "../../tokens.style.js";
import ToggleControlBaseStyles from "./toggle-control-base.styles.js";
let GdsToggleControlBase = class extends GdsElement {
  constructor() {
    super();
    this.label = "";
    this.supportingText = "";
  }
  render() {
    const classes = {
      label: true,
      "has-supporting-text": !!this.supportingText
    };
    return html`
      <div class="container">
        <div class="control-slot">
          <slot></slot>
        </div>
        <div class="${classMap(classes)}">
          <slot name="label"></slot>
          <slot name="supporting-text"></slot>
        </div>
      </div>
    `;
  }
};
GdsToggleControlBase.styles = [tokens, ToggleControlBaseStyles];
__decorateClass([
  property()
], GdsToggleControlBase.prototype, "label", 2);
__decorateClass([
  property({ attribute: "supporting-text" })
], GdsToggleControlBase.prototype, "supportingText", 2);
GdsToggleControlBase = __decorateClass([
  gdsCustomElement("gds-toggle-control-base"),
  localized()
], GdsToggleControlBase);
export {
  GdsToggleControlBase
};
