/**
 * 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 { carbonElement } from "../../globals/decorators/carbon-element.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
import slider_default from "./slider.scss.js";
import { LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
//#region src/components/slider/slider-skeleton.ts
/**
* Copyright IBM Corp. 2019, 2023
*
* 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 slider.
*/
let CDSSliderSkeleton = class CDSSliderSkeleton extends LitElement {
	constructor(..._args) {
		super(..._args);
		this.twoHandles = false;
	}
	render() {
		const { twoHandles } = this;
		const containerClasses = classMap({
			[`cds-custom--slider-container`]: true,
			[`cds-custom--skeleton`]: true,
			[`cds-custom--slider-container--two-handles`]: twoHandles
		});
		const lowerThumbClasses = classMap({
			[`cds-custom--slider__thumb`]: true,
			[`cds-custom--slider__thumb--lower`]: twoHandles
		});
		const upperThumbClasses = classMap({
			[`cds-custom--slider__thumb`]: true,
			[`cds-custom--slider__thumb--upper`]: twoHandles
		});
		const lowerThumbWrapperClasses = classMap({
			[`cds-custom--slider__thumb-wrapper`]: true,
			[`cds-custom--slider__thumb-wrapper--lower`]: twoHandles
		});
		const upperThumbWrapperClasses = classMap({
			[`cds-custom--slider__thumb-wrapper`]: true,
			[`cds-custom--slider__thumb-wrapper--upper`]: twoHandles
		});
		return html`
      <span class="${"cds-custom"}--label ${"cds-custom"}--skeleton"></span>
      <div class="${containerClasses}">
        <span class="${"cds-custom"}--slider__range-label"></span>
        <div class="${"cds-custom"}--slider">
          <div class="${"cds-custom"}--slider__track"></div>
          <div class="${"cds-custom"}--slider__filled-track"></div>
          ${twoHandles ? html`
                <div class="${lowerThumbWrapperClasses}">
                  <div class="${lowerThumbClasses}">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 16 24"
                      class="${"cds-custom"}--slider__thumb-icon ${"cds-custom"}--slider__thumb-icon--lower">
                      <path
                        d="M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z"></path>
                      <path fill="none" d="M-4 0h24v24H-4z"></path>
                    </svg>
                  </div>
                </div>
              ` : html` <div class="${lowerThumbClasses}"></div> `}
          ${twoHandles ? html` <div class="${upperThumbWrapperClasses}">
                <div class="${upperThumbClasses}">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 16 24"
                    class="${"cds-custom"}--slider__thumb-icon ${"cds-custom"}--slider__thumb-icon--upper">
                    <path
                      d="M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z"></path>
                    <path fill="none" d="M-4 0h24v24H-4z"></path>
                  </svg>
                </div>
              </div>` : void 0}
        </div>
        <span class="${"cds-custom"}--slider__range-label"></span>
      </div>
    `;
	}
	static {
		this.styles = slider_default;
	}
};
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSSliderSkeleton.prototype, "twoHandles", void 0);
CDSSliderSkeleton = __decorate([carbonElement(`cds-custom-slider-skeleton`)], CDSSliderSkeleton);
var slider_skeleton_default = CDSSliderSkeleton;
//#endregion
export { slider_skeleton_default as default };

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