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

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

import {
  optgroup_styles_default
} from "./chunk.MJ7R4QQT.js";
import {
  SynDivider
} from "./chunk.P2IQYZXI.js";
import {
  HasSlotController
} from "./chunk.WVVQK5TE.js";
import {
  SynergyElement
} from "./chunk.3AZFEB6D.js";
import {
  __decorateClass
} from "./chunk.Z4XV3SMG.js";

// src/components/optgroup/optgroup.component.ts
import { classMap } from "lit/directives/class-map.js";
import { html } from "lit/static-html.js";
import { property, queryAssignedElements } from "lit/decorators.js";
var handleInitialDisabledForOption = (option, isDisabled) => {
  if (option.disabled) {
    option.dataset.originallyDisabled = "true";
  } else {
    delete option.dataset.originallyDisabled;
  }
  if (isDisabled) {
    option.disabled = true;
  }
};
var SynOptgroup = class extends SynergyElement {
  constructor() {
    super(...arguments);
    this.hasSlotController = new HasSlotController(this, "[default]", "prefix", "suffix", "label");
    this.disabled = false;
    this.label = "";
  }
  enableObserver() {
    this.mutationObserver.observe(this, {
      attributeFilter: ["disabled"],
      childList: true,
      subtree: true
    });
  }
  connectedCallback() {
    super.connectedCallback();
    this.mutationObserver = new MutationObserver((entries) => {
      const optgroupChanges = entries.filter((entry) => entry.target === this);
      const optionChanges = entries.filter((entry) => entry.target.matches("syn-option"));
      const stopObserver = optgroupChanges.length > 0 || optionChanges.length > 0;
      if (stopObserver) {
        this.mutationObserver.disconnect();
      }
      if (optionChanges.length > 0) {
        optionChanges.forEach((optionMutation) => {
          handleInitialDisabledForOption(optionMutation.target, this.disabled);
        });
      }
      if (optgroupChanges.length > 0) {
        optgroupChanges.forEach((optgroupMutation) => {
          if (optgroupMutation.type === "attributes") {
            this.assignedOptions.forEach((option) => {
              var _a;
              option.disabled = this.disabled ? true : !!((_a = option.dataset) == null ? void 0 : _a.originallyDisabled);
            });
          }
          if (optgroupMutation.type === "childList") {
            optgroupMutation.addedNodes.forEach((node) => {
              if (node instanceof HTMLElement && node.matches("syn-option")) {
                handleInitialDisabledForOption(node, this.disabled);
              }
            });
          }
        });
      }
      if (stopObserver) {
        this.updateComplete.then(() => {
          this.enableObserver();
        });
      }
    });
    this.enableObserver();
  }
  render() {
    const { disabled } = this;
    const hasLabelSlot = this.hasSlotController.test("label");
    const hasLabel = this.label ? true : !!hasLabelSlot;
    return html`
      <div
        class=${classMap({
      optgroup: true,
      "optgroup--has-label": hasLabel,
      "optgroup--has-prefix": this.hasSlotController.test("prefix"),
      "optgroup--has-suffix": this.hasSlotController.test("suffix"),
      "optgroup--is-disabled": this.disabled
    })}
        role="${disabled ? "presentation" : "group"}"
        part="base"
      >
        <syn-divider class="optgroup__divider" part="divider"></syn-divider>
        <div class="optgroup__label-container" part="label-container">
          <slot name="prefix" part="prefix" class="optgroup__prefix"></slot>
          <slot name="label" part="label" class="optgroup__label">
            <span class="optgroup__label-content">
              ${this.label}
            </span>
          </slot>
          <slot name="suffix" part="suffix" class="optgroup__suffix"></slot>
        </div>
        <div class="optgroup__options" role="group" part="options">
          <slot></slot>
        </div>
      </div>
    `;
  }
};
SynOptgroup.styles = optgroup_styles_default;
SynOptgroup.dependencies = {
  "syn-divider": SynDivider
};
__decorateClass([
  queryAssignedElements({ selector: "syn-option" })
], SynOptgroup.prototype, "assignedOptions", 2);
__decorateClass([
  property({ reflect: true, type: Boolean })
], SynOptgroup.prototype, "disabled", 2);
__decorateClass([
  property()
], SynOptgroup.prototype, "label", 2);

export {
  SynOptgroup
};
//# sourceMappingURL=chunk.EHP7QJLA.js.map