@daikin-oss/design-system-web-components 2.0.0 → 2.0.1-next.1

package/dist/cjs/components/slider/daikin-slider.cjs

@@ -1,257 +1,207 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classVarianceAuthority = require("class-variance-authority");
-const lit = require("lit");
-const decorators_js = require("lit/decorators.js");
-const ref_js = require("lit/directives/ref.js");
-require("../../base/dds-element.cjs");
-const ddsFormElement = require("../../base/dds-form-element.cjs");
-const ddsProperty = require("../../base/dds-property.cjs");
-const decorators = require("../../base/decorators.cjs");
-require("../../base/define.cjs");
-const tailwind = require("../../tailwind.css.cjs");
-const sliderUtils = require("./slider-utils.cjs");
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators2, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators2[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const cvaWrapper = classVarianceAuthority.cva(["relative", "w-full", "h-6"], {
-  variants: {
-    disabled: {
-      false: [],
-      true: []
-    },
-    readonly: {
-      false: [],
-      true: []
-    }
-  },
-  compoundVariants: [
-    {
-      disabled: false,
-      readonly: false,
-      class: ["cursor-pointer"]
-    }
-  ]
+const require_dds_property = require("../../base/dds-property.cjs");
+const require_decorate = require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs");
+const require_dds_form_element = require("../../base/dds-form-element.cjs");
+const require_decorators = require("../../base/decorators.cjs");
+require("../../base/index.cjs");
+const require_tailwind = require("../../tailwind.css.cjs");
+const require_slider_utils = require("./slider-utils.cjs");
+let lit = require("lit");
+let lit_decorators_js = require("lit/decorators.js");
+let class_variance_authority = require("class-variance-authority");
+let lit_directives_ref_js = require("lit/directives/ref.js");
+//#region src/components/slider/daikin-slider.ts
+var cvaWrapper = (0, class_variance_authority.cva)([
+	"relative",
+	"w-full",
+	"h-6"
+], {
+	variants: {
+		disabled: {
+			false: [],
+			true: []
+		},
+		readonly: {
+			false: [],
+			true: []
+		}
+	},
+	compoundVariants: [{
+		disabled: false,
+		readonly: false,
+		class: ["cursor-pointer"]
+	}]
 });
-const cvaSliderThumb = classVarianceAuthority.cva(
-  [
-    "absolute",
-    "top-1/2",
-    "-translate-x-1/2",
-    "-translate-y-1/2",
-    "left-(--slider-ratio)"
-  ],
-  {
-    variants: {
-      disabled: {
-        false: [
-          "focus-visible:outline-solid",
-          "focus-visible:outline-2",
-          "focus-visible:outline-offset-2",
-          "focus-visible:outline-ddt-color-common-border-focus"
-        ],
-        true: ["bg-ddt-color-common-disabled", "pointer-events-none"]
-      },
-      readonly: {
-        false: ["w-4", "h-4", "rounded-full"],
-        true: [
-          "w-1",
-          "h-3",
-          "rounded-xs",
-          "bg-ddt-color-common-neutral-default",
-          "pointer-events-none"
-        ]
-      }
-    },
-    compoundVariants: [
-      {
-        disabled: false,
-        readonly: false,
-        class: [
-          "[&:not([data-dragging])]:bg-ddt-color-common-brand-default",
-          "[&:not([data-dragging])]:hover:bg-ddt-color-common-brand-hover",
-          "[&:not([data-dragging])]:active:bg-ddt-color-common-brand-press",
-          "data-dragging:bg-ddt-color-common-brand-press"
-        ]
-      }
-    ]
-  }
-);
-const cvaSliderTrack = classVarianceAuthority.cva(
-  [
-    "absolute",
-    "top-1/2",
-    "-translate-y-1/2",
-    "left-0",
-    "h-1",
-    "w-(--slider-ratio)"
-  ],
-  {
-    variants: {
-      disabled: {
-        false: ["bg-ddt-color-common-brand-default"],
-        true: ["bg-ddt-color-common-border-empty"]
-      },
-      readonly: {
-        false: [],
-        true: ["bg-ddt-color-common-neutral-default"]
-      }
-    }
-  }
-);
-exports.DaikinSlider = class DaikinSlider extends ddsFormElement.DDSFormElement {
-  constructor() {
-    super();
-    this.disabled = false;
-    this.readonly = false;
-    this._dragging = false;
-    this._sliderRef = ref_js.createRef();
-    this._thumbRef = ref_js.createRef();
-    this.value = this.min;
-  }
-  _updateFormValue(emitEvents) {
-    if (this.disabled) {
-      return;
-    }
-    this.setFormValue(this.value);
-    if (!emitEvents) {
-      return;
-    }
-    this.dispatchEvent(
-      new Event("change", {
-        bubbles: true,
-        composed: true
-      })
-    );
-    this.dispatchEvent(
-      new Event("input", {
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-  get _progress() {
-    const min = parseFloat(this.min);
-    const max = parseFloat(this.max);
-    const clampedValue = Math.max(min, Math.min(parseFloat(this.value), max));
-    return (clampedValue - min) / (max - min) * 100;
-  }
-  _handleDrag(event) {
-    const leftDistance = this._calcMousePositionRatio(event);
-    if (leftDistance == null) {
-      return;
-    }
-    const value = sliderUtils.getValueFromRatio(this, leftDistance);
-    this.value = value;
-  }
-  // This function is called when an arrow key is pressed while the thumb is focused.
-  _handleKeyDown(event) {
-    if (this.disabled || this.readonly) {
-      return;
-    }
-    const value = sliderUtils.getValueByKeydown(this, event.key);
-    if (value == null) {
-      return;
-    }
-    this.value = value;
-    event.preventDefault();
-  }
-  /**
-   * Returns a normalized value of the mouse position on the slider, in the range 0 to 1.
-   *
-   * @param event A MouseEvent.
-   * @returns The mouse's X coordinate normalized to a range of 0 to 1. The left end and beyond of the slider is 0, and the right end and beyond is 1.
-   */
-  _calcMousePositionRatio(event) {
-    var _a;
-    const box = (_a = this._sliderRef.value) == null ? void 0 : _a.getBoundingClientRect();
-    if (box == null) {
-      return;
-    }
-    const x = event instanceof MouseEvent ? event.clientX : event.targetTouches[0].clientX;
-    const relativeX = x - box.left;
-    return Math.max(0, Math.min(relativeX / box.width, 1));
-  }
-  // This function will triggered when the slider thumb button start dragging.
-  _startDrag(event) {
-    var _a;
-    event.preventDefault();
-    if (this.disabled || this.readonly) {
-      return;
-    }
-    const controller = new AbortController();
-    const { signal } = controller;
-    this._dragging = true;
-    document.addEventListener(
-      "mousemove",
-      (event2) => {
-        this._handleDrag(event2);
-      },
-      { signal }
-    );
-    document.addEventListener(
-      "mouseup",
-      () => {
-        this._dragging = false;
-        controller.abort();
-      },
-      { once: true }
-    );
-    (_a = this._thumbRef.value) == null ? void 0 : _a.focus();
-    this._handleDrag(event);
-  }
-  // This function will triggered when the slider thumb button start dragging.
-  _startTouch(event) {
-    var _a;
-    event.preventDefault();
-    if (this.disabled || this.readonly) {
-      return;
+var cvaSliderThumb = (0, class_variance_authority.cva)([
+	"absolute",
+	"top-1/2",
+	"-translate-x-1/2",
+	"-translate-y-1/2",
+	"left-(--slider-ratio)"
+], {
+	variants: {
+		disabled: {
+			false: [
+				"focus-visible:outline-solid",
+				"focus-visible:outline-2",
+				"focus-visible:outline-offset-2",
+				"focus-visible:outline-ddt-color-common-border-focus"
+			],
+			true: ["bg-ddt-color-common-disabled", "pointer-events-none"]
+		},
+		readonly: {
+			false: [
+				"w-4",
+				"h-4",
+				"rounded-full"
+			],
+			true: [
+				"w-1",
+				"h-3",
+				"rounded-xs",
+				"bg-ddt-color-common-neutral-default",
+				"pointer-events-none"
+			]
+		}
+	},
+	compoundVariants: [{
+		disabled: false,
+		readonly: false,
+		class: [
+			"[&:not([data-dragging])]:bg-ddt-color-common-brand-default",
+			"[&:not([data-dragging])]:hover:bg-ddt-color-common-brand-hover",
+			"[&:not([data-dragging])]:active:bg-ddt-color-common-brand-press",
+			"data-dragging:bg-ddt-color-common-brand-press"
+		]
+	}]
+});
+var cvaSliderTrack = (0, class_variance_authority.cva)([
+	"absolute",
+	"top-1/2",
+	"-translate-y-1/2",
+	"left-0",
+	"h-1",
+	"w-(--slider-ratio)"
+], { variants: {
+	disabled: {
+		false: ["bg-ddt-color-common-brand-default"],
+		true: ["bg-ddt-color-common-border-empty"]
+	},
+	readonly: {
+		false: [],
+		true: ["bg-ddt-color-common-neutral-default"]
+	}
+} });
+var DaikinSlider = class DaikinSlider extends require_dds_form_element.DDSFormElement {
+	static {
+		this.styles = lit.css`
+    ${(0, lit.unsafeCSS)(require_tailwind.default)}
+
+    :host {
+      display: inline-flex;
+      width: 100%;
     }
-    const controller = new AbortController();
-    const { signal } = controller;
-    this._dragging = true;
-    document.addEventListener(
-      "touchmove",
-      (event2) => {
-        this._handleDrag(event2);
-      },
-      { signal }
-    );
-    document.addEventListener(
-      "touchend",
-      () => {
-        this._dragging = false;
-        controller.abort();
-      },
-      { once: true }
-    );
-    (_a = this._thumbRef.value) == null ? void 0 : _a.focus();
-    this._handleDrag(event);
-  }
-  /**
-   * Focuses on the inner slider thumb.
-   * @param options focus options
-   */
-  focus(options) {
-    var _a;
-    (_a = this._thumbRef.value) == null ? void 0 : _a.focus(options);
-  }
-  render() {
-    const progress = this._progress;
-    return lit.html`
+  `;
+	}
+	constructor() {
+		super();
+		this.disabled = false;
+		this.readonly = false;
+		this._dragging = false;
+		this._sliderRef = (0, lit_directives_ref_js.createRef)();
+		this._thumbRef = (0, lit_directives_ref_js.createRef)();
+		this.value = this.min;
+	}
+	_updateFormValue(emitEvents) {
+		if (this.disabled) return;
+		this.setFormValue(this.value);
+		if (!emitEvents) return;
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	get _progress() {
+		const min = parseFloat(this.min);
+		const max = parseFloat(this.max);
+		return (Math.max(min, Math.min(parseFloat(this.value), max)) - min) / (max - min) * 100;
+	}
+	_handleDrag(event) {
+		const leftDistance = this._calcMousePositionRatio(event);
+		if (leftDistance == null) return;
+		const value = require_slider_utils.getValueFromRatio(this, leftDistance);
+		this.value = value;
+	}
+	_handleKeyDown(event) {
+		if (this.disabled || this.readonly) return;
+		const value = require_slider_utils.getValueByKeydown(this, event.key);
+		if (value == null) return;
+		this.value = value;
+		event.preventDefault();
+	}
+	/**
+	* Returns a normalized value of the mouse position on the slider, in the range 0 to 1.
+	*
+	* @param event A MouseEvent.
+	* @returns The mouse's X coordinate normalized to a range of 0 to 1. The left end and beyond of the slider is 0, and the right end and beyond is 1.
+	*/
+	_calcMousePositionRatio(event) {
+		const box = this._sliderRef.value?.getBoundingClientRect();
+		if (box == null) return;
+		const relativeX = (event instanceof MouseEvent ? event.clientX : event.targetTouches[0].clientX) - box.left;
+		return Math.max(0, Math.min(relativeX / box.width, 1));
+	}
+	_startDrag(event) {
+		event.preventDefault();
+		if (this.disabled || this.readonly) return;
+		const controller = new AbortController();
+		const { signal } = controller;
+		this._dragging = true;
+		document.addEventListener("mousemove", (event) => {
+			this._handleDrag(event);
+		}, { signal });
+		document.addEventListener("mouseup", () => {
+			this._dragging = false;
+			controller.abort();
+		}, { once: true });
+		this._thumbRef.value?.focus();
+		this._handleDrag(event);
+	}
+	_startTouch(event) {
+		event.preventDefault();
+		if (this.disabled || this.readonly) return;
+		const controller = new AbortController();
+		const { signal } = controller;
+		this._dragging = true;
+		document.addEventListener("touchmove", (event) => {
+			this._handleDrag(event);
+		}, { signal });
+		document.addEventListener("touchend", () => {
+			this._dragging = false;
+			controller.abort();
+		}, { once: true });
+		this._thumbRef.value?.focus();
+		this._handleDrag(event);
+	}
+	/**
+	* Focuses on the inner slider thumb.
+	* @param options focus options
+	*/
+	focus(options) {
+		this._thumbRef.value?.focus(options);
+	}
+	render() {
+		const progress = this._progress;
+		return lit.html`
       <span
-        ${ref_js.ref(this._sliderRef)}
+        ${(0, lit_directives_ref_js.ref)(this._sliderRef)}
         class=${cvaWrapper({
-      disabled: this.disabled,
-      readonly: this.readonly && !this.disabled
-    })}
+			disabled: this.disabled,
+			readonly: this.readonly && !this.disabled
+		})}
         style="--slider-ratio:${progress}%"
         @mousedown=${this._startDrag}
         @touchstart=${this._startTouch}
@@ -261,16 +211,16 @@ exports.DaikinSlider = class DaikinSlider extends ddsFormElement.DDSFormElement
         ></span>
         <span
           class=${cvaSliderTrack({
-      disabled: this.disabled,
-      readonly: this.readonly && !this.disabled
-    })}
+			disabled: this.disabled,
+			readonly: this.readonly && !this.disabled
+		})}
         ></span>
         <span
-          ${ref_js.ref(this._thumbRef)}
+          ${(0, lit_directives_ref_js.ref)(this._thumbRef)}
           class=${cvaSliderThumb({
-      disabled: this.disabled,
-      readonly: this.readonly && !this.disabled
-    })}
+			disabled: this.disabled,
+			readonly: this.readonly && !this.disabled
+		})}
           tabindex=${this.disabled ? -1 : 0}
           role="slider"
           ?data-dragging=${this._dragging}
@@ -284,48 +234,47 @@ exports.DaikinSlider = class DaikinSlider extends ddsFormElement.DDSFormElement
         ></span>
       </span>
     `;
-  }
-  updated(changedProperties) {
-    if (!changedProperties.has("value")) {
-      return;
-    }
-    this._updateFormValue(changedProperties.get("value") !== void 0);
-  }
+	}
+	updated(changedProperties) {
+		if (!changedProperties.has("value")) return;
+		this._updateFormValue(changedProperties.get("value") !== void 0);
+	}
 };
-exports.DaikinSlider.styles = lit.css`
-    ${lit.unsafeCSS(tailwind.default)}
-
-    :host {
-      display: inline-flex;
-      width: 100%;
-    }
-  `;
-__decorateClass([
-  ddsProperty.property({ type: String, reflect: true, fallbackValue: "0" })
-], exports.DaikinSlider.prototype, "min", 2);
-__decorateClass([
-  ddsProperty.property({ type: String, reflect: true, fallbackValue: "100" })
-], exports.DaikinSlider.prototype, "max", 2);
-__decorateClass([
-  ddsProperty.property({ type: String, reflect: true, fallbackValue: "1" })
-], exports.DaikinSlider.prototype, "step", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinSlider.prototype, "disabled", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinSlider.prototype, "readonly", 2);
-__decorateClass([
-  ddsProperty.property({
-    type: String,
-    reflect: true,
-    attribute: "slider-aria-label",
-    fallbackValue: "slider"
-  })
-], exports.DaikinSlider.prototype, "sliderAriaLabel", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.DaikinSlider.prototype, "_dragging", 2);
-exports.DaikinSlider = __decorateClass([
-  decorators.ddsElement("daikin-slider")
-], exports.DaikinSlider);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: "0"
+})], DaikinSlider.prototype, "min", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: "100"
+})], DaikinSlider.prototype, "max", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: "1"
+})], DaikinSlider.prototype, "step", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinSlider.prototype, "disabled", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinSlider.prototype, "readonly", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	attribute: "slider-aria-label",
+	fallbackValue: "slider"
+})], DaikinSlider.prototype, "sliderAriaLabel", void 0);
+require_decorate.default([(0, lit_decorators_js.state)()], DaikinSlider.prototype, "_dragging", void 0);
+DaikinSlider = require_decorate.default([require_decorators.ddsElement("daikin-slider")], DaikinSlider);
+//#endregion
+Object.defineProperty(exports, "DaikinSlider", {
+	enumerable: true,
+	get: function() {
+		return DaikinSlider;
+	}
+});

package/dist/cjs/components/slider/index.cjs

@@ -1,7 +1,8 @@
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const daikinSlider = require("./daikin-slider.cjs");
+const require_daikin_slider = require("./daikin-slider.cjs");
 Object.defineProperty(exports, "DaikinSlider", {
-  enumerable: true,
-  get: () => daikinSlider.DaikinSlider
+	enumerable: true,
+	get: function() {
+		return require_daikin_slider.DaikinSlider;
+	}
 });