/**
 * Copyright IBM Corp. 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import "../../globals/settings.js";
import { forEach } from "../../globals/internal/collection-helpers.js";
import "./defs.js";
import accordion_default from "./accordion.scss.js";
import { carbonElement } from "../../globals/decorators/carbon-element.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
import "./accordion.js";
import iconLoader from "../../globals/internal/icon-loader.js";
import "../skeleton-text/index.js";
import "./accordion-item-skeleton.js";
import { LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import ChevronRight16 from "@carbon/icons/es/chevron--right/16.js";
//#region src/components/accordion/accordion-skeleton.ts
/**
* Copyright IBM Corp. 2019, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* Skeleton of code snippet.
*/
let CDSAccordionSkeleton = class CDSAccordionSkeleton extends LitElement {
	constructor(..._args) {
		super(..._args);
		this.alignment = "END";
		this.count = 4;
		this.isFlush = false;
		this.open = true;
	}
	updated(changedProperties) {
		if (changedProperties.has("alignment")) forEach(this.shadowRoot.querySelectorAll(this.constructor.selectorAccordionItemSkeletons), (elem) => {
			elem.setAttribute("alignment", this.alignment);
		});
		if (changedProperties.has("isFlush") || changedProperties.has("alignment")) forEach(this.shadowRoot.querySelectorAll(this.constructor.selectorAccordionItemSkeletons), (elem) => {
			if (this.isFlush && this.alignment !== "start") elem.setAttribute("isFlush", "");
			else elem.removeAttribute("isFlush");
		});
	}
	render() {
		const classes = classMap({
			[`cds-custom--accordion__item`]: true,
			[`cds-custom--accordion__item--active`]: true,
			[`cds-custom--accordion--${this.alignment}`]: this.alignment,
			[`cds-custom--accordion--flush`]: this.isFlush && this.alignment !== "start"
		});
		const numSkeletonItems = this.open ? this.count - 1 : this.count;
		return html`
      ${this.open ? html`
            <li class="${classes}">
              <span class="${"cds-custom"}--accordion__heading">
                ${iconLoader(ChevronRight16, {
			class: `cds-custom--accordion__arrow`,
			part: "expando-icon"
		})}
                <cds-custom-skeleton-text
                  class="${"cds-custom"}--accordion__title"></cds-custom-skeleton-text>
              </span>
              <div class="${"cds-custom"}--accordion__content">
                <cds-custom-skeleton-text width="90%"></cds-custom-skeleton-text>
                <cds-custom-skeleton-text width="80%"></cds-custom-skeleton-text>
                <cds-custom-skeleton-text width="95%"></cds-custom-skeleton-text>
              </div>
            </li>
          ` : ``}
      ${Array.from({ length: numSkeletonItems }).map((_, i, arr) => html`<cds-custom-accordion-item-skeleton
            key=${i}
            ?data-last-item=${i === arr.length - 1}></cds-custom-accordion-item-skeleton>`)}
    `;
	}
	static get selectorAccordionItemSkeletons() {
		return `cds-custom-accordion-item-skeleton`;
	}
	static {
		this.styles = accordion_default;
	}
};
__decorate([property({ reflect: true })], CDSAccordionSkeleton.prototype, "alignment", void 0);
__decorate([property({
	type: Number,
	attribute: "count"
})], CDSAccordionSkeleton.prototype, "count", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSAccordionSkeleton.prototype, "isFlush", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSAccordionSkeleton.prototype, "open", void 0);
CDSAccordionSkeleton = __decorate([carbonElement(`cds-custom-accordion-skeleton`)], CDSAccordionSkeleton);
var accordion_skeleton_default = CDSAccordionSkeleton;
//#endregion
export { accordion_skeleton_default as default };

//# sourceMappingURL=accordion-skeleton.js.map