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

package/dist/es/components/toast-notification-manager/daikin-toast-notification-manager.js

@@ -1,160 +1,149 @@
-import { cva } from "class-variance-authority";
-import { unsafeCSS, css, html } from "lit";
-import { queryAssignedElements } from "lit/decorators.js";
-import { createRef, ref } from "lit/directives/ref.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";
-import { TOAST_ANIMATION_DURATION } from "../../utils/notification-common.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 CONTAINER_TRANSITION_DURATION = "--container-transition-duration";
-const CONTAINER_MOVE_OFFSET_Y = "--container-move-offset-y";
-const TOAST_MOVE_OFFSET_X = "24px";
-const TOAST_MOVE_OFFSET_Y_TOP_SIGN = -1;
-const TOAST_MOVE_OFFSET_Y_BOTTOM_SIGN = 1;
-const cvaContainer = cva(
-  [
-    "flex",
-    "gap-2",
-    "w-[calc(100vw-2rem)]",
-    "fixed",
-    "transition-transform",
-    "translate-y-(--container-move-offset-y,0)",
-    "duration-(--container-transition-duration,200ms)"
-  ],
-  {
-    variants: {
-      position: {
-        top: [
-          "items-center",
-          "flex-col",
-          "m-auto",
-          "top-4",
-          "left-0",
-          "right-0"
-        ],
-        "top-left": ["items-start", "flex-col", "top-4", "left-4"],
-        "top-right": ["items-end", "flex-col", "top-4", "right-4"],
-        bottom: [
-          "items-center",
-          "flex-col-reverse",
-          "m-auto",
-          "bottom-4",
-          "left-0",
-          "right-0"
-        ],
-        "bottom-left": [
-          "items-start",
-          "flex-col-reverse",
-          "bottom-4",
-          "left-4"
-        ],
-        "bottom-right": [
-          "items-end",
-          "flex-col-reverse",
-          "bottom-4",
-          "right-4"
-        ]
-      }
-    }
-  }
-);
-let DaikinToastNotificationManager = class extends DDSElement {
-  constructor() {
-    super(...arguments);
-    this._knownItemSet = /* @__PURE__ */ new Set();
-    this._closedItemSet = /* @__PURE__ */ new WeakSet();
-    this._containerRef = createRef();
-  }
-  get _positionY() {
-    return this.position.startsWith("top") ? "top" : "bottom";
-  }
-  get _sign() {
-    return this._positionY === "top" ? TOAST_MOVE_OFFSET_Y_TOP_SIGN : TOAST_MOVE_OFFSET_Y_BOTTOM_SIGN;
-  }
-  _close(target) {
-    if (this._closedItemSet.has(target)) {
-      return;
-    }
-    this._closedItemSet.add(target);
-    const items = this._items;
-    const targetIndex = items.findIndex((item) => item === target);
-    if (targetIndex === -1) {
-      return;
-    }
-    const moveOffsetY = `calc(${0.5 * this._sign}rem + ${target.clientHeight * this._sign}px)`;
-    for (const [index, item] of items.entries()) {
-      item.style.removeProperty("--transition-duration");
-      if (index > targetIndex) {
-        item.style.setProperty("--move-offset-y", moveOffsetY);
-      }
-    }
-    target.style.setProperty("--move-offset-x", TOAST_MOVE_OFFSET_X);
-    target.style.setProperty("--opacity", "0");
-    target.style.setProperty("--pointer-events", "none");
-    setTimeout(() => {
-      for (const item of this._items) {
-        item.style.setProperty("--transition-duration", "0");
-        item.style.removeProperty("--move-offset-y");
-      }
-      target.hidden = true;
-      this.dispatchEvent(new CustomEvent("close", { detail: { target } }));
-    }, TOAST_ANIMATION_DURATION);
-  }
-  _handleClose(event) {
-    event.stopPropagation();
-    this._close(event.target);
-  }
-  _handleNewItem(newItem) {
-    const container = this._containerRef.value;
-    if (!container) {
-      return;
-    }
-    requestAnimationFrame(() => {
-      newItem.style.setProperty("--opacity", "0");
-      container.style.setProperty(CONTAINER_TRANSITION_DURATION, "0");
-      container.style.setProperty(
-        CONTAINER_MOVE_OFFSET_Y,
-        `calc(${0.5 * this._sign}rem + ${newItem.clientHeight * this._sign}px)`
-      );
-      requestAnimationFrame(() => {
-        container.style.removeProperty(CONTAINER_TRANSITION_DURATION);
-        container.style.removeProperty(CONTAINER_MOVE_OFFSET_Y);
-        newItem.style.removeProperty("--opacity");
-        this._scheduleRemoveToast(newItem);
-      });
-    });
-  }
-  _handleSlotchange() {
-    const items = this._items;
-    const newItems = items.filter((item) => !this._knownItemSet.has(item));
-    this._knownItemSet = new Set(items);
-    for (const newItem of newItems) {
-      this._handleNewItem(newItem);
-    }
-  }
-  _scheduleRemoveToast(target) {
-    if (target.duration === null) {
-      return;
+import "../../base/index.js";
+import tailwind_default from "../../tailwind.css.js";
+import "../../utils/notification-common.js";
+import { css, html, unsafeCSS } from "lit";
+import { queryAssignedElements } from "lit/decorators.js";
+import { cva } from "class-variance-authority";
+import { createRef, ref } from "lit/directives/ref.js";
+//#region src/components/toast-notification-manager/daikin-toast-notification-manager.ts
+var CONTAINER_TRANSITION_DURATION = "--container-transition-duration";
+var CONTAINER_MOVE_OFFSET_Y = "--container-move-offset-y";
+var TOAST_MOVE_OFFSET_X = "24px";
+var TOAST_MOVE_OFFSET_Y_TOP_SIGN = -1;
+var TOAST_MOVE_OFFSET_Y_BOTTOM_SIGN = 1;
+var cvaContainer = cva([
+	"flex",
+	"gap-2",
+	"w-[calc(100vw-2rem)]",
+	"fixed",
+	"transition-transform",
+	"translate-y-(--container-move-offset-y,0)",
+	"duration-(--container-transition-duration,200ms)"
+], { variants: { position: {
+	top: [
+		"items-center",
+		"flex-col",
+		"m-auto",
+		"top-4",
+		"left-0",
+		"right-0"
+	],
+	"top-left": [
+		"items-start",
+		"flex-col",
+		"top-4",
+		"left-4"
+	],
+	"top-right": [
+		"items-end",
+		"flex-col",
+		"top-4",
+		"right-4"
+	],
+	bottom: [
+		"items-center",
+		"flex-col-reverse",
+		"m-auto",
+		"bottom-4",
+		"left-0",
+		"right-0"
+	],
+	"bottom-left": [
+		"items-start",
+		"flex-col-reverse",
+		"bottom-4",
+		"left-4"
+	],
+	"bottom-right": [
+		"items-end",
+		"flex-col-reverse",
+		"bottom-4",
+		"right-4"
+	]
+} } });
+var DaikinToastNotificationManager = class DaikinToastNotificationManager extends DDSElement {
+	constructor(..._args) {
+		super(..._args);
+		this._knownItemSet = /* @__PURE__ */ new Set();
+		this._closedItemSet = /* @__PURE__ */ new WeakSet();
+		this._containerRef = createRef();
+	}
+	static {
+		this.styles = css`
+    ${unsafeCSS(tailwind_default)}
+
+    :host {
+      display: block;
+      width: max-content;
     }
-    setTimeout(() => {
-      this._close(target);
-    }, target.duration);
-  }
-  render() {
-    return html`<aside
+  `;
+	}
+	get _positionY() {
+		return this.position.startsWith("top") ? "top" : "bottom";
+	}
+	get _sign() {
+		return this._positionY === "top" ? TOAST_MOVE_OFFSET_Y_TOP_SIGN : TOAST_MOVE_OFFSET_Y_BOTTOM_SIGN;
+	}
+	_close(target) {
+		if (this._closedItemSet.has(target)) return;
+		this._closedItemSet.add(target);
+		const items = this._items;
+		const targetIndex = items.findIndex((item) => item === target);
+		if (targetIndex === -1) return;
+		const moveOffsetY = `calc(${.5 * this._sign}rem + ${target.clientHeight * this._sign}px)`;
+		for (const [index, item] of items.entries()) {
+			item.style.removeProperty("--transition-duration");
+			if (index > targetIndex) item.style.setProperty("--move-offset-y", moveOffsetY);
+		}
+		target.style.setProperty("--move-offset-x", TOAST_MOVE_OFFSET_X);
+		target.style.setProperty("--opacity", "0");
+		target.style.setProperty("--pointer-events", "none");
+		setTimeout(() => {
+			for (const item of this._items) {
+				item.style.setProperty("--transition-duration", "0");
+				item.style.removeProperty("--move-offset-y");
+			}
+			target.hidden = true;
+			this.dispatchEvent(new CustomEvent("close", { detail: { target } }));
+		}, 200);
+	}
+	_handleClose(event) {
+		event.stopPropagation();
+		this._close(event.target);
+	}
+	_handleNewItem(newItem) {
+		const container = this._containerRef.value;
+		if (!container) return;
+		requestAnimationFrame(() => {
+			newItem.style.setProperty("--opacity", "0");
+			container.style.setProperty(CONTAINER_TRANSITION_DURATION, "0");
+			container.style.setProperty(CONTAINER_MOVE_OFFSET_Y, `calc(${.5 * this._sign}rem + ${newItem.clientHeight * this._sign}px)`);
+			requestAnimationFrame(() => {
+				container.style.removeProperty(CONTAINER_TRANSITION_DURATION);
+				container.style.removeProperty(CONTAINER_MOVE_OFFSET_Y);
+				newItem.style.removeProperty("--opacity");
+				this._scheduleRemoveToast(newItem);
+			});
+		});
+	}
+	_handleSlotchange() {
+		const items = this._items;
+		const newItems = items.filter((item) => !this._knownItemSet.has(item));
+		this._knownItemSet = new Set(items);
+		for (const newItem of newItems) this._handleNewItem(newItem);
+	}
+	_scheduleRemoveToast(target) {
+		if (target.duration === null) return;
+		setTimeout(() => {
+			this._close(target);
+		}, target.duration);
+	}
+	render() {
+		return html`<aside
       ${ref(this._containerRef)}
       class=${cvaContainer({ position: this.position })}
       .popover=${"manual"}
@@ -164,43 +153,26 @@ let DaikinToastNotificationManager = class extends DDSElement {
         @slotchange=${this._handleSlotchange}
       ></slot>
     </aside>`;
-  }
-  firstUpdated() {
-    const container = this._containerRef.value;
-    if (container) {
-      container.showPopover();
-    }
-  }
-};
-DaikinToastNotificationManager.styles = css`
-    ${unsafeCSS(tailwindStyles)}
-
-    :host {
-      display: block;
-      width: max-content;
-    }
-  `;
-__decorateClass([
-  property({
-    type: String,
-    reflect: true,
-    fallbackValue: "bottom-right",
-    isAllowedValue: oneOf([
-      "top",
-      "top-left",
-      "top-right",
-      "bottom",
-      "bottom-left",
-      "bottom-right"
-    ])
-  })
-], DaikinToastNotificationManager.prototype, "position", 2);
-__decorateClass([
-  queryAssignedElements({ selector: "daikin-toast-notification" })
-], DaikinToastNotificationManager.prototype, "_items", 2);
-DaikinToastNotificationManager = __decorateClass([
-  ddsElement("daikin-toast-notification-manager")
-], DaikinToastNotificationManager);
-export {
-  DaikinToastNotificationManager
+	}
+	firstUpdated() {
+		const container = this._containerRef.value;
+		if (container) container.showPopover();
+	}
 };
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	fallbackValue: "bottom-right",
+	isAllowedValue: oneOf([
+		"top",
+		"top-left",
+		"top-right",
+		"bottom",
+		"bottom-left",
+		"bottom-right"
+	])
+})], DaikinToastNotificationManager.prototype, "position", void 0);
+__decorate([queryAssignedElements({ selector: "daikin-toast-notification" })], DaikinToastNotificationManager.prototype, "_items", void 0);
+DaikinToastNotificationManager = __decorate([ddsElement("daikin-toast-notification-manager")], DaikinToastNotificationManager);
+//#endregion
+export { DaikinToastNotificationManager };

package/dist/es/components/toast-notification-manager/index.js

@@ -1,4 +1,2 @@
 import { DaikinToastNotificationManager } from "./daikin-toast-notification-manager.js";
-export {
-  DaikinToastNotificationManager
-};
+export { DaikinToastNotificationManager };