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

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

@@ -1,194 +1,161 @@
-import { unsafeCSS, css, html } from "lit";
-import { queryAssignedElements } from "lit/decorators.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 "../../base/index.js";
+import tailwind_default from "../../tailwind.css.js";
 import { scrollIntoViewOnlyParent } from "../../utils/scroller.js";
 import "../tab/daikin-tab.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;
-};
-let DaikinTabs = class extends DDSElement {
-  constructor() {
-    super(...arguments);
-    this.value = "";
-  }
-  /**
-   * Emits `beforechange` event if necessary and returns whether we should proceed.
-   *
-   * 1. Check if `newTab.value` is different from `value`.
-   * 2. Emit "beforechange" event.
-   * 3. Check and return whether the event is canceled.
-   *
-   * @param newTab The newly active tab element.
-   * @returns `true` if we should proceed (event is emitted and not canceled). `false` otherwise.
-   */
-  _emitBeforeChange(newTab) {
-    if (this.value === newTab.value) {
-      return false;
-    }
-    if (!this.dispatchEvent(
-      new CustomEvent("beforechange", {
-        detail: { newTab },
-        bubbles: true,
-        cancelable: true
-      })
-    )) {
-      return false;
-    }
-    return true;
-  }
-  /**
-   * Updates `this.value` and emit "change" event.
-   *
-   * @param newTab The newly active tab element.
-   */
-  _updateValue(newTab) {
-    this.value = newTab.value;
-    this.dispatchEvent(
-      new Event("change", {
-        bubbles: true,
-        cancelable: false
-      })
-    );
-  }
-  /**
-   * Updates `daikin-tab` component(s)' properties in the slot.
-   *
-   * Invoke when:
-   * - `this.value` is changed.
-   * - the default slot's content is changed.
-   */
-  _updateTabs() {
-    const tabs = this._tabs;
-    let selectedTab;
-    for (const tab of tabs) {
-      const isActive = !selectedTab && !tab.disabled && tab.value === this.value;
-      tab.active = isActive;
-      if (isActive) {
-        selectedTab = tab;
-      }
-    }
-    if (!selectedTab) {
-      selectedTab = tabs.find((tab) => !tab.disabled);
-      if (selectedTab) {
-        selectedTab.active = true;
-        this._updateValue(selectedTab);
-      }
-    }
-    if (!selectedTab) {
-      {
-        console.warn(
-          `[daikin-tabs] No tabs that can be activated! This may cause unexpected behavior.`
-        );
-      }
-      return;
-    }
-    scrollIntoViewOnlyParent(selectedTab, "horizontal", false);
-  }
-  _updateTabStyle() {
-    const tabs = this._tabs;
-    for (const tab of tabs) {
-      tab.sizing = this.sizing;
-    }
-  }
-  /**
-   * Updates `daikin-tab-panels` component(s)' properties in the slot.
-   *
-   * Invoke when:
-   * - `this.value` is changed.
-   * - the default slot's content is changed.
-   * - the panel slot's content is changed.
-   */
-  _updateTabPanels() {
-    const panelSwitchers = this._panelSwitchers;
-    const tabs = this._tabs;
-    const panels = Array.from(new Set(tabs.map((tab) => tab.value)));
-    for (const panelSwitcher of panelSwitchers) {
-      panelSwitcher.panelRole = "tabpanel";
-      panelSwitcher.panels = panels;
-      panelSwitcher.value = this.value;
-    }
-  }
-  /**
-   * Handles "click" event emitted by `daikin-tab` component.
-   */
-  _handleTabClick(event) {
-    const tabs = this._tabs;
-    const tab = event.target;
-    if (!tab || !tabs.includes(tab)) {
-      return;
-    }
-    event.stopImmediatePropagation();
-    if (this.value === tab.value) {
-      return;
-    }
-    if (!this._emitBeforeChange(tab)) {
-      return;
-    }
-    for (const element of tabs) {
-      element.active = element === tab;
-    }
-    this._updateValue(tab);
-  }
-  /**
-   * Handles keyboard interactions in the tab list.
-   */
-  _handleKeyDown(event) {
-    const moveOffset = {
-      ArrowRight: 1,
-      ArrowLeft: -1
-    }[event.key];
-    if (!moveOffset) {
-      return;
-    }
-    const tabs = this._tabs;
-    if (!tabs.some((tab) => !tab.disabled)) {
-      {
-        console.warn(
-          `[daikin-tabs] No tabs that can be activated! This may cause unexpected behavior.`
-        );
-      }
-      return;
-    }
-    const activeElement = document.activeElement;
-    const focusedTabIndex = activeElement ? tabs.findIndex((tab) => tab.contains(activeElement)) : -1;
-    if (focusedTabIndex < 0) {
-      const activeTab = tabs.find((tab) => !tab.disabled && tab.active);
-      activeTab == null ? void 0 : activeTab.focus();
-      event.preventDefault();
-      return;
-    }
-    for (let i = 1; i <= tabs.length; i++) {
-      const index = (focusedTabIndex + moveOffset * i + tabs.length * i) % tabs.length;
-      const candidate = tabs[index];
-      if (candidate.disabled) {
-        continue;
-      }
-      candidate.focus();
-      event.preventDefault();
-      return;
+import { css, html, unsafeCSS } from "lit";
+import { queryAssignedElements } from "lit/decorators.js";
+//#region src/components/tabs/daikin-tabs.ts
+var DaikinTabs = class DaikinTabs extends DDSElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = "";
+	}
+	static {
+		this.styles = css`
+    ${unsafeCSS(tailwind_default)}
+
+    :host {
+      display: block;
+      width: 100%;
     }
-  }
-  _handleSlotChange() {
-    this._updateTabs();
-    this._updateTabPanels();
-  }
-  _handleTabPanelsSlotChange() {
-    this._updateTabPanels();
-  }
-  render() {
-    return html`
+  `;
+	}
+	/**
+	* Emits `beforechange` event if necessary and returns whether we should proceed.
+	*
+	* 1. Check if `newTab.value` is different from `value`.
+	* 2. Emit "beforechange" event.
+	* 3. Check and return whether the event is canceled.
+	*
+	* @param newTab The newly active tab element.
+	* @returns `true` if we should proceed (event is emitted and not canceled). `false` otherwise.
+	*/
+	_emitBeforeChange(newTab) {
+		if (this.value === newTab.value) return false;
+		if (!this.dispatchEvent(new CustomEvent("beforechange", {
+			detail: { newTab },
+			bubbles: true,
+			cancelable: true
+		}))) return false;
+		return true;
+	}
+	/**
+	* Updates `this.value` and emit "change" event.
+	*
+	* @param newTab The newly active tab element.
+	*/
+	_updateValue(newTab) {
+		this.value = newTab.value;
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			cancelable: false
+		}));
+	}
+	/**
+	* Updates `daikin-tab` component(s)' properties in the slot.
+	*
+	* Invoke when:
+	* - `this.value` is changed.
+	* - the default slot's content is changed.
+	*/
+	_updateTabs() {
+		const tabs = this._tabs;
+		let selectedTab;
+		for (const tab of tabs) {
+			const isActive = !selectedTab && !tab.disabled && tab.value === this.value;
+			tab.active = isActive;
+			if (isActive) selectedTab = tab;
+		}
+		if (!selectedTab) {
+			selectedTab = tabs.find((tab) => !tab.disabled);
+			if (selectedTab) {
+				selectedTab.active = true;
+				this._updateValue(selectedTab);
+			}
+		}
+		if (!selectedTab) {
+			console.warn(`[daikin-tabs] No tabs that can be activated! This may cause unexpected behavior.`);
+			return;
+		}
+		scrollIntoViewOnlyParent(selectedTab, "horizontal", false);
+	}
+	_updateTabStyle() {
+		const tabs = this._tabs;
+		for (const tab of tabs) tab.sizing = this.sizing;
+	}
+	/**
+	* Updates `daikin-tab-panels` component(s)' properties in the slot.
+	*
+	* Invoke when:
+	* - `this.value` is changed.
+	* - the default slot's content is changed.
+	* - the panel slot's content is changed.
+	*/
+	_updateTabPanels() {
+		const panelSwitchers = this._panelSwitchers;
+		const tabs = this._tabs;
+		const panels = Array.from(new Set(tabs.map((tab) => tab.value)));
+		for (const panelSwitcher of panelSwitchers) {
+			panelSwitcher.panelRole = "tabpanel";
+			panelSwitcher.panels = panels;
+			panelSwitcher.value = this.value;
+		}
+	}
+	/**
+	* Handles "click" event emitted by `daikin-tab` component.
+	*/
+	_handleTabClick(event) {
+		const tabs = this._tabs;
+		const tab = event.target;
+		if (!tab || !tabs.includes(tab)) return;
+		event.stopImmediatePropagation();
+		if (this.value === tab.value) return;
+		if (!this._emitBeforeChange(tab)) return;
+		for (const element of tabs) element.active = element === tab;
+		this._updateValue(tab);
+	}
+	/**
+	* Handles keyboard interactions in the tab list.
+	*/
+	_handleKeyDown(event) {
+		const moveOffset = {
+			ArrowRight: 1,
+			ArrowLeft: -1
+		}[event.key];
+		if (!moveOffset) return;
+		const tabs = this._tabs;
+		if (!tabs.some((tab) => !tab.disabled)) {
+			console.warn(`[daikin-tabs] No tabs that can be activated! This may cause unexpected behavior.`);
+			return;
+		}
+		const activeElement = document.activeElement;
+		const focusedTabIndex = activeElement ? tabs.findIndex((tab) => tab.contains(activeElement)) : -1;
+		if (focusedTabIndex < 0) {
+			tabs.find((tab) => !tab.disabled && tab.active)?.focus();
+			event.preventDefault();
+			return;
+		}
+		for (let i = 1; i <= tabs.length; i++) {
+			const candidate = tabs[(focusedTabIndex + moveOffset * i + tabs.length * i) % tabs.length];
+			if (candidate.disabled) continue;
+			candidate.focus();
+			event.preventDefault();
+			return;
+		}
+	}
+	_handleSlotChange() {
+		this._updateTabs();
+		this._updateTabPanels();
+	}
+	_handleTabPanelsSlotChange() {
+		this._updateTabPanels();
+	}
+	render() {
+		return html`
       <div
         class="flex flex-nowrap w-full p-1 overflow-auto relative before:absolute before:h-px before:inset-1 before:top-auto before:bg-ddt-color-divider"
         role="tablist"
@@ -199,45 +166,27 @@ let DaikinTabs = class extends DDSElement {
       </div>
       <slot name="panels" @slotchange=${this._handleTabPanelsSlotChange}></slot>
     `;
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("value")) {
-      this._updateTabs();
-      this._updateTabPanels();
-    }
-    if (changedProperties.has("sizing")) {
-      this._updateTabStyle();
-    }
-  }
-};
-DaikinTabs.styles = css`
-    ${unsafeCSS(tailwindStyles)}
-
-    :host {
-      display: block;
-      width: 100%;
-    }
-  `;
-__decorateClass([
-  property({ type: String })
-], DaikinTabs.prototype, "value", 2);
-__decorateClass([
-  property({
-    type: String,
-    reflect: true,
-    fallbackValue: "stretch",
-    isAllowedValue: oneOf(["stretch", "fit"])
-  })
-], DaikinTabs.prototype, "sizing", 2);
-__decorateClass([
-  queryAssignedElements({ selector: "daikin-tab" })
-], DaikinTabs.prototype, "_tabs", 2);
-__decorateClass([
-  queryAssignedElements({ slot: "panels", selector: "daikin-tab-panels" })
-], DaikinTabs.prototype, "_panelSwitchers", 2);
-DaikinTabs = __decorateClass([
-  ddsElement("daikin-tabs")
-], DaikinTabs);
-export {
-  DaikinTabs
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("value")) {
+			this._updateTabs();
+			this._updateTabPanels();
+		}
+		if (changedProperties.has("sizing")) this._updateTabStyle();
+	}
 };
+__decorate([property$1({ type: String })], DaikinTabs.prototype, "value", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	fallbackValue: "stretch",
+	isAllowedValue: oneOf(["stretch", "fit"])
+})], DaikinTabs.prototype, "sizing", void 0);
+__decorate([queryAssignedElements({ selector: "daikin-tab" })], DaikinTabs.prototype, "_tabs", void 0);
+__decorate([queryAssignedElements({
+	slot: "panels",
+	selector: "daikin-tab-panels"
+})], DaikinTabs.prototype, "_panelSwitchers", void 0);
+DaikinTabs = __decorate([ddsElement("daikin-tabs")], DaikinTabs);
+//#endregion
+export { DaikinTabs };

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

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