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

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

@@ -1,242 +1,143 @@
-"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 ddsElement = require("../../base/dds-element.cjs");
-require("../../base/dds-form-element.cjs");
-const ddsProperty = require("../../base/dds-property.cjs");
-const decorators = require("../../base/decorators.cjs");
-require("../../base/define.cjs");
-const customReadonly = require("../../controllers/custom-readonly.cjs");
-const tailwind = require("../../tailwind.css.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 cvaSelect = classVarianceAuthority.cva(
-  [
-    "block",
-    "w-full",
-    "relative",
-    "slotted-select:appearance-none!",
-    "slotted-select:flex!",
-    "slotted-select:items-center!",
-    "slotted-select:gap-2!",
-    "slotted-select:w-full!",
-    "slotted-select:h-full!",
-    "slotted-select:min-h-(--dds-input-height)!",
-    "slotted-select:pr-[calc(var(--dds-padding-30)+var(--dds-gap-10)+var(--dds-icon))]!",
-    "slotted-select:text-base!",
-    "slotted-select:border!",
-    "slotted-select:border-(--color-base)!",
-    "slotted-select:rounded-sm!",
-    "slotted-select:leading-5!",
-    "slotted-select:outline-solid!",
-    "slotted-select:outline-0!",
-    "slotted-select:-outline-offset-2!",
-    "slotted-select-focus-visible:outline-2!",
-    "slotted-select-focus-visible:outline-(--color-focus)!",
-    "slotted-select-enabled:text-ddt-color-common-text-primary!",
-    "slotted-select-disabled:text-ddt-color-common-disabled!",
-    "slotted-select-disabled:border-ddt-color-common-disabled!"
-  ],
-  {
-    variants: {
-      disabled: {
-        false: ["after:text-ddt-color-common-text-primary"],
-        true: ["after:text-ddt-color-common-disabled"]
-      },
-      readonly: {
-        false: [
-          "after:icon-[daikin--chevron-down]",
-          "after:size-(--dds-icon)",
-          "after:m-auto",
-          "after:absolute",
-          "after:top-0",
-          "after:bottom-0",
-          "after:right-(--dds-padding-30)",
-          "after:pointer-events-none"
-        ],
-        true: [
-          "slotted-select:[--color-base:var(--dds-color-common-surface-secondary)]",
-          "slotted-select:bg-(--dds-color-common-surface-secondary)!",
-          "slotted-select:hover:bg-(--dds-color-common-surface-secondary)!",
-          "slotted-select:active:bg-(--dds-color-common-surface-secondary)!"
-        ]
-      },
-      error: {
-        false: [
-          "slotted-select-enabled:[--color-base:var(--dds-color-common-neutral-default)]",
-          "slotted-select-hover:[--color-base:var(--dds-color-common-neutral-hover)]",
-          "slotted-select-active:[--color-base:var(--dds-color-common-neutral-press)]",
-          "[--color-focus:var(--dds-color-common-border-focus)]"
-        ],
-        true: [
-          "[--color-base:var(--dds-color-common-danger-default)]",
-          "[--color-focus:var(--dds-color-common-danger-default)]"
-        ]
-      },
-      hasLeftIcon: {
-        false: [
-          "slotted-select:pl-[calc(var(--dds-padding-30)+var(--dds-space-100))]!"
-        ],
-        true: [
-          "slotted-select:pl-[calc(var(--dds-padding-30)+var(--dds-gap-10)+var(--dds-icon)+var(--dds-space-100))]!"
-        ]
-      }
-    },
-    compoundVariants: [
-      {
-        readonly: false,
-        disabled: false,
-        class: ["cursor-pointer slotted-select:cursor-pointer"]
-      },
-      {
-        readonly: false,
-        class: [
-          "slotted-select-hover:bg-ddt-color-common-surface-hover!",
-          "slotted-select-active:bg-ddt-color-common-surface-press!"
-        ]
-      },
-      {
-        readonly: true,
-        error: false,
-        class: [
-          "slotted-select-enabled:[--color-base:var(--dds-color-common-surface-secondary)]",
-          "slotted-select-hover:[--color-base:var(--dds-color-common-surface-secondary)]",
-          "slotted-select-active:[--color-base:var(--dds-color-common-surface-secondary)]"
-        ]
-      },
-      {
-        readonly: true,
-        error: true,
-        class: [
-          "slotted-select-enabled:[--color-base:var(--dds-color-common-danger-default)]"
-        ]
-      }
-    ]
-  }
-);
-const cvaLeftIcon = classVarianceAuthority.cva(
-  [
-    "absolute",
-    "z-1",
-    "top-1/2",
-    "-translate-y-1/2",
-    "left-(--dds-padding-30)",
-    "shrink-0",
-    "size-(--dds-icon)"
-  ],
-  {
-    variants: {
-      disabled: {
-        false: ["text-ddt-color-common-text-primary"],
-        true: ["text-ddt-color-common-disabled"]
-      }
-    }
-  }
-);
-exports.DaikinSelect = class DaikinSelect extends ddsElement.DDSElement {
-  constructor() {
-    super(...arguments);
-    this.error = false;
-    this.required = false;
-    this.readonly = false;
-    this.disabled = false;
-    this._hasLeftIcon = false;
-    this._label = null;
-    this._readonlyController = new customReadonly.CustomReadonlyController(this, {
-      isReadonly: () => this.readonly,
-      isDisabled: () => this.disabled,
-      blockedKeys: [
-        "ArrowUp",
-        "ArrowDown",
-        "ArrowLeft",
-        "ArrowRight",
-        "Home",
-        "End",
-        "PageUp",
-        "PageDown",
-        "Enter",
-        " "
-      ]
-    });
-  }
-  _handleLeftIconSlotChange(event) {
-    const slot = event.target;
-    this._hasLeftIcon = slot.assignedElements().length > 0;
-  }
-  get _select() {
-    return this._selects[0] ?? null;
-  }
-  _updateSelect() {
-    const select = this._select;
-    if (!select) {
-      this._readonlyController.setTarget(null);
-      return;
-    }
-    select.disabled = this.disabled;
-    select.required = this.required;
-    select.ariaLabel = this._label;
-    this._readonlyController.setTarget(select);
-  }
-  _handleSlotChange() {
-    this._updateSelect();
-  }
-  render() {
-    return lit.html`<span
-        class=${cvaLeftIcon({
-      disabled: this.disabled
-    })}
-        ><slot
-          name="left-icon"
-          @slotchange=${this._handleLeftIconSlotChange}
-        ></slot></span
-      ><slot
-        class=${cvaSelect({
-      disabled: this.disabled,
-      readonly: this.readonly && !this.disabled,
-      error: this.error,
-      hasLeftIcon: this._hasLeftIcon
-    })}
-        @slotchange=${this._handleSlotChange}
-      ></slot>`;
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("disabled") || changedProperties.has("required") || changedProperties.has("readonly")) {
-      this._updateSelect();
-    }
-  }
-  /**
-   * This method is used by `daikin-input-group` to reflect it's attributes to this component.
-   * @private
-   */
-  reflectInputGroup(inputGroup) {
-    const isError = !inputGroup.disabled && !!inputGroup.error;
-    this.disabled = !!inputGroup.disabled;
-    this.readonly = !!inputGroup.readonly;
-    this.required = !!inputGroup.required;
-    this.error = isError;
-    this._label = inputGroup.label;
-    this._updateSelect();
-  }
-  /**
-   * Focuses on the `<select>` element in the slot.
-   * @param options focus options
-   */
-  focus(options) {
-    var _a;
-    (_a = this._select) == null ? void 0 : _a.focus(options);
-  }
-};
-exports.DaikinSelect.styles = lit.css`
+const require_dds_element = require("../../base/dds-element.cjs");
+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_decorators = require("../../base/decorators.cjs");
+require("../../base/index.cjs");
+const require_tailwind = require("../../tailwind.css.cjs");
+const require_custom_readonly = require("../../controllers/custom-readonly.cjs");
+let lit = require("lit");
+let lit_decorators_js = require("lit/decorators.js");
+let class_variance_authority = require("class-variance-authority");
+//#region src/components/select/daikin-select.ts
+var cvaSelect = (0, class_variance_authority.cva)([
+	"block",
+	"w-full",
+	"relative",
+	"slotted-select:appearance-none!",
+	"slotted-select:flex!",
+	"slotted-select:items-center!",
+	"slotted-select:gap-2!",
+	"slotted-select:w-full!",
+	"slotted-select:h-full!",
+	"slotted-select:min-h-(--dds-input-height)!",
+	"slotted-select:pr-[calc(var(--dds-padding-30)+var(--dds-gap-10)+var(--dds-icon))]!",
+	"slotted-select:text-base!",
+	"slotted-select:border!",
+	"slotted-select:border-(--color-base)!",
+	"slotted-select:rounded-sm!",
+	"slotted-select:leading-5!",
+	"slotted-select:outline-solid!",
+	"slotted-select:outline-0!",
+	"slotted-select:-outline-offset-2!",
+	"slotted-select-focus-visible:outline-2!",
+	"slotted-select-focus-visible:outline-(--color-focus)!",
+	"slotted-select-enabled:text-ddt-color-common-text-primary!",
+	"slotted-select-disabled:text-ddt-color-common-disabled!",
+	"slotted-select-disabled:border-ddt-color-common-disabled!"
+], {
+	variants: {
+		disabled: {
+			false: ["after:text-ddt-color-common-text-primary"],
+			true: ["after:text-ddt-color-common-disabled"]
+		},
+		readonly: {
+			false: [
+				"after:icon-[daikin--chevron-down]",
+				"after:size-(--dds-icon)",
+				"after:m-auto",
+				"after:absolute",
+				"after:top-0",
+				"after:bottom-0",
+				"after:right-(--dds-padding-30)",
+				"after:pointer-events-none"
+			],
+			true: [
+				"slotted-select:[--color-base:var(--dds-color-common-surface-secondary)]",
+				"slotted-select:bg-(--dds-color-common-surface-secondary)!",
+				"slotted-select:hover:bg-(--dds-color-common-surface-secondary)!",
+				"slotted-select:active:bg-(--dds-color-common-surface-secondary)!"
+			]
+		},
+		error: {
+			false: [
+				"slotted-select-enabled:[--color-base:var(--dds-color-common-neutral-default)]",
+				"slotted-select-hover:[--color-base:var(--dds-color-common-neutral-hover)]",
+				"slotted-select-active:[--color-base:var(--dds-color-common-neutral-press)]",
+				"[--color-focus:var(--dds-color-common-border-focus)]"
+			],
+			true: ["[--color-base:var(--dds-color-common-danger-default)]", "[--color-focus:var(--dds-color-common-danger-default)]"]
+		},
+		hasLeftIcon: {
+			false: ["slotted-select:pl-[calc(var(--dds-padding-30)+var(--dds-space-100))]!"],
+			true: ["slotted-select:pl-[calc(var(--dds-padding-30)+var(--dds-gap-10)+var(--dds-icon)+var(--dds-space-100))]!"]
+		}
+	},
+	compoundVariants: [
+		{
+			readonly: false,
+			disabled: false,
+			class: ["cursor-pointer slotted-select:cursor-pointer"]
+		},
+		{
+			readonly: false,
+			class: ["slotted-select-hover:bg-ddt-color-common-surface-hover!", "slotted-select-active:bg-ddt-color-common-surface-press!"]
+		},
+		{
+			readonly: true,
+			error: false,
+			class: [
+				"slotted-select-enabled:[--color-base:var(--dds-color-common-surface-secondary)]",
+				"slotted-select-hover:[--color-base:var(--dds-color-common-surface-secondary)]",
+				"slotted-select-active:[--color-base:var(--dds-color-common-surface-secondary)]"
+			]
+		},
+		{
+			readonly: true,
+			error: true,
+			class: ["slotted-select-enabled:[--color-base:var(--dds-color-common-danger-default)]"]
+		}
+	]
+});
+var cvaLeftIcon = (0, class_variance_authority.cva)([
+	"absolute",
+	"z-1",
+	"top-1/2",
+	"-translate-y-1/2",
+	"left-(--dds-padding-30)",
+	"shrink-0",
+	"size-(--dds-icon)"
+], { variants: { disabled: {
+	false: ["text-ddt-color-common-text-primary"],
+	true: ["text-ddt-color-common-disabled"]
+} } });
+var DaikinSelect = class DaikinSelect extends require_dds_element.DDSElement {
+	constructor(..._args) {
+		super(..._args);
+		this.error = false;
+		this.required = false;
+		this.readonly = false;
+		this.disabled = false;
+		this._hasLeftIcon = false;
+		this._label = null;
+		this._readonlyController = new require_custom_readonly.CustomReadonlyController(this, {
+			isReadonly: () => this.readonly,
+			isDisabled: () => this.disabled,
+			blockedKeys: [
+				"ArrowUp",
+				"ArrowDown",
+				"ArrowLeft",
+				"ArrowRight",
+				"Home",
+				"End",
+				"PageUp",
+				"PageDown",
+				"Enter",
+				" "
+			]
+		});
+	}
+	static {
+		this.styles = lit.css`
     ::slotted(select) {
       box-sizing: border-box;
       margin: 0;
@@ -256,7 +157,7 @@ exports.DaikinSelect.styles = lit.css`
       color: var(--ddt-color-common-text-primary) !important;
     }
 
-    ${lit.unsafeCSS(tailwind.default)}
+    ${(0, lit.unsafeCSS)(require_tailwind.default)}
 
     :host {
       display: block;
@@ -264,27 +165,93 @@ exports.DaikinSelect.styles = lit.css`
       position: relative;
     }
   `;
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinSelect.prototype, "error", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinSelect.prototype, "required", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinSelect.prototype, "readonly", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinSelect.prototype, "disabled", 2);
-__decorateClass([
-  decorators_js.queryAssignedElements({ selector: "select" })
-], exports.DaikinSelect.prototype, "_selects", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.DaikinSelect.prototype, "_hasLeftIcon", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.DaikinSelect.prototype, "_label", 2);
-exports.DaikinSelect = __decorateClass([
-  decorators.ddsElement("daikin-select")
-], exports.DaikinSelect);
+	}
+	_handleLeftIconSlotChange(event) {
+		const slot = event.target;
+		this._hasLeftIcon = slot.assignedElements().length > 0;
+	}
+	get _select() {
+		return this._selects[0] ?? null;
+	}
+	_updateSelect() {
+		const select = this._select;
+		if (!select) {
+			this._readonlyController.setTarget(null);
+			return;
+		}
+		select.disabled = this.disabled;
+		select.required = this.required;
+		select.ariaLabel = this._label;
+		this._readonlyController.setTarget(select);
+	}
+	_handleSlotChange() {
+		this._updateSelect();
+	}
+	render() {
+		return lit.html`<span
+        class=${cvaLeftIcon({ disabled: this.disabled })}
+        ><slot
+          name="left-icon"
+          @slotchange=${this._handleLeftIconSlotChange}
+        ></slot></span
+      ><slot
+        class=${cvaSelect({
+			disabled: this.disabled,
+			readonly: this.readonly && !this.disabled,
+			error: this.error,
+			hasLeftIcon: this._hasLeftIcon
+		})}
+        @slotchange=${this._handleSlotChange}
+      ></slot>`;
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("disabled") || changedProperties.has("required") || changedProperties.has("readonly")) this._updateSelect();
+	}
+	/**
+	* This method is used by `daikin-input-group` to reflect it's attributes to this component.
+	* @private
+	*/
+	reflectInputGroup(inputGroup) {
+		const isError = !inputGroup.disabled && !!inputGroup.error;
+		this.disabled = !!inputGroup.disabled;
+		this.readonly = !!inputGroup.readonly;
+		this.required = !!inputGroup.required;
+		this.error = isError;
+		this._label = inputGroup.label;
+		this._updateSelect();
+	}
+	/**
+	* Focuses on the `<select>` element in the slot.
+	* @param options focus options
+	*/
+	focus(options) {
+		this._select?.focus(options);
+	}
+};
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinSelect.prototype, "error", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinSelect.prototype, "required", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinSelect.prototype, "readonly", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinSelect.prototype, "disabled", void 0);
+require_decorate.default([(0, lit_decorators_js.queryAssignedElements)({ selector: "select" })], DaikinSelect.prototype, "_selects", void 0);
+require_decorate.default([(0, lit_decorators_js.state)()], DaikinSelect.prototype, "_hasLeftIcon", void 0);
+require_decorate.default([(0, lit_decorators_js.state)()], DaikinSelect.prototype, "_label", void 0);
+DaikinSelect = require_decorate.default([require_decorators.ddsElement("daikin-select")], DaikinSelect);
+//#endregion
+Object.defineProperty(exports, "DaikinSelect", {
+	enumerable: true,
+	get: function() {
+		return DaikinSelect;
+	}
+});

package/dist/cjs/components/select/index.cjs

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