@daikin-oss/design-system-web-components 0.2.0 → 0.3.2

package/dist/es-dev/components/icon/icons.json.js

@@ -0,0 +1,29 @@
+const icons = {
+  alarm: {
+    "class": "i-daikin-notification-status-alarm",
+    color: null
+  },
+  close: {
+    "class": "i-daikin-notification-close",
+    color: "#a0a0a0"
+  },
+  information: {
+    "class": "i-daikin-notification-status-information",
+    color: null
+  },
+  negative: {
+    "class": "i-daikin-notification-status-negative",
+    color: null
+  },
+  positive: {
+    "class": "i-daikin-notification-status-positive",
+    color: null
+  },
+  warning: {
+    "class": "i-daikin-notification-status-warning",
+    color: null
+  }
+};
+export {
+  icons
+};

package/dist/es-dev/components/icon/index.d.ts

@@ -0,0 +1 @@
+export * from './daikin-icon';

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

@@ -0,0 +1,5 @@
+import { DaikinIcon, iconList } from "./daikin-icon.js";
+export {
+  DaikinIcon,
+  iconList
+};

package/dist/es-dev/components/index.d.ts

@@ -0,0 +1,18 @@
+export * from './accordion';
+export * from './accordion-item';
+export * from './breadcrumb';
+export * from './breadcrumb-item';
+export * from './button';
+export * from './checkbox';
+export * from './icon';
+export * from './input-group';
+export * from './notification';
+export * from './panel-switcher';
+export * from './progress-bar';
+export * from './radio';
+export * from './tab';
+export * from './tab-group';
+export * from './text-input';
+export * from './textarea';
+export * from './toggle';
+export * from './tooltip';

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

@@ -0,0 +1,39 @@
+import { DaikinAccordion } from "./accordion/daikin-accordion.js";
+import { DaikinAccordionItem } from "./accordion-item/daikin-accordion-item.js";
+import { DaikinBreadcrumb } from "./breadcrumb/daikin-breadcrumb.js";
+import { DaikinBreadcrumbItem } from "./breadcrumb-item/daikin-breadcrumb-item.js";
+import { DaikinButton } from "./button/daikin-button.js";
+import { DaikinCheckbox } from "./checkbox/daikin-checkbox.js";
+import { DaikinIcon, iconList } from "./icon/daikin-icon.js";
+import { DaikinInputGroup } from "./input-group/daikin-input-group.js";
+import { DaikinNotification } from "./notification/daikin-notification.js";
+import { DaikinPanelSwitcher } from "./panel-switcher/daikin-panel-switcher.js";
+import { DaikinProgressBar } from "./progress-bar/daikin-progress-bar.js";
+import { DaikinRadio } from "./radio/daikin-radio.js";
+import { DaikinTab } from "./tab/daikin-tab.js";
+import { DaikinTabGroup } from "./tab-group/daikin-tab-group.js";
+import { DaikinTextInput } from "./text-input/daikin-text-input.js";
+import { DaikinTextarea } from "./textarea/daikin-textarea.js";
+import { DaikinToggle } from "./toggle/daikin-toggle.js";
+import { DaikinTooltip } from "./tooltip/daikin-tooltip.js";
+export {
+  DaikinAccordion,
+  DaikinAccordionItem,
+  DaikinBreadcrumb,
+  DaikinBreadcrumbItem,
+  DaikinButton,
+  DaikinCheckbox,
+  DaikinIcon,
+  DaikinInputGroup,
+  DaikinNotification,
+  DaikinPanelSwitcher,
+  DaikinProgressBar,
+  DaikinRadio,
+  DaikinTab,
+  DaikinTabGroup,
+  DaikinTextInput,
+  DaikinTextarea,
+  DaikinToggle,
+  DaikinTooltip,
+  iconList
+};

package/dist/es-dev/components/input-group/daikin-input-group.d.ts

@@ -0,0 +1,72 @@
+import { LitElement } from 'lit';
+import { DaikinTextInput } from '../text-input/daikin-text-input';
+import { DaikinTextarea } from '../textarea/daikin-textarea';
+type ControlElement = DaikinTextInput | DaikinTextarea;
+/**
+ * The input group component serves as a wrapper for a `daikin-text-input` or `daikin-textarea` component, providing additional elements such as labels, helper texts, or a counter.
+ * It enhances the user experience by associating supplementary information or functionality directly with the input field.
+ * This component is particularly useful for creating complex forms where clear communication and guidance are essential.
+ *
+ * Hierarchies:
+ * - `daikin-input-group` > `daikin-text-input`
+ * - `daikin-input-group` > `daikin-textarea`
+ *
+ * @slot - A slot for a input component. Place a `daikin-text-input` or `daikin-textarea` element here.
+ *
+ * @example
+ *
+ * With Text Input:
+ *
+ * ```html
+ * <daikin-input-group>
+ *   <daikin-text-input value="Content of Text Input"></daikin-text-input>
+ * </daikin-input-group>
+ * ```
+ *
+ * With Textarea:
+ *
+ * ```html
+ * <daikin-input-group>
+ *   <daikin-textarea value="Content of Textarea"></daikin-textarea>
+ * </daikin-input-group>
+ * ```
+ */
+export declare class DaikinInputGroup extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Label text to place at the top of the field
+     */
+    label?: string;
+    /**
+     * Helper text to place at the bottom of the field. In error conditions, this text is hidden.
+     */
+    helper?: string;
+    /**
+     * Whether the field is disabled. Reflected in the `disabled` property of the input in the slot.
+     */
+    disabled: boolean;
+    /**
+     * Whether the field is required. An additional star mark will be added if `true`.
+     */
+    required: boolean;
+    /**
+     * Error text to place at the bottom of the field. If specified, sets the `error` property of the element in the slot to `true`. Ignored if the `disabled` is `true`.
+     */
+    error: string;
+    /**
+     * Whether to display the counter in the Textarea
+     */
+    textareaCounter: boolean;
+    _textareas: DaikinTextarea[];
+    _controls: ControlElement[];
+    private _handleSlotChange;
+    private _reflectSlotProperties;
+    render(): import('lit-html').TemplateResult<1>;
+    updated(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-input-group": DaikinInputGroup;
+    }
+}
+export default DaikinInputGroup;

package/dist/es-dev/components/input-group/daikin-input-group.js

@@ -0,0 +1,120 @@
+import { colorFeedbackNegative } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { property, queryAssignedElements, customElement } from "lit/decorators.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 cvaLabel = cva(["text-base", "font-bold"], {
+  variants: {
+    variant: {
+      enabled: ["text-daikinNeutral-800"],
+      disabled: ["text-daikinNeutral-200"]
+    },
+    required: {
+      optional: [],
+      required: ["after:content-['*']", "after:ml-[2px]"]
+    }
+  }
+});
+const cvaHelper = cva(["h-[22px]", "text-xs"], {
+  variants: {
+    variant: {
+      enabled: ["text-daikinNeutral-800"],
+      disabled: ["text-daikinNeutral-200"]
+    }
+  }
+});
+let DaikinInputGroup = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.required = false;
+    this.error = "";
+    this.textareaCounter = false;
+  }
+  _handleSlotChange() {
+    this._reflectSlotProperties();
+  }
+  _reflectSlotProperties() {
+    const isError = !this.disabled && !!this.error;
+    for (const control of this._controls) {
+      control.disabled = !!this.disabled;
+      control.error = isError;
+    }
+    for (const item of this._textareas) {
+      item.counter = this.textareaCounter;
+    }
+  }
+  render() {
+    const inputGroupLabelClassName = cvaLabel({
+      variant: this.disabled ? "disabled" : "enabled",
+      required: this.required ? "required" : "optional"
+    });
+    const inputGroupHelperClassName = cvaHelper({
+      variant: this.disabled ? "disabled" : "enabled"
+    });
+    return html`<fieldset class="content" ?disabled=${this.disabled}>
+      <label class="flex flex-col justify-center w-max gap-1 font-daikinSerif">
+        ${this.label ? html`<span class=${inputGroupLabelClassName}>${this.label}</span>` : null}
+        <slot @slotchange=${this._handleSlotChange}></slot>
+        ${this.helper && !this.error ? html`<span class=${inputGroupHelperClassName}>${this.helper}</span>` : null}
+        ${!this.disabled && !!this.error ? html`<span
+              class="flex gap-2 text-[--input-group-border-color-error] leading-[22px] before:i-daikin-status-negative before:block before:w-[16px] before:h-[22px]"
+              >${this.error}</span
+            >` : null}
+      </label>
+    </fieldset>`;
+  }
+  updated() {
+    this._reflectSlotProperties();
+  }
+};
+DaikinInputGroup.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      --input-group-border-color-error: ${unsafeCSS(colorFeedbackNegative)};
+
+      display: block;
+      width: max-content;
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], DaikinInputGroup.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], DaikinInputGroup.prototype, "helper", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinInputGroup.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinInputGroup.prototype, "required", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinInputGroup.prototype, "error", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinInputGroup.prototype, "textareaCounter", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "daikin-textarea" })
+], DaikinInputGroup.prototype, "_textareas", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "daikin-text-input,daikin-textarea" })
+], DaikinInputGroup.prototype, "_controls", 2);
+DaikinInputGroup = __decorateClass([
+  customElement("daikin-input-group")
+], DaikinInputGroup);
+export {
+  DaikinInputGroup
+};

package/dist/es-dev/components/input-group/index.d.ts

@@ -0,0 +1 @@
+export * from './daikin-input-group';

package/dist/es-dev/components/input-group/index.js

@@ -0,0 +1,4 @@
+import { DaikinInputGroup } from "./daikin-input-group.js";
+export {
+  DaikinInputGroup
+};

package/dist/es-dev/components/notification/daikin-notification.d.ts

@@ -0,0 +1,75 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from '../../type-utils';
+declare const cvaContainer: (props?: ({
+    variant?: "toast" | "inline" | null | undefined;
+    status?: "alarm" | "information" | "negative" | "positive" | "warning" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const cvaIconContainer: (props?: ({
+    status?: "alarm" | "information" | "negative" | "positive" | "warning" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const cvaContent: (props?: ({
+    line?: "single" | "multi" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type NotificationVariantProps = MergeVariantProps<typeof cvaContainer | typeof cvaIconContainer | typeof cvaContent>;
+/**
+ * The notification component is a UI element used to inform users about important updates, alerts, or messages within an application.
+ *
+ * There are two variants of notification components: `toast` and `inline`.
+ *
+ * Toast notifications are brief messages that should appear temporarily at the edge of the screen, typically in the bottom or top corner.
+ * Toast notifications are ideal for conveying transient information that does not require user interaction, such as success messages, warnings, or alerts. \
+ * Please note that **currently we don't support automatic placement or stacking of toast notifications**.
+ *
+ * Inline notifications appear within the content of the application, usually embedded directly within a page or section.
+ * Inline notifications are more persistent and are used to highlight important information or status updates that should remain visible to the user until they are acknowledged or the issue is resolved.
+ *
+ * @fires close - A custom event emitted when a user clicks the close button.
+ *
+ * @example
+ *
+ * ```html
+ * </daikin-notification title="Notification title" description="Notification description."></daikin-notification>
+ * ```
+ */
+export declare class DaikinNotification extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Title text
+     */
+    title: string;
+    /**
+     * Description text
+     */
+    description: string;
+    /**
+     * Type of notification
+     */
+    variant: NotificationVariantProps["variant"];
+    /**
+     * Status of notification
+     */
+    status: NotificationVariantProps["status"];
+    /**
+     * Display in single or multiple lines
+     */
+    line: NotificationVariantProps["line"];
+    /**
+     * Whether the component is open
+     */
+    open: boolean;
+    /**
+     * Whether to display the close button
+     */
+    closeButton: boolean;
+    /**
+     * Call the event registered in "close"
+     */
+    private _handleClickClose;
+    render(): import('lit-html').TemplateResult<1> | null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-notification": DaikinNotification;
+    }
+}
+export {};

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

@@ -0,0 +1,192 @@
+import { colorFeedbackPositive, colorFeedbackWarning, colorFeedbackNegative } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { EVENT_CLOSE } from "../../constants/events.js";
+import tailwindStyles from "../../tailwind.css.js";
+import "../icon/daikin-icon.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 cvaContainer = cva(
+  ["flex", "box-border", "bg-white", "overflow-hidden", "font-daikinSerif"],
+  {
+    variants: {
+      variant: {
+        toast: [
+          "border-2",
+          "border-solid",
+          "rounded-lg",
+          "shadow-notification"
+        ],
+        inline: []
+      },
+      status: {
+        positive: ["border-[--colorFeedbackPositive]"],
+        negative: ["border-[--colorFeedbackNegative]"],
+        warning: ["border-[--colorFeedbackWarning]"],
+        alarm: ["border-[--colorFeedbackAlarm]"],
+        information: ["border-[--colorFeedbackInformation]"]
+      }
+    },
+    defaultVariants: {
+      variant: "toast",
+      status: "positive"
+    }
+  }
+);
+const cvaIconContainer = cva(
+  ["flex-none", "flex", "justify-center", "items-center", "w-[44px]"],
+  {
+    variants: {
+      status: {
+        positive: ["bg-[--colorFeedbackPositive]"],
+        negative: ["bg-[--colorFeedbackNegative]"],
+        warning: ["bg-[--colorFeedbackWarning]"],
+        alarm: ["bg-[--colorFeedbackAlarm]"],
+        information: ["bg-[--colorFeedbackInformation]"]
+      }
+    },
+    defaultVariants: {
+      status: "positive"
+    }
+  }
+);
+const cvaContent = cva(
+  ["flex", "justify-center", "gap-1", "w-fit", "flex-none"],
+  {
+    variants: {
+      line: {
+        single: ["items-center", "flex-row"],
+        multi: ["items-start", "flex-col"]
+      }
+    },
+    defaultVariants: {
+      line: "single"
+    }
+  }
+);
+let DaikinNotification = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.title = "";
+    this.description = "";
+    this.variant = "toast";
+    this.status = "positive";
+    this.line = "single";
+    this.open = false;
+    this.closeButton = false;
+  }
+  /**
+   * Call the event registered in "close"
+   */
+  _handleClickClose() {
+    const event = new CustomEvent(EVENT_CLOSE);
+    this.open = false;
+    this.dispatchEvent(event);
+  }
+  render() {
+    return this.open ? html`<aside
+          class=${cvaContainer({
+      variant: this.variant,
+      status: this.status
+    })}
+        >
+          <div
+            class=${cvaIconContainer({
+      status: this.status
+    })}
+          >
+            <daikin-icon
+              icon=${this.status}
+              color="white"
+              size="xl"
+            ></daikin-icon>
+          </div>
+          <div
+            class="flex justify-between items-center gap-5 p-5 flex-[1_0_auto]"
+          >
+            <div
+              class=${cvaContent({
+      line: this.line
+    })}
+            >
+              ${this.title && html`<header class="text-[18px] font-bold flex-none">
+                ${this.title}
+              </header>`}
+              <p class="text-[18px] flex-none">${this.description}</p>
+            </div>
+            ${this.closeButton ? html`
+                  <div class="flex items-center gap-5">
+                    <button
+                      aria-label="Close"
+                      class="relative flex w-5 h-5"
+                      @click=${this._handleClickClose}
+                    >
+                      <daikin-icon
+                        icon="close"
+                        size="l"
+                        color="default"
+                      ></daikin-icon>
+                    </button>
+                  </div>
+                ` : null}
+          </div>
+        </aside>` : null;
+  }
+};
+DaikinNotification.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      --colorFeedbackPositive: ${unsafeCSS(colorFeedbackPositive)};
+      --colorFeedbackWarning: ${unsafeCSS(colorFeedbackWarning)};
+      --colorFeedbackNegative: ${unsafeCSS(colorFeedbackNegative)};
+      --colorFeedbackAlarm: #f68c54;
+      --colorFeedbackInformation: #0097e0;
+
+      display: block;
+    }
+
+    :host([variant="toast"]) {
+      width: max-content;
+    }
+
+    :host([variant="inline"]) {
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], DaikinNotification.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], DaikinNotification.prototype, "description", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinNotification.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String })
+], DaikinNotification.prototype, "status", 2);
+__decorateClass([
+  property({ type: String })
+], DaikinNotification.prototype, "line", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinNotification.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DaikinNotification.prototype, "closeButton", 2);
+DaikinNotification = __decorateClass([
+  customElement("daikin-notification")
+], DaikinNotification);
+export {
+  DaikinNotification
+};

package/dist/es-dev/components/notification/index.d.ts

@@ -0,0 +1 @@
+export * from './daikin-notification';

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

@@ -0,0 +1,4 @@
+import { DaikinNotification } from "./daikin-notification.js";
+export {
+  DaikinNotification
+};

package/dist/es-dev/components/panel-switcher/daikin-panel-switcher.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+import { ARIARole } from '../../lit-analyzer-types';
+/**
+ * The panel switcher component is a child element within the `daikin-tab-group` that controls the display of the content panels associated with each tab.
+ * When a user selects a tab, the panel switcher component ensures the corresponding content panel is shown while hiding the others.
+ *
+ * Hierarchy:
+ * - `daikin-tab-group` > `daikin-panel-switcher` ("panels" slot)
+ *
+ * @slot panel:\<name\> - A slot for each panel content.
+ *
+ * @example
+ *
+ * ```html
+ * <!-- Note that `panels` must be set via property. -->
+ * <daikin-panel-switcher
+ *   class="block w-full h-full"
+ *   .panels="${['foo', 'bar', 'baz']}"
+ *   value="foo"
+ *   panelRole="tabpanel"
+ * >
+ *   <div slot="panel:foo">Foo Panel (visible)</div>
+ *   <div slot="panel:bar">Bar Panel (hidden)</div>
+ *   <div slot="panel:baz">Baz Panel (hidden)</div>
+ * </daikin-panel-switcher>
+ * ```
+ */
+export declare class DaikinPanelSwitcher extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * The panel to be displayed.
+     * Set automatically by `daikin-tab-group` if used within it.
+     */
+    value: string;
+    /**
+     * Set automatically by `daikin-tab-group` if used within it.
+     */
+    panels: string[];
+    /**
+     * `role` attribute of the container.
+     * Set to "tablist" automatically by `daikin-tab-group` if used within it.
+     */
+    panelRole: ARIARole | null;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-panel-switcher": DaikinPanelSwitcher;
+    }
+}