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

package/dist/cjs/components/checkbox/daikin-checkbox.cjs

@@ -0,0 +1,183 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const tailwind = require("../../tailwind.css.cjs");
+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 cvaCheckbox = classVarianceAuthority.cva(
+  [
+    "appearance-none",
+    "inline-block",
+    "relative",
+    "rounded-sm",
+    "border-solid",
+    "border-2",
+    "after:absolute",
+    "after:text-white",
+    "checked:after:i-daikin-checkbox-checked",
+    "indeterminate:after:i-daikin-checkbox-indeterminate",
+    "focus-visible:outline-none",
+    "border-daikinNeutral-400",
+    "enabled:indeterminate:border-daikinBlue-600",
+    "enabled:indeterminate:bg-daikinBlue-600",
+    "enabled:checked:border-daikinBlue-600",
+    "enabled:checked:bg-daikinBlue-600",
+    "aria-controllable:focus-visible:border-daikinBlue-700",
+    "aria-controllable:hover:border-daikinBlue-300",
+    "aria-controllable:active:border-daikinBlue-600",
+    "aria-controllable:checked:focus-visible:border-daikinBlue-700",
+    "aria-controllable:checked:focus-visible:border-daikinBlue-700",
+    "aria-controllable:checked:focus-visible:bg-daikinBlue-700",
+    "aria-controllable:checked:focus-visible:bg-daikinBlue-700",
+    "aria-controllable:checked:hover:border-daikinBlue-300",
+    "aria-controllable:checked:hover:bg-daikinBlue-300",
+    "aria-controllable:checked:active:border-daikinBlue-600",
+    "aria-controllable:checked:active:bg-daikinBlue-600",
+    "aria-controllable:indeterminate:active:border-daikinBlue-600",
+    "aria-controllable:indeterminate:active:bg-daikinBlue-600",
+    "aria-controllable:indeterminate:hover:border-daikinBlue-300",
+    "aria-controllable:indeterminate:hover:bg-daikinBlue-300",
+    "aria-controllable:indeterminate:focus-visible:border-daikinBlue-700",
+    "aria-controllable:indeterminate:focus-visible:bg-daikinBlue-700",
+    "disabled:border-daikinNeutral-200",
+    "disabled:bg-white",
+    "disabled:indeterminate:bg-daikinNeutral-200",
+    "disabled:checked:bg-daikinNeutral-200"
+  ],
+  {
+    variants: {
+      size: {
+        small: ["w-[18px]", "h-[18px]"],
+        large: ["w-5", "h-5"]
+      }
+    }
+  }
+);
+const cvaLabel = classVarianceAuthority.cva(
+  ["leading-8", "not-italic", "font-normal", "align-middle"],
+  {
+    variants: {
+      size: {
+        small: ["text-sm"],
+        large: ["text-base"]
+      }
+    },
+    defaultVariants: {
+      size: "small"
+    }
+  }
+);
+exports.DaikinCheckbox = class DaikinCheckbox extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this._internals = this.attachInternals();
+    this.label = "";
+    this.size = "small";
+    this.labelPosition = "right";
+    this.disabled = false;
+    this.readonly = false;
+    this.checkState = "unchecked";
+    this.name = "";
+    this.value = "";
+    this.error = false;
+  }
+  _handleClick(event) {
+    if (this.readonly || this.disabled) {
+      event.preventDefault();
+    }
+  }
+  _updateFormValue() {
+    this._internals.setFormValue(this.checked ? this.value : null);
+  }
+  get checked() {
+    return this.checkState === "checked";
+  }
+  _handleChange(event) {
+    if (!this._input) {
+      return;
+    }
+    this.checkState = this._input.checked ? "checked" : "unchecked";
+    this._updateFormValue();
+    this.dispatchEvent(new Event("change", event));
+  }
+  render() {
+    const checkboxClassName = cvaCheckbox({ size: this.size });
+    const labelClassName = cvaLabel({ size: this.size });
+    const isIndeterminate = this.checkState === "indeterminate";
+    const labelText = this.label ? lit.html`<span class=${labelClassName}>${this.label}</span>` : lit.html``;
+    const inputTag = lit.html`<input
+      class=${checkboxClassName}
+      type="checkbox"
+      name=${this.name}
+      value=${this.value}
+      aria-readonly=${this.readonly}
+      .indeterminate=${isIndeterminate}
+      .checked=${this.checked}
+      ?readonly=${this.readonly}
+      ?disabled=${this.disabled}
+      @change=${this._handleChange}
+      @click=${this._handleClick}
+    />`;
+    const content = this.labelPosition === "left" ? lit.html`${labelText}${inputTag}` : lit.html`${inputTag}${labelText}`;
+    return lit.html`<label
+      class="inline-flex gap-[10px] items-center font-daikinSerif"
+      >${content}</label
+    >`;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("checkState")) {
+      this._updateFormValue();
+    }
+  }
+};
+exports.DaikinCheckbox.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-block;
+    }
+  `;
+exports.DaikinCheckbox.formAssociated = true;
+__decorateClass([
+  decorators_js.query("input")
+], exports.DaikinCheckbox.prototype, "_input", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinCheckbox.prototype, "label", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinCheckbox.prototype, "size", 2);
+__decorateClass([
+  decorators_js.property({ type: String, attribute: "label-position" })
+], exports.DaikinCheckbox.prototype, "labelPosition", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinCheckbox.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinCheckbox.prototype, "readonly", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "check-state" })
+], exports.DaikinCheckbox.prototype, "checkState", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinCheckbox.prototype, "name", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinCheckbox.prototype, "value", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinCheckbox.prototype, "error", 2);
+exports.DaikinCheckbox = __decorateClass([
+  decorators_js.customElement("daikin-checkbox")
+], exports.DaikinCheckbox);

package/dist/cjs/components/checkbox/daikin-checkbox.d.ts

@@ -0,0 +1,68 @@
+import { LitElement, PropertyValues } from 'lit';
+import { MergeVariantProps } from '../../type-utils';
+
+declare const cvaCheckbox: (props?: ({
+    size?: "small" | "large" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const cvaLabel: (props?: ({
+    size?: "small" | "large" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type CheckboxVariantProps = MergeVariantProps<typeof cvaCheckbox | typeof cvaLabel>;
+/**
+ * Primary UI component for user interaction
+ */
+export declare class DaikinCheckbox extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    private _handleClick;
+    static readonly formAssociated = true;
+    private _internals;
+    private _updateFormValue;
+    private _input;
+    get checked(): boolean;
+    private _handleChange;
+    /**
+     * Specify the label text for check box
+     */
+    label: string;
+    /**
+     * Specify the component size
+     */
+    size: CheckboxVariantProps["size"];
+    /**
+     * Specify the label position
+     * when `left` the label will be in left of checkbox, when `right` label will be in right of checkbox
+     */
+    labelPosition: "left" | "right";
+    /**
+     * Specify whether the Checkbox should be disabled
+     */
+    disabled: boolean;
+    /**
+     * Specify whether the checkbox is read only
+     */
+    readonly: boolean;
+    /**
+     * Specify whether the checkbox is be checked
+     */
+    checkState: "unchecked" | "indeterminate" | "checked";
+    /**
+     * The form name.
+     */
+    name: string;
+    /**
+     * The value.
+     */
+    value: string;
+    /**
+     * Specify whether the Checkbox is in a error state
+     */
+    error: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+    updated(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-checkbox": DaikinCheckbox;
+    }
+}
+export {};

package/dist/cjs/components/checkbox/index.d.ts

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

package/dist/cjs/components/index.d.ts

@@ -0,0 +1,7 @@
+export * from './button';
+export * from './checkbox';
+export * from './input-group';
+export * from './notification';
+export * from './radio';
+export * from './text-input';
+export * from './textarea';

package/dist/cjs/components/input-group/daikin-input-group.cjs

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const variables_js = require("@daikin-oss/dds-tokens/js/daikin/Light/variables.js");
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const tailwind = require("../../tailwind.css.cjs");
+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 = classVarianceAuthority.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 = classVarianceAuthority.cva(["h-[22px]", "text-xs"], {
+  variants: {
+    variant: {
+      enabled: ["text-daikinNeutral-800"],
+      disabled: ["text-daikinNeutral-200"]
+    }
+  }
+});
+exports.DaikinInputGroup = class DaikinInputGroup extends lit.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 lit.html`<fieldset class="content" ?disabled=${this.disabled}>
+      <label class="flex flex-col justify-center w-max gap-1 font-daikinSerif">
+        ${this.label ? lit.html`<span class=${inputGroupLabelClassName}>${this.label}</span>` : null}
+        <slot @slotchange=${this._handleSlotChange}></slot>
+        ${this.helper && !this.error ? lit.html`<span class=${inputGroupHelperClassName}>${this.helper}</span>` : null}
+        ${!this.disabled && !!this.error ? lit.html`<span
+              class="flex gap-2 text-[--input-group-border-color-error] leading-[22px] before:i-daikin-input-group-error before:block before:w-[16px] before:h-[22px]"
+              >${this.error}</span
+            >` : null}
+      </label>
+    </fieldset>`;
+  }
+  updated() {
+    this._reflectSlotProperties();
+  }
+};
+exports.DaikinInputGroup.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      --input-group-border-color-error: ${lit.unsafeCSS(variables_js.colorFeedbackNegative)};
+
+      display: block;
+      width: max-content;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinInputGroup.prototype, "label", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinInputGroup.prototype, "helper", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinInputGroup.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinInputGroup.prototype, "required", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinInputGroup.prototype, "error", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinInputGroup.prototype, "textareaCounter", 2);
+__decorateClass([
+  decorators_js.queryAssignedElements({ selector: "daikin-textarea" })
+], exports.DaikinInputGroup.prototype, "_textareas", 2);
+__decorateClass([
+  decorators_js.queryAssignedElements({ selector: "daikin-text-input,daikin-textarea" })
+], exports.DaikinInputGroup.prototype, "_controls", 2);
+exports.DaikinInputGroup = __decorateClass([
+  decorators_js.customElement("daikin-input-group")
+], exports.DaikinInputGroup);

package/dist/cjs/components/input-group/daikin-input-group.d.ts

@@ -0,0 +1,47 @@
+import { LitElement } from 'lit';
+import { DaikinTextInput } from '../text-input/daikin-text-input';
+import { DaikinTextarea } from '../textarea/daikin-textarea';
+
+type ControlElement = DaikinTextInput | DaikinTextarea;
+/**
+ * Primary UI component for user interaction
+ */
+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/cjs/components/input-group/index.d.ts

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

package/dist/cjs/components/notification/daikin-notification.cjs

@@ -0,0 +1,209 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const variables_js = require("@daikin-oss/dds-tokens/js/daikin/Light/variables.js");
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const events = require("../../constants/events.cjs");
+const tailwind = require("../../tailwind.css.cjs");
+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 = classVarianceAuthority.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 = classVarianceAuthority.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 cvaIcon = classVarianceAuthority.cva(
+  [
+    "flex",
+    "justify-center",
+    "items-center",
+    "w-[24px]",
+    "h-[24px]",
+    "flex-none",
+    "text-white"
+  ],
+  {
+    variants: {
+      status: {
+        positive: ["i-daikin-notification-status-positive"],
+        negative: ["i-daikin-notification-status-negative"],
+        warning: ["i-daikin-notification-status-warning"],
+        alarm: ["i-daikin-notification-status-alarm"],
+        information: ["i-daikin-notification-status-information"]
+      }
+    },
+    defaultVariants: {
+      status: "positive"
+    }
+  }
+);
+const cvaContent = classVarianceAuthority.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"
+    }
+  }
+);
+exports.DaikinNotification = class DaikinNotification extends lit.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(events.EVENT_CLOSE);
+    this.open = false;
+    this.dispatchEvent(event);
+  }
+  render() {
+    return this.open ? lit.html`<aside
+          class=${cvaContainer({
+      variant: this.variant,
+      status: this.status
+    })}
+        >
+          <div
+            class=${cvaIconContainer({
+      status: this.status
+    })}
+          >
+            <span
+              class=${cvaIcon({
+      status: this.status
+    })}
+            ></span>
+          </div>
+          <div
+            class="flex justify-between items-center gap-5 p-5 flex-[1_0_auto]"
+          >
+            <div
+              class=${cvaContent({
+      line: this.line
+    })}
+            >
+              ${this.title && lit.html`<header class="text-[18px] font-bold flex-none">
+                ${this.title}
+              </header>`}
+              <p class="text-[18px] flex-none">${this.description}</p>
+            </div>
+            ${this.closeButton ? lit.html`
+                  <div class="flex items-center gap-5">
+                    <button
+                      aria-label="Close"
+                      class="relative flex w-5 h-5 text-daikinNeutral-500 i-daikin-notification-close"
+                      @click=${() => this._handleClickClose()}
+                    ></button>
+                  </div>
+                ` : null}
+          </div>
+        </aside>` : null;
+  }
+};
+exports.DaikinNotification.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      --colorFeedbackPositive: ${lit.unsafeCSS(variables_js.colorFeedbackPositive)};
+      --colorFeedbackWarning: ${lit.unsafeCSS(variables_js.colorFeedbackWarning)};
+      --colorFeedbackNegative: ${lit.unsafeCSS(variables_js.colorFeedbackNegative)};
+      --colorFeedbackAlarm: #f68c54;
+      --colorFeedbackInformation: #0097e0;
+
+      display: block;
+    }
+
+    :host([variant="toast"]) {
+      width: max-content;
+    }
+
+    :host([variant="inline"]) {
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinNotification.prototype, "title", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinNotification.prototype, "description", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinNotification.prototype, "variant", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinNotification.prototype, "status", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinNotification.prototype, "line", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinNotification.prototype, "open", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean })
+], exports.DaikinNotification.prototype, "closeButton", 2);
+exports.DaikinNotification = __decorateClass([
+  decorators_js.customElement("daikin-notification")
+], exports.DaikinNotification);