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

package/dist/cjs-dev/components/chip/daikin-chip.cjs

@@ -1,292 +1,165 @@
-"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 ifDefined_js = require("lit/directives/if-defined.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 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 cvaInputChipWrapper = classVarianceAuthority.cva(
-  [
-    "flex",
-    "items-center",
-    "rounded-full",
-    "size-full",
-    "border",
-    "py-0.5",
-    "px-1"
-  ],
-  {
-    variants: {
-      variant: {
-        fill: ["border-(--border-color-fill)", "bg-(--bg-color-fill)"],
-        outline: ["border-(--border-color-outline)"]
-      },
-      elevated: {
-        true: [
-          "shadow-[0px_1px_2px_0px_var(--dds-color-common-background-overlay)]",
-          ""
-        ],
-        false: []
-      }
-    },
-    compoundVariants: [
-      {
-        variant: "outline",
-        elevated: true,
-        class: ["bg-(--dds-color-common-surface-elevated-lv1)"]
-      }
-    ]
-  }
-);
-const cvaInputChipIcon = classVarianceAuthority.cva([
-  "icon-size-4",
-  "slotted:flex-none",
-  "text-ddt-color-common-text-primary"
+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");
+let lit = require("lit");
+let lit_decorators_js = require("lit/decorators.js");
+let class_variance_authority = require("class-variance-authority");
+let lit_directives_if_defined_js = require("lit/directives/if-defined.js");
+//#region src/components/chip/daikin-chip.ts
+var cvaInputChipWrapper = (0, class_variance_authority.cva)([
+	"flex",
+	"items-center",
+	"rounded-full",
+	"size-full",
+	"border",
+	"py-0.5",
+	"px-1"
+], {
+	variants: {
+		variant: {
+			fill: ["border-(--border-color-fill)", "bg-(--bg-color-fill)"],
+			outline: ["border-(--border-color-outline)"]
+		},
+		elevated: {
+			true: ["shadow-[0px_1px_2px_0px_var(--dds-color-common-background-overlay)]", ""],
+			false: []
+		}
+	},
+	compoundVariants: [{
+		variant: "outline",
+		elevated: true,
+		class: ["bg-(--dds-color-common-surface-elevated-lv1)"]
+	}]
+});
+var cvaInputChipIcon = (0, class_variance_authority.cva)([
+	"icon-size-4",
+	"slotted:flex-none",
+	"text-ddt-color-common-text-primary"
 ]);
-const cvaInputChipText = classVarianceAuthority.cva([
-  "text-(length:--dds-font-size-350)",
-  "px-1",
-  "mr-0.5",
-  "overflow-hidden",
-  "whitespace-nowrap",
-  "flex-1",
-  "text-ddt-color-common-text-primary"
+var cvaInputChipText = (0, class_variance_authority.cva)([
+	"text-(length:--dds-font-size-350)",
+	"px-1",
+	"mr-0.5",
+	"overflow-hidden",
+	"whitespace-nowrap",
+	"flex-1",
+	"text-ddt-color-common-text-primary"
 ]);
-const cvaRemoveButton = classVarianceAuthority.cva([
-  "flex-none",
-  "relative",
-  "w-4",
-  "h-4",
-  "flex",
-  "items-center",
-  "justify-center",
-  "rounded-full",
-  "focus-visible:outline",
-  "focus-visible:outline-2",
-  "text-(--color-primary)",
-  "bg-(--color-secondary)",
-  "after:absolute",
-  "after:bg-transparent",
-  "after:size-6",
-  "after:top-1/2",
-  "after:left-1/2",
-  "after:-translate-x-1/2",
-  "after:-translate-y-1/2",
-  "after:rounded-full",
-  "focus-visible:outline-ddt-color-common-border-focus",
-  "enabled:[--color-primary:var(--dds-color-common-text-primary)]",
-  "enabled:hover:[--color-secondary:var(--dds-color-common-surface-neutral-overlay-hover)]",
-  "enabled:active:[--color-secondary:var(--dds-color-common-surface-neutral-overlay-press)]"
+var cvaRemoveButton = (0, class_variance_authority.cva)([
+	"flex-none",
+	"relative",
+	"w-4",
+	"h-4",
+	"flex",
+	"items-center",
+	"justify-center",
+	"rounded-full",
+	"focus-visible:outline",
+	"focus-visible:outline-2",
+	"text-(--color-primary)",
+	"bg-(--color-secondary)",
+	"after:absolute",
+	"after:bg-transparent",
+	"after:size-6",
+	"after:top-1/2",
+	"after:left-1/2",
+	"after:-translate-x-1/2",
+	"after:-translate-y-1/2",
+	"after:rounded-full",
+	"focus-visible:outline-ddt-color-common-border-focus",
+	"enabled:[--color-primary:var(--dds-color-common-text-primary)]",
+	"enabled:hover:[--color-secondary:var(--dds-color-common-surface-neutral-overlay-hover)]",
+	"enabled:active:[--color-secondary:var(--dds-color-common-surface-neutral-overlay-press)]"
 ]);
-const cvaFilterChipWrapper = classVarianceAuthority.cva(
-  [
-    "flex",
-    "items-center",
-    "rounded-full",
-    "overflow-hidden",
-    "size-full",
-    "border",
-    "py-0.5",
-    "px-1",
-    "min-h-6",
-    "focus-visible:outline",
-    "focus-visible:outline-2",
-    "focus-visible:outline-offset-2",
-    "focus-visible:outline-ddt-color-common-border-focus",
-    "text-(--color-primary)",
-    "bg-(--color-secondary)",
-    "border-(--color-tertiary)"
-  ],
-  {
-    variants: {
-      checked: {
-        true: [
-          "enabled:[--color-primary:var(--dds-color-common-text-inverse)]",
-          "enabled:[--color-secondary:var(--dds-color-common-brand-default)]",
-          "enabled:hover:[--color-secondary:var(--dds-color-common-brand-hover)]",
-          "enabled:active:[--color-secondary:var(--dds-color-common-brand-press)]",
-          "enabled:[--color-tertiary:var(--dds-color-common-brand-default)]",
-          "enabled:hover:[--color-tertiary:var(--dds-color-common-brand-hover)]",
-          "enabled:active:[--color-tertiary:var(--dds-color-common-brand-press)]",
-          "disabled:[--color-primary:var(--dds-color-common-text-inverse)]",
-          "disabled:[--color-secondary:var(--dds-color-common-disabled)]",
-          "disabled:[--color-tertiary:var(--dds-color-common-disabled)]"
-        ],
-        false: [
-          "focus-visible:outline-ddt-color-common-border-focus",
-          "enabled:[--color-primary:var(--dds-color-common-brand-default)]",
-          "enabled:[--color-tertiary:var(--dds-color-common-brand-default)]",
-          "enabled:hover:[--color-primary:var(--dds-color-common-brand-hover)]",
-          "enabled:hover:[--color-secondary:var(--dds-color-common-surface-brand-hover)]",
-          "enabled:hover:[--color-tertiary:var(--dds-color-common-brand-hover)]",
-          "enabled:active:[--color-primary:var(--dds-color-common-brand-press)]",
-          "enabled:active:[--color-secondary:var(--dds-color-common-surface-brand-press)]",
-          "enabled:active:[--color-tertiary:var(--dds-color-common-brand-press)]",
-          "disabled:[--color-primary:var(--dds-color-common-disabled)]",
-          "disabled:[--color-tertiary:var(--dds-color-common-disabled)]"
-        ]
-      },
-      elevated: {
-        true: [
-          "shadow-[0px_1px_2px_0px_var(--dds-color-common-background-overlay)]"
-        ],
-        false: []
-      }
-    },
-    compoundVariants: [
-      {
-        checked: true,
-        elevated: true,
-        class: [
-          "enabled:[--color-secondary:var(--dds-color-common-brand-elevated-default)]!",
-          "enabled:hover:[--color-secondary:var(--dds-color-common-brand-elevated-hover)]!",
-          "enabled:active:[--color-secondary:var(--dds-color-common-brand-elevated-press)]!"
-        ]
-      },
-      {
-        checked: false,
-        elevated: true,
-        class: [
-          "enabled:[--color-secondary:var(--dds-color-common-surface-elevated-lv1)]"
-        ]
-      }
-    ]
-  }
-);
-const cvaFilterChipText = classVarianceAuthority.cva(
-  ["text-(length:--dds-font-size-350)", "px-1", "mr-0.5"],
-  {
-    variants: {
-      checked: {
-        true: ["text-ddt-color-common-text-inverse"],
-        false: ["text-(--color-primary)"]
-      }
-    }
-  }
-);
-exports.DaikinChip = class DaikinChip extends ddsElement.DDSElement {
-  constructor() {
-    super(...arguments);
-    this.elevated = false;
-    this.hideRemoveButton = false;
-    this.checked = false;
-    this.disabled = false;
-    this.withCheckedIcon = false;
-    this.chipAriaLabel = null;
-  }
-  _handleRemoveClick(event) {
-    event.stopPropagation();
-    this.dispatchEvent(new Event("remove", { bubbles: true, composed: true }));
-  }
-  /**
-   * Emits `before-select` event if necessary and returns whether we should proceed.
-   *
-   * 1. Emit "before-select" event.
-   * 2. Check and return whether the event is canceled.
-   *
-   * @returns `true` if we should proceed (event is emitted and not canceled). `false` otherwise.
-   */
-  _emitBeforeSelect() {
-    return this.dispatchEvent(
-      new CustomEvent("before-select", {
-        bubbles: true,
-        cancelable: true
-      })
-    );
-  }
-  /**
-   * Handles "click" event emitted by `daikin-chip` component when "filter" type is used.
-   */
-  _handleChipClick(event) {
-    event.stopImmediatePropagation();
-    if (!this._emitBeforeSelect()) {
-      return;
-    }
-    this.checked = !this.checked;
-    this.dispatchEvent(
-      new CustomEvent("select", {
-        detail: { checked: this.checked },
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-  render() {
-    switch (this.type) {
-      case "input":
-        return lit.html`
-          <div
-            role="group"
-            part="chip"
-            class=${cvaInputChipWrapper({
-          variant: this.variant,
-          elevated: this.elevated
-        })}
-            aria-label=${ifDefined_js.ifDefined(this.chipAriaLabel)}
-          >
-            <slot name="left-icon" class=${cvaInputChipIcon()}></slot>
-            <span class=${cvaInputChipText()}>
-              <slot></slot>
-            </span>
-            ${this.hideRemoveButton ? lit.nothing : lit.html`<button
-                  type="button"
-                  class=${cvaRemoveButton()}
-                  aria-label="Remove"
-                  @click=${this._handleRemoveClick}
-                >
-                  <span
-                    class="icon-[daikin--close] text-(--color-primary) size-4 flex-none"
-                  ></span>
-                </button>`}
-          </div>
-        `;
-      case "filter":
-        return lit.html`<button
-          type="button"
-          part="chip"
-          class=${cvaFilterChipWrapper({
-          checked: this.checked,
-          elevated: this.elevated
-        })}
-          aria-pressed=${this.checked}
-          ?disabled=${this.disabled}
-          @click=${this._handleChipClick}
-        >
-          ${this.withCheckedIcon && this.checked ? lit.html`<span
-                class="icon-[daikin--check] text-(--color-primary) size-4 flex-none"
-              ></span>` : lit.nothing}
-          <span class=${cvaFilterChipText({ checked: this.checked })}>
-            <slot></slot>
-          </span>
-        </button>`;
-    }
-  }
-  /**
-   * Focuses on the inner remove button or the chip button depending on the type.
-   * @param options focus options
-   */
-  focus(options) {
-    var _a;
-    (_a = this._focusableElement) == null ? void 0 : _a.focus(options);
-  }
-};
-exports.DaikinChip.styles = lit.css`
-    ${lit.unsafeCSS(tailwind.default)}
+var cvaFilterChipWrapper = (0, class_variance_authority.cva)([
+	"flex",
+	"items-center",
+	"rounded-full",
+	"overflow-hidden",
+	"size-full",
+	"border",
+	"py-0.5",
+	"px-1",
+	"min-h-6",
+	"focus-visible:outline",
+	"focus-visible:outline-2",
+	"focus-visible:outline-offset-2",
+	"focus-visible:outline-ddt-color-common-border-focus",
+	"text-(--color-primary)",
+	"bg-(--color-secondary)",
+	"border-(--color-tertiary)"
+], {
+	variants: {
+		checked: {
+			true: [
+				"enabled:[--color-primary:var(--dds-color-common-text-inverse)]",
+				"enabled:[--color-secondary:var(--dds-color-common-brand-default)]",
+				"enabled:hover:[--color-secondary:var(--dds-color-common-brand-hover)]",
+				"enabled:active:[--color-secondary:var(--dds-color-common-brand-press)]",
+				"enabled:[--color-tertiary:var(--dds-color-common-brand-default)]",
+				"enabled:hover:[--color-tertiary:var(--dds-color-common-brand-hover)]",
+				"enabled:active:[--color-tertiary:var(--dds-color-common-brand-press)]",
+				"disabled:[--color-primary:var(--dds-color-common-text-inverse)]",
+				"disabled:[--color-secondary:var(--dds-color-common-disabled)]",
+				"disabled:[--color-tertiary:var(--dds-color-common-disabled)]"
+			],
+			false: [
+				"focus-visible:outline-ddt-color-common-border-focus",
+				"enabled:[--color-primary:var(--dds-color-common-brand-default)]",
+				"enabled:[--color-tertiary:var(--dds-color-common-brand-default)]",
+				"enabled:hover:[--color-primary:var(--dds-color-common-brand-hover)]",
+				"enabled:hover:[--color-secondary:var(--dds-color-common-surface-brand-hover)]",
+				"enabled:hover:[--color-tertiary:var(--dds-color-common-brand-hover)]",
+				"enabled:active:[--color-primary:var(--dds-color-common-brand-press)]",
+				"enabled:active:[--color-secondary:var(--dds-color-common-surface-brand-press)]",
+				"enabled:active:[--color-tertiary:var(--dds-color-common-brand-press)]",
+				"disabled:[--color-primary:var(--dds-color-common-disabled)]",
+				"disabled:[--color-tertiary:var(--dds-color-common-disabled)]"
+			]
+		},
+		elevated: {
+			true: ["shadow-[0px_1px_2px_0px_var(--dds-color-common-background-overlay)]"],
+			false: []
+		}
+	},
+	compoundVariants: [{
+		checked: true,
+		elevated: true,
+		class: [
+			"enabled:[--color-secondary:var(--dds-color-common-brand-elevated-default)]!",
+			"enabled:hover:[--color-secondary:var(--dds-color-common-brand-elevated-hover)]!",
+			"enabled:active:[--color-secondary:var(--dds-color-common-brand-elevated-press)]!"
+		]
+	}, {
+		checked: false,
+		elevated: true,
+		class: ["enabled:[--color-secondary:var(--dds-color-common-surface-elevated-lv1)]"]
+	}]
+});
+var cvaFilterChipText = (0, class_variance_authority.cva)([
+	"text-(length:--dds-font-size-350)",
+	"px-1",
+	"mr-0.5"
+], { variants: { checked: {
+	true: ["text-ddt-color-common-text-inverse"],
+	false: ["text-(--color-primary)"]
+} } });
+var DaikinChip = class DaikinChip extends require_dds_element.DDSElement {
+	constructor(..._args) {
+		super(..._args);
+		this.elevated = false;
+		this.hideRemoveButton = false;
+		this.checked = false;
+		this.disabled = false;
+		this.withCheckedIcon = false;
+		this.chipAriaLabel = null;
+	}
+	static {
+		this.styles = lit.css`
+    ${(0, lit.unsafeCSS)(require_tailwind.default)}
 
     :host {
       display: inline-flex;
@@ -371,51 +244,156 @@ exports.DaikinChip.styles = lit.css`
       --border-color-outline: var(--dds-color-common-accent-lv5-purple);
     }
   `;
-__decorateClass([
-  ddsProperty.property({
-    type: String,
-    reflect: true,
-    fallbackValue: "input",
-    isAllowedValue: ddsProperty.oneOf(["input", "filter"])
-  })
-], exports.DaikinChip.prototype, "type", 2);
-__decorateClass([
-  ddsProperty.property({
-    type: String,
-    reflect: true,
-    fallbackValue: "outline",
-    isAllowedValue: ddsProperty.oneOf(["fill", "outline"])
-  })
-], exports.DaikinChip.prototype, "variant", 2);
-__decorateClass([
-  ddsProperty.property({
-    type: String,
-    reflect: true,
-    fallbackValue: "gray",
-    isAllowedValue: ddsProperty.oneOf(["gray", "red", "blue", "yellow", "green", "orange", "purple"])
-  })
-], exports.DaikinChip.prototype, "color", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinChip.prototype, "elevated", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true, attribute: "hide-remove-button" })
-], exports.DaikinChip.prototype, "hideRemoveButton", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinChip.prototype, "checked", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinChip.prototype, "disabled", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true, attribute: "with-checked-icon" })
-], exports.DaikinChip.prototype, "withCheckedIcon", 2);
-__decorateClass([
-  ddsProperty.property({ type: String, reflect: true, attribute: "chip-aria-label" })
-], exports.DaikinChip.prototype, "chipAriaLabel", 2);
-__decorateClass([
-  decorators_js.query("button")
-], exports.DaikinChip.prototype, "_focusableElement", 2);
-exports.DaikinChip = __decorateClass([
-  decorators.ddsElement("daikin-chip")
-], exports.DaikinChip);
+	}
+	_handleRemoveClick(event) {
+		event.stopPropagation();
+		this.dispatchEvent(new Event("remove", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/**
+	* Emits `before-select` event if necessary and returns whether we should proceed.
+	*
+	* 1. Emit "before-select" event.
+	* 2. Check and return whether the event is canceled.
+	*
+	* @returns `true` if we should proceed (event is emitted and not canceled). `false` otherwise.
+	*/
+	_emitBeforeSelect() {
+		return this.dispatchEvent(new CustomEvent("before-select", {
+			bubbles: true,
+			cancelable: true
+		}));
+	}
+	/**
+	* Handles "click" event emitted by `daikin-chip` component when "filter" type is used.
+	*/
+	_handleChipClick(event) {
+		event.stopImmediatePropagation();
+		if (!this._emitBeforeSelect()) return;
+		this.checked = !this.checked;
+		this.dispatchEvent(new CustomEvent("select", {
+			detail: { checked: this.checked },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		switch (this.type) {
+			case "input": return lit.html`
+          <div
+            role="group"
+            part="chip"
+            class=${cvaInputChipWrapper({
+				variant: this.variant,
+				elevated: this.elevated
+			})}
+            aria-label=${(0, lit_directives_if_defined_js.ifDefined)(this.chipAriaLabel)}
+          >
+            <slot name="left-icon" class=${cvaInputChipIcon()}></slot>
+            <span class=${cvaInputChipText()}>
+              <slot></slot>
+            </span>
+            ${this.hideRemoveButton ? lit.nothing : lit.html`<button
+                  type="button"
+                  class=${cvaRemoveButton()}
+                  aria-label="Remove"
+                  @click=${this._handleRemoveClick}
+                >
+                  <span
+                    class="icon-[daikin--close] text-(--color-primary) size-4 flex-none"
+                  ></span>
+                </button>`}
+          </div>
+        `;
+			case "filter": return lit.html`<button
+          type="button"
+          part="chip"
+          class=${cvaFilterChipWrapper({
+				checked: this.checked,
+				elevated: this.elevated
+			})}
+          aria-pressed=${this.checked}
+          ?disabled=${this.disabled}
+          @click=${this._handleChipClick}
+        >
+          ${this.withCheckedIcon && this.checked ? lit.html`<span
+                class="icon-[daikin--check] text-(--color-primary) size-4 flex-none"
+              ></span>` : lit.nothing}
+          <span class=${cvaFilterChipText({ checked: this.checked })}>
+            <slot></slot>
+          </span>
+        </button>`;
+		}
+	}
+	/**
+	* Focuses on the inner remove button or the chip button depending on the type.
+	* @param options focus options
+	*/
+	focus(options) {
+		this._focusableElement?.focus(options);
+	}
+};
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: "input",
+	isAllowedValue: require_dds_property.oneOf(["input", "filter"])
+})], DaikinChip.prototype, "type", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: "outline",
+	isAllowedValue: require_dds_property.oneOf(["fill", "outline"])
+})], DaikinChip.prototype, "variant", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: "gray",
+	isAllowedValue: require_dds_property.oneOf([
+		"gray",
+		"red",
+		"blue",
+		"yellow",
+		"green",
+		"orange",
+		"purple"
+	])
+})], DaikinChip.prototype, "color", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinChip.prototype, "elevated", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true,
+	attribute: "hide-remove-button"
+})], DaikinChip.prototype, "hideRemoveButton", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinChip.prototype, "checked", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinChip.prototype, "disabled", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true,
+	attribute: "with-checked-icon"
+})], DaikinChip.prototype, "withCheckedIcon", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	attribute: "chip-aria-label"
+})], DaikinChip.prototype, "chipAriaLabel", void 0);
+require_decorate.default([(0, lit_decorators_js.query)("button")], DaikinChip.prototype, "_focusableElement", void 0);
+DaikinChip = require_decorate.default([require_decorators.ddsElement("daikin-chip")], DaikinChip);
+//#endregion
+Object.defineProperty(exports, "DaikinChip", {
+	enumerable: true,
+	get: function() {
+		return DaikinChip;
+	}
+});