@daikin-oss/design-system-web-components 2.0.0 → 2.1.0-next.2

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

@@ -1,290 +1,173 @@
-import { cva } from "class-variance-authority";
-import { unsafeCSS, css, nothing, html } from "lit";
-import { query } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 import { DDSElement } from "../../base/dds-element.js";
-import "../../base/dds-form-element.js";
-import { property, oneOf } from "../../base/dds-property.js";
+import { oneOf, 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 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 cvaInputChipWrapper = 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 = cva([
-  "icon-size-4",
-  "slotted:flex-none",
-  "text-ddt-color-common-text-primary"
-]);
-const cvaInputChipText = cva([
-  "text-(length:--dds-font-size-350)",
-  "px-1",
-  "mr-0.5",
-  "overflow-hidden",
-  "whitespace-nowrap",
-  "flex-1",
-  "text-ddt-color-common-text-primary"
+import "../../base/index.js";
+import tailwind_default from "../../tailwind.css.js";
+import { css, html, nothing, unsafeCSS } from "lit";
+import { query, state } from "lit/decorators.js";
+import { cva } from "class-variance-authority";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/components/chip/daikin-chip.ts
+var cvaInputChipWrapper = cva([
+	"flex",
+	"items-center",
+	"rounded-full",
+	"size-full",
+	"border",
+	"py-0.5",
+	"px-1",
+	"min-h-6",
+	"min-w-12"
+], {
+	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 = cva([
+	"icon-size-4",
+	"slotted:flex-none",
+	"text-ddt-color-common-text-primary"
 ]);
-const cvaRemoveButton = 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 cvaInputChipText = cva([
+	"text-(length:--dds-font-size-350)",
+	"px-1",
+	"overflow-hidden",
+	"whitespace-nowrap",
+	"flex-1",
+	"text-center",
+	"text-ddt-color-common-text-primary"
+], { variants: { hasLeftIcon: {
+	true: ["pl-0.5"],
+	false: []
+} } });
+var cvaRemoveButton = 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 = 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 = 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)"]
-      }
-    }
-  }
-);
-let DaikinChip = class extends 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 html`
-          <div
-            role="group"
-            part="chip"
-            class=${cvaInputChipWrapper({
-          variant: this.variant,
-          elevated: this.elevated
-        })}
-            aria-label=${ifDefined(this.chipAriaLabel)}
-          >
-            <slot name="left-icon" class=${cvaInputChipIcon()}></slot>
-            <span class=${cvaInputChipText()}>
-              <slot></slot>
-            </span>
-            ${this.hideRemoveButton ? nothing : 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 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 ? html`<span
-                class="icon-[daikin--check] text-(--color-primary) size-4 flex-none"
-              ></span>` : 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);
-  }
-};
-DaikinChip.styles = css`
-    ${unsafeCSS(tailwindStyles)}
+var cvaFilterChipWrapper = cva([
+	"flex",
+	"items-center",
+	"justify-center",
+	"rounded-full",
+	"overflow-hidden",
+	"size-full",
+	"border",
+	"py-0.5",
+	"px-1",
+	"min-h-6",
+	"min-w-12",
+	"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 = cva([
+	"text-(length:--dds-font-size-350)",
+	"px-1",
+	"text-center"
+], { variants: { checked: {
+	true: ["text-ddt-color-common-text-inverse"],
+	false: ["text-(--color-primary)"]
+} } });
+var DaikinChip = class DaikinChip extends DDSElement {
+	constructor(..._args) {
+		super(..._args);
+		this.elevated = false;
+		this.hideRemoveButton = false;
+		this.checked = false;
+		this.disabled = false;
+		this.withCheckedIcon = false;
+		this.chipAriaLabel = null;
+		this._hasLeftIcon = false;
+	}
+	static {
+		this.styles = css`
+    ${unsafeCSS(tailwind_default)}
 
     :host {
       display: inline-flex;
@@ -369,54 +252,161 @@ DaikinChip.styles = css`
       --border-color-outline: var(--dds-color-common-accent-lv5-purple);
     }
   `;
-__decorateClass([
-  property({
-    type: String,
-    reflect: true,
-    fallbackValue: "input",
-    isAllowedValue: oneOf(["input", "filter"])
-  })
-], DaikinChip.prototype, "type", 2);
-__decorateClass([
-  property({
-    type: String,
-    reflect: true,
-    fallbackValue: "outline",
-    isAllowedValue: oneOf(["fill", "outline"])
-  })
-], DaikinChip.prototype, "variant", 2);
-__decorateClass([
-  property({
-    type: String,
-    reflect: true,
-    fallbackValue: "gray",
-    isAllowedValue: oneOf(["gray", "red", "blue", "yellow", "green", "orange", "purple"])
-  })
-], DaikinChip.prototype, "color", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinChip.prototype, "elevated", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "hide-remove-button" })
-], DaikinChip.prototype, "hideRemoveButton", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinChip.prototype, "checked", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinChip.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "with-checked-icon" })
-], DaikinChip.prototype, "withCheckedIcon", 2);
-__decorateClass([
-  property({ type: String, reflect: true, attribute: "chip-aria-label" })
-], DaikinChip.prototype, "chipAriaLabel", 2);
-__decorateClass([
-  query("button")
-], DaikinChip.prototype, "_focusableElement", 2);
-DaikinChip = __decorateClass([
-  ddsElement("daikin-chip")
-], DaikinChip);
-export {
-  DaikinChip
+	}
+	_handleLeftIconSlotChange(event) {
+		this._hasLeftIcon = event.target.assignedElements().length > 0;
+	}
+	_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 html`
+          <div
+            role="group"
+            part="chip"
+            class=${cvaInputChipWrapper({
+				variant: this.variant,
+				elevated: this.elevated
+			})}
+            aria-label=${ifDefined(this.chipAriaLabel)}
+          >
+            <slot
+              name="left-icon"
+              class=${cvaInputChipIcon()}
+              @slotchange=${this._handleLeftIconSlotChange}
+            ></slot>
+            <span
+              class=${cvaInputChipText({ hasLeftIcon: this._hasLeftIcon })}
+            >
+              <slot></slot>
+            </span>
+            ${this.hideRemoveButton ? nothing : 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 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 ? html`<span
+                class="icon-[daikin--check] text-(--color-primary) size-4 flex-none"
+              ></span>` : 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);
+	}
 };
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	fallbackValue: "input",
+	isAllowedValue: oneOf(["input", "filter"])
+})], DaikinChip.prototype, "type", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	fallbackValue: "outline",
+	isAllowedValue: oneOf(["fill", "outline"])
+})], DaikinChip.prototype, "variant", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	fallbackValue: "gray",
+	isAllowedValue: oneOf([
+		"gray",
+		"red",
+		"blue",
+		"yellow",
+		"green",
+		"orange",
+		"purple"
+	])
+})], DaikinChip.prototype, "color", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinChip.prototype, "elevated", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true,
+	attribute: "hide-remove-button"
+})], DaikinChip.prototype, "hideRemoveButton", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinChip.prototype, "checked", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinChip.prototype, "disabled", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true,
+	attribute: "with-checked-icon"
+})], DaikinChip.prototype, "withCheckedIcon", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	attribute: "chip-aria-label"
+})], DaikinChip.prototype, "chipAriaLabel", void 0);
+__decorate([query("button")], DaikinChip.prototype, "_focusableElement", void 0);
+__decorate([state()], DaikinChip.prototype, "_hasLeftIcon", void 0);
+DaikinChip = __decorate([ddsElement("daikin-chip")], DaikinChip);
+//#endregion
+export { DaikinChip };