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

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

@@ -0,0 +1,62 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from '../../type-utils';
+
+declare const cvaContainer: (props?: ({
+    variant?: "toast" | "inline" | null | undefined;
+    status?: "positive" | "negative" | "warning" | "alarm" | "information" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const cvaIconContainer: (props?: ({
+    status?: "positive" | "negative" | "warning" | "alarm" | "information" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const cvaIcon: (props?: ({
+    status?: "positive" | "negative" | "warning" | "alarm" | "information" | 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 cvaIcon | typeof cvaContent>;
+/**
+ * Primary UI component for user interaction
+ */
+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/cjs/components/notification/index.d.ts

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

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

@@ -0,0 +1,150 @@
+"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 cvaRadio = classVarianceAuthority.cva(
+  [
+    "appearance-none",
+    "relative",
+    "after:absolute",
+    "after:i-daikin-radio-unchecked",
+    "checked:after:i-daikin-radio-checked",
+    "enabled:after:text-[#8C8C8C]",
+    "enabled:checked:after:text-daikinBlue-500",
+    "aria-controllable:hover:after:i-daikin-radio-checked",
+    "aria-controllable:hover:after:text-daikinBlue-300",
+    "aria-controllable:active:after:i-daikin-radio-checked",
+    "aria-controllable:active:after:text-daikinBlue-500",
+    "focus-visible:outline-none",
+    "aria-controllable:focus-visible:after:i-daikin-radio-unchecked",
+    "aria-controllable:focus-visible:checked:after:i-daikin-radio-checked",
+    "aria-controllable:focus-visible:after:text-daikinBlue-700",
+    "disabled:after:text-daikinNeutral-200"
+  ],
+  {
+    variants: {
+      size: {
+        small: ["w-[14px]", "h-[14px]"],
+        large: ["w-4", "h-4"]
+      }
+    }
+  }
+);
+const cvaLabel = classVarianceAuthority.cva(
+  ["leading-8", "not-italic", "font-normal", "align-middle"],
+  {
+    variants: {
+      size: {
+        small: ["text-sm"],
+        large: ["text-base"]
+      }
+    }
+  }
+);
+exports.DaikinRadio = class DaikinRadio 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.checked = false;
+    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);
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("checked")) {
+      this._updateFormValue();
+    }
+  }
+  _handleChange(event) {
+    var _a;
+    const input = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("input");
+    this.checked = input.checked;
+    this._updateFormValue();
+    const newEvent = new Event("change", event);
+    this.dispatchEvent(newEvent);
+  }
+  render() {
+    const labelClassName = cvaLabel({ size: this.size });
+    const radioClassName = cvaRadio({ size: this.size });
+    const labelText = this.label ? lit.html`<span class="${labelClassName}">${this.label}</span>` : lit.html``;
+    const inputTag = lit.html`<input
+      class=${radioClassName}
+      type="radio"
+      name=${this.name}
+      value=${this.value}
+      aria-readonly=${this.readonly}
+      ?disabled=${this.disabled}
+      .checked=${this.checked}
+      @click=${this._handleClick}
+      @change=${this._handleChange}
+    />`;
+    const inputArea = this.labelPosition === "left" ? lit.html`${labelText}${inputTag}` : lit.html`${inputTag}${labelText}`;
+    return lit.html`<label
+      class="inline-flex w-full h-full gap-[8px] items-center font-daikinSerif"
+      >${inputArea}</label
+    >`;
+  }
+};
+exports.DaikinRadio.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-block;
+    }
+  `;
+exports.DaikinRadio.formAssociated = true;
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinRadio.prototype, "label", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinRadio.prototype, "size", 2);
+__decorateClass([
+  decorators_js.property({ type: String, attribute: "label-position" })
+], exports.DaikinRadio.prototype, "labelPosition", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinRadio.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinRadio.prototype, "readonly", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinRadio.prototype, "checked", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinRadio.prototype, "name", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinRadio.prototype, "value", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinRadio.prototype, "error", 2);
+exports.DaikinRadio = __decorateClass([
+  decorators_js.customElement("daikin-radio")
+], exports.DaikinRadio);

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

@@ -0,0 +1,66 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from '../../type-utils';
+
+declare const cvaRadio: (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 RadioVariantProps = MergeVariantProps<typeof cvaRadio | typeof cvaLabel>;
+/**
+ * Primary UI component for user interaction
+ */
+export declare class DaikinRadio extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    private _handleClick;
+    static readonly formAssociated = true;
+    private _internals;
+    private _updateFormValue;
+    updated(changedProperties: Map<string, unknown>): void;
+    private _handleChange;
+    /**
+     * Specify the label text for the radio
+     */
+    label: string;
+    /**
+     * Specify the component size
+     */
+    size: RadioVariantProps["size"];
+    /**
+     * Specify the label position
+     * when `left` the label will be in left of radio, when `right` label will be in right of radio
+     */
+    labelPosition: "left" | "right";
+    /**
+     * Specify whether the Radio should be disabled
+     */
+    disabled: boolean;
+    /**
+     * Specify whether the radio is read only
+     */
+    readonly: boolean;
+    /**
+     * Specify whether the radio is be checked
+     */
+    checked: boolean;
+    /**
+     * The form name.
+     */
+    name: string;
+    /**
+     * The form value.
+     */
+    value: string;
+    /**
+     * Specify whether the Radio is in a error state
+     */
+    error: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-radio": DaikinRadio;
+    }
+}
+export {};

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

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

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

@@ -0,0 +1,137 @@
+"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 ifDefined_js = require("lit/directives/if-defined.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 cvaInput = classVarianceAuthority.cva(
+  [
+    "w-[340px]",
+    "h-12",
+    "text-daikinNeutral-900",
+    "border",
+    "border-solid",
+    "px-[9px]",
+    "rounded-[6px]",
+    "font-daikinSerif",
+    "placeholder:text-daikinNeutral-200",
+    "enabled:hover:outline",
+    "enabled:hover:outline-2",
+    "enabled:hover:outline-[--text-input-outline-color-hover]",
+    "enabled:active:outline",
+    "enabled:active:outline-2",
+    "enabled:active:outline-[--text-input-outline-color-active]",
+    "focus-visible:outline",
+    "focus-visible:outline-2",
+    "focus-visible:outline-[--text-input-outline-color-active]",
+    "disabled:text-[--text-input-outline-color-disabled]",
+    "disabled:bg-[--text-input-background-color]",
+    "disabled:border-[--text-input-outline-color-disabled]"
+  ],
+  {
+    variants: {
+      variant: {
+        normal: ["border-daikinNeutral-600"],
+        error: ["bg-daikinRed-50", "border-[--text-input-border-color-error]"]
+      }
+    }
+  }
+);
+exports.DaikinTextInput = class DaikinTextInput extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this._internals = this.attachInternals();
+    this.value = "";
+    this.type = "text";
+    this.placeholder = "";
+    this.disabled = false;
+    this.readonly = false;
+    this.error = false;
+  }
+  _handleInput(e) {
+    this.value = e.target.value;
+    this._internals.setFormValue(this.value);
+  }
+  render() {
+    const textInputInputClassName = cvaInput({
+      variant: !this.disabled && this.error ? "error" : "normal"
+    });
+    return lit.html`<input
+      class=${textInputInputClassName}
+      type=${this.type}
+      value=${this.value}
+      placeholder=${this.placeholder}
+      name=${ifDefined_js.ifDefined(this.name)}
+      maxlength=${ifDefined_js.ifDefined(this.maxlength)}
+      autocomplete=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined_js.ifDefined(this.autocomplete)}
+      ?disabled=${this.disabled}
+      ?readonly=${this.readonly}
+      @change=${(e) => this.dispatchEvent(new Event("change", e))}
+      @input=${this._handleInput}
+    />`;
+  }
+  updated(changedProperties) {
+    if (!changedProperties.has("value")) {
+      return;
+    }
+    this._internals.setFormValue(this.value);
+  }
+};
+exports.DaikinTextInput.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      --text-input-background-color: #ffffff;
+      --text-input-border-color-error: ${lit.unsafeCSS(variables_js.colorFeedbackNegative)};
+      --text-input-outline-color-disabled: #dcdcdc;
+      --text-input-outline-color-active: #cecece;
+      --text-input-outline-color-hover: #54c3f1;
+
+      display: block;
+      width: max-content;
+    }
+  `;
+exports.DaikinTextInput.formAssociated = true;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinTextInput.prototype, "value", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinTextInput.prototype, "type", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinTextInput.prototype, "placeholder", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTextInput.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTextInput.prototype, "readonly", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinTextInput.prototype, "name", 2);
+__decorateClass([
+  decorators_js.property({ type: Number })
+], exports.DaikinTextInput.prototype, "maxlength", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinTextInput.prototype, "autocomplete", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTextInput.prototype, "error", 2);
+exports.DaikinTextInput = __decorateClass([
+  decorators_js.customElement("daikin-text-input")
+], exports.DaikinTextInput);

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

@@ -0,0 +1,54 @@
+import { LitElement, PropertyValues } from 'lit';
+
+/**
+ * Primary UI component for user interaction
+ */
+export declare class DaikinTextInput extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    static readonly formAssociated = true;
+    private _internals;
+    /**
+     * Field value
+     */
+    value: string;
+    /**
+     * Type of field
+     */
+    type: "text" | "email" | "tel" | "search";
+    /**
+     * Placeholder text
+     */
+    placeholder: string;
+    /**
+     * Whether the field is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the field is readonly
+     */
+    readonly: boolean;
+    /**
+     * Name of the input field control used in the form
+     */
+    name?: string;
+    /**
+     * Maximum length in field values
+     */
+    maxlength?: number;
+    /**
+     * Specify auto-completion values
+     */
+    autocomplete?: HTMLInputElement["autocomplete"];
+    /**
+     * Error state. Ignored if the `disabled` is `true`.
+     */
+    error: boolean;
+    private _handleInput;
+    render(): import('lit-html').TemplateResult<1>;
+    updated(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-text-input": DaikinTextInput;
+    }
+}

