@daikin-oss/design-system-web-components 0.7.0 → 1.0.0

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

@@ -1,197 +0,0 @@
-import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html, nothing } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { EVENT_CLOSE } from "../../constants/events.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 cvaContainer = cva(
-  [
-    "flex",
-    "box-border",
-    "bg-ddt-color-common-background-default",
-    "overflow-hidden",
-    "font-daikinSerif"
-  ],
-  {
-    variants: {
-      variant: {
-        toast: [
-          "border-2",
-          "border-solid",
-          "rounded-lg",
-          "shadow-notification"
-        ],
-        inline: []
-      },
-      status: {
-        positive: ["border-ddt-color-common-success"],
-        negative: ["border-ddt-color-common-danger-default"],
-        warning: ["border-ddt-color-common-warning"],
-        alarm: ["border-ddt-color-common-alarm"],
-        information: ["border-ddt-color-common-information"]
-      }
-    },
-    defaultVariants: {
-      variant: "toast",
-      status: "positive"
-    }
-  }
-);
-const cvaIconContainer = cva(
-  [
-    "flex-none",
-    "flex",
-    "justify-center",
-    "items-center",
-    "w-[2.75rem]",
-    "after:size-6",
-    "after:text-ddt-color-common-background-default"
-  ],
-  {
-    variants: {
-      status: {
-        positive: [
-          "bg-ddt-color-common-success",
-          "after:i-daikin-status-positive"
-        ],
-        negative: [
-          "bg-ddt-color-common-danger-default",
-          "after:i-daikin-status-negative"
-        ],
-        warning: [
-          "bg-ddt-color-common-warning",
-          "after:i-daikin-status-warning"
-        ],
-        alarm: ["bg-ddt-color-common-alarm", "after:i-daikin-status-alarm"],
-        information: [
-          "bg-ddt-color-common-information",
-          "after:i-daikin-status-information"
-        ]
-      }
-    },
-    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.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() {
-    const role = {
-      inline: "status",
-      toast: "alert"
-    }[this.variant];
-    return this.open ? html`<aside
-          class=${cvaContainer({
-      variant: this.variant,
-      status: this.status
-    })}
-          role=${role}
-        >
-          <div
-            class=${cvaIconContainer({
-      status: this.status
-    })}
-          ></div>
-          <div
-            class="flex justify-between items-center gap-5 p-5 text-lg flex-auto flex-shrink-0"
-          >
-            <div
-              class=${cvaContent({
-      line: this.line
-    })}
-            >
-              <div class="font-bold flex-none">
-                <slot name="title"></slot>
-              </div>
-              <div class="flex-none">
-                <slot name="description"></slot>
-              </div>
-            </div>
-            ${this.closeButton ? html`
-                  <div class="flex items-center gap-5">
-                    <button
-                      aria-label="Close"
-                      class="relative flex w-5 h-5 after:i-daikin-notification-close after:size-5 after:text-[#a0a0a0]"
-                      @click=${this._handleClickClose}
-                    ></button>
-                  </div>
-                ` : nothing}
-          </div>
-        </aside>` : nothing;
-  }
-};
-DaikinNotification.styles = css`
-    ${unsafeCSS(tailwindStyles)}
-
-    :host {
-      display: block;
-    }
-
-    :host([variant="toast"]) {
-      width: max-content;
-    }
-
-    :host([variant="inline"]) {
-      width: 100%;
-    }
-  `;
-__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, attribute: "close-button" })
-], DaikinNotification.prototype, "closeButton", 2);
-DaikinNotification = __decorateClass([
-  customElement("daikin-notification")
-], DaikinNotification);
-export {
-  DaikinNotification
-};

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

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

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

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

package/dist/es-dev/constants/events.js

@@ -1,4 +0,0 @@
-const EVENT_CLOSE = "close";
-export {
-  EVENT_CLOSE
-};

package/icons/arrow-up.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3 10L13 10L8 5L3 10Z" fill="#414141"/>
-</svg>

package/icons/status-success.svg

@@ -1,6 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C12.416 0 16 3.584 16 8C16 12.416 12.416 16 8 16C3.584 16 0 12.416 0 8C0 3.584 3.584 0 8 0ZM6.84425 9.18186L10.5243 5.44774C10.8478 5.12217 11.3778 5.11679 11.708 5.43573C11.7119 5.43948 11.7602 5.4879 11.7602 5.4879C12.0799 5.80891 12.0799 6.32322 11.7602 6.64423L6.84425 11.6L4.23978 8.9783C3.92202 8.65924 3.91981 8.14874 4.23479 7.82702L4.26579 7.79535C4.58673 7.46755 5.11644 7.4583 5.44894 7.7747C5.45433 7.77983 6.84425 9.18186 6.84425 9.18186Z" fill="currentColor"/>
-<mask style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C12.416 0 16 3.584 16 8C16 12.416 12.416 16 8 16C3.584 16 0 12.416 0 8C0 3.584 3.584 0 8 0ZM6.84425 9.18186L10.5243 5.44774C10.8478 5.12217 11.3778 5.11679 11.708 5.43573C11.7119 5.43948 11.7602 5.4879 11.7602 5.4879C12.0799 5.80891 12.0799 6.32322 11.7602 6.64423L6.84425 11.6L4.23978 8.9783C3.92202 8.65924 3.91981 8.14874 4.23479 7.82702L4.26579 7.79535C4.58673 7.46755 5.11644 7.4583 5.44894 7.7747C5.45433 7.77983 6.84425 9.18186 6.84425 9.18186Z" fill="white"/>
-</mask>
-</svg>