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

package/dist/es-dev/components/select/daikin-select.js

@@ -1,240 +1,143 @@
-import { cva } from "class-variance-authority";
-import { unsafeCSS, css, html } from "lit";
-import { queryAssignedElements, state } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
-import "../../base/dds-form-element.js";
-import { property } from "../../base/dds-property.js";
+import { property as property$1 } from "../../base/dds-property.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { ddsElement } from "../../base/decorators.js";
-import "../../base/define.js";
+import "../../base/index.js";
+import tailwind_default from "../../tailwind.css.js";
 import { CustomReadonlyController } from "../../controllers/custom-readonly.js";
-import tailwindStyles from "../../tailwind.css.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const cvaSelect = 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 = 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"]
-      }
-    }
-  }
-);
-let DaikinSelect = class extends 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 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 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);
-  }
-};
-DaikinSelect.styles = css`
+import { css, html, unsafeCSS } from "lit";
+import { queryAssignedElements, state } from "lit/decorators.js";
+import { cva } from "class-variance-authority";
+//#region src/components/select/daikin-select.ts
+var cvaSelect = 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 = 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 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 CustomReadonlyController(this, {
+			isReadonly: () => this.readonly,
+			isDisabled: () => this.disabled,
+			blockedKeys: [
+				"ArrowUp",
+				"ArrowDown",
+				"ArrowLeft",
+				"ArrowRight",
+				"Home",
+				"End",
+				"PageUp",
+				"PageDown",
+				"Enter",
+				" "
+			]
+		});
+	}
+	static {
+		this.styles = css`
     ::slotted(select) {
       box-sizing: border-box;
       margin: 0;
@@ -254,7 +157,7 @@ DaikinSelect.styles = css`
       color: var(--ddt-color-common-text-primary) !important;
     }
 
-    ${unsafeCSS(tailwindStyles)}
+    ${unsafeCSS(tailwind_default)}
 
     :host {
       display: block;
@@ -262,30 +165,88 @@ DaikinSelect.styles = css`
       position: relative;
     }
   `;
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinSelect.prototype, "error", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinSelect.prototype, "required", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinSelect.prototype, "readonly", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinSelect.prototype, "disabled", 2);
-__decorateClass([
-  queryAssignedElements({ selector: "select" })
-], DaikinSelect.prototype, "_selects", 2);
-__decorateClass([
-  state()
-], DaikinSelect.prototype, "_hasLeftIcon", 2);
-__decorateClass([
-  state()
-], DaikinSelect.prototype, "_label", 2);
-DaikinSelect = __decorateClass([
-  ddsElement("daikin-select")
-], DaikinSelect);
-export {
-  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 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);
+	}
 };
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinSelect.prototype, "error", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinSelect.prototype, "required", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinSelect.prototype, "readonly", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinSelect.prototype, "disabled", void 0);
+__decorate([queryAssignedElements({ selector: "select" })], DaikinSelect.prototype, "_selects", void 0);
+__decorate([state()], DaikinSelect.prototype, "_hasLeftIcon", void 0);
+__decorate([state()], DaikinSelect.prototype, "_label", void 0);
+DaikinSelect = __decorate([ddsElement("daikin-select")], DaikinSelect);
+//#endregion
+export { DaikinSelect };

package/dist/es-dev/components/select/index.js

@@ -1,4 +1,2 @@
 import { DaikinSelect } from "./daikin-select.js";
-export {
-  DaikinSelect
-};
+export { DaikinSelect };