package/dist/cjs/components/text-input/index.d.ts

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

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

@@ -0,0 +1,168 @@
+"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 ifDefined_js = require("lit/directives/if-defined.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 cvaTextarea = classVarianceAuthority.cva(
+  [
+    "w-[340px]",
+    "h-[120px]",
+    "text-daikinNeutral-900",
+    "border",
+    "border-solid",
+    "px-[9px]",
+    "py-1",
+    "font-daikinSerif",
+    "rounded-[6px]",
+    "placeholder:text-daikinNeutral-200",
+    "enabled:hover:outline",
+    "enabled:hover:outline-2",
+    "enabled:hover:outline-[--text-input-outline-color-hover]",
+    "enabled:active:outline",
+    "enabled:active:outline-2",
+    "enabled:active:outline-[--text-input-outline-color-active]",
+    "focus-visible:outline",
+    "focus-visible:outline-2",
+    "focus-visible:outline-[--text-input-outline-color-active]",
+    "disabled:text-[--text-input-outline-color-disabled]",
+    "disabled:bg-[--text-input-background-color]",
+    "disabled:border-[--text-input-outline-color-disabled]"
+  ],
+  {
+    variants: {
+      variant: {
+        normal: ["border-daikinNeutral-600"],
+        error: ["bg-daikinRed-50", "border-[--text-input-border-color-error]"]
+      }
+    }
+  }
+);
+const cvaCounter = classVarianceAuthority.cva(
+  ["absolute", "top-[-24px]", "right-0", "text-[12px]", "font-daikinSerif"],
+  {
+    variants: {
+      variant: {
+        normal: ["text-daikinNeutral-900"],
+        disabled: ["text-[--text-input-outline-color-disabled]"]
+      }
+    }
+  }
+);
+exports.DaikinTextarea = class DaikinTextarea extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this._internals = this.attachInternals();
+    this.value = "";
+    this.placeholder = "";
+    this.disabled = false;
+    this.required = false;
+    this.readonly = false;
+    this.maxlength = 100;
+    this.error = false;
+    this.counter = false;
+    this._textareaCounter = 0;
+  }
+  _updateValueAndCounter(value) {
+    this._internals.setFormValue(value);
+    this._textareaCounter = [...value].length;
+  }
+  _handleInput(e) {
+    this.value = e.target.value;
+    this._updateValueAndCounter(this.value);
+  }
+  render() {
+    const textareaClassName = cvaTextarea({
+      variant: !this.disabled && this.error ? "error" : "normal"
+    });
+    const textareaCounterClassName = cvaCounter({
+      variant: this.disabled ? "disabled" : "normal"
+    });
+    return lit.html`<textarea
+        class=${textareaClassName}
+        .value=${this.value}
+        placeholder=${this.placeholder}
+        maxlength=${this.maxlength}
+        autocomplete=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined_js.ifDefined(this.autocomplete)}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        @change=${(e) => this.dispatchEvent(new Event("change", e))}
+        @input=${this._handleInput}
+        @keydown=${this._handleInput}
+      ></textarea>
+      ${this.counter ? lit.html`
+            <span class=${textareaCounterClassName}
+              >${this._textareaCounter}/${this.maxlength}</span
+            >
+          ` : null}`;
+  }
+  updated(changedProperties) {
+    if (!changedProperties.has("value")) {
+      return;
+    }
+    this._updateValueAndCounter(this.value);
+  }
+};
+exports.DaikinTextarea.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      --text-input-border-color-error: ${lit.unsafeCSS(variables_js.colorFeedbackNegative)};
+      --text-input-outline-color-hover: #54c3f1;
+      --text-input-outline-color-disabled: #dcdcdc;
+      --text-input-outline-color-active: #cecece;
+      --text-input-background-color: #ffffff;
+
+      display: block;
+      width: max-content;
+      height: 120px;
+      position: relative;
+    }
+  `;
+exports.DaikinTextarea.formAssociated = true;
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinTextarea.prototype, "value", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinTextarea.prototype, "placeholder", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTextarea.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTextarea.prototype, "required", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTextarea.prototype, "readonly", 2);
+__decorateClass([
+  decorators_js.property({ type: Number, reflect: true })
+], exports.DaikinTextarea.prototype, "maxlength", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinTextarea.prototype, "autocomplete", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTextarea.prototype, "error", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTextarea.prototype, "counter", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinTextarea.prototype, "_textareaCounter", 2);
+exports.DaikinTextarea = __decorateClass([
+  decorators_js.customElement("daikin-textarea")
+], exports.DaikinTextarea);