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

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

@@ -1,68 +0,0 @@
-import { LitElement, PropertyValues } from 'lit';
-/**
- * The text input component is a UI element that allows users to input single-line text data.
- * It functions similarly to the HTML `<input type="text">` tag, providing a simple and efficient way for users to enter and edit short pieces of texts, such as names, email addresses, or search queries.
- * Can be used within `daikin-input-group` component.
- *
- * Hierarchies:
- * - `daikin-text-input` (can be used solely)
- * - `daikin-input-group` > `daikin-text-input`
- *
- * @fires change - A cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input>` element.
- *
- * @example
- *
- * ```html
- * <!-- See `daikin-input-group` component for complete example. -->
- * <daikin-text-input name="name"></daikin-text-input>
- * ```
- */
-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.cjs

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const daikinTextInput = require("./daikin-text-input.cjs");
-Object.defineProperty(exports, "DaikinTextInput", {
-  enumerable: true,
-  get: () => daikinTextInput.DaikinTextInput
-});

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

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

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

@@ -1,168 +0,0 @@
-"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);

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

@@ -1,70 +0,0 @@
-import { LitElement, PropertyValues } from 'lit';
-/**
- * The textarea component is designed for multiline text input, similar to the HTML `<textarea>` tag.
- * It is ideal for situations where users need to enter longer pieces of text, such as comments, descriptions, or messages.
- * Can be used within `daikin-input-group` component.
- *
- * Hierarchies:
- * - `daikin-textarea` (can be used solely)
- * - `daikin-input-group` > `daikin-textarea`
- *
- * @fires change - A cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<textarea>` element.
- *
- * @example
- *
- * ```html
- * <!-- See `daikin-input-group` component for complete example. -->
- * <daikin-textarea name="name"></daikin-textarea>
- * ```
- */
-export declare class DaikinTextarea extends LitElement {
-    static readonly styles: import('lit').CSSResult;
-    static readonly formAssociated = true;
-    private _internals;
-    /**
-     * Field value
-     */
-    value: string;
-    /**
-     * Placeholder text
-     */
-    placeholder: string;
-    /**
-     * Whether the field is disabled
-     */
-    disabled: boolean;
-    /**
-     * Whether the field is required
-     */
-    required: boolean;
-    /**
-     * Whether the field is readonly
-     */
-    readonly: boolean;
-    /**
-     * Maximum length in field values
-     */
-    maxlength: number;
-    /**
-     * Specify auto-completion values
-     */
-    autocomplete?: HTMLInputElement["autocomplete"];
-    /**
-     * Error state. Ignored if the `disabled` is `true`.
-     */
-    error: boolean;
-    /**
-     * Whether to display a counter at the top of the text area
-     */
-    counter: boolean;
-    protected _textareaCounter: number;
-    private _updateValueAndCounter;
-    private _handleInput;
-    render(): import('lit-html').TemplateResult<1>;
-    updated(changedProperties: PropertyValues<this>): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "daikin-textarea": DaikinTextarea;
-    }
-}

package/dist/cjs/components/textarea/index.cjs

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const daikinTextarea = require("./daikin-textarea.cjs");
-Object.defineProperty(exports, "DaikinTextarea", {
-  enumerable: true,
-  get: () => daikinTextarea.DaikinTextarea
-});

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

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

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

@@ -1,50 +0,0 @@
-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;
-    }
-}

package/dist/cjs-dev/components/panel-switcher/index.cjs

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const daikinPanelSwitcher = require("./daikin-panel-switcher.cjs");
-Object.defineProperty(exports, "DaikinPanelSwitcher", {
-  enumerable: true,
-  get: () => daikinPanelSwitcher.DaikinPanelSwitcher
-});

package/dist/cjs-dev/components/panel-switcher/index.d.ts

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

package/dist/cjs-dev/components/tab-group/index.cjs

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const daikinTabGroup = require("./daikin-tab-group.cjs");
-Object.defineProperty(exports, "DaikinTabGroup", {
-  enumerable: true,
-  get: () => daikinTabGroup.DaikinTabGroup
-});

package/dist/cjs-dev/components/tab-group/index.d.ts

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

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

@@ -1,137 +0,0 @@
-"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-dev/components/text-input/daikin-text-input.d.ts

@@ -1,68 +0,0 @@
-import { LitElement, PropertyValues } from 'lit';
-/**
- * The text input component is a UI element that allows users to input single-line text data.
- * It functions similarly to the HTML `<input type="text">` tag, providing a simple and efficient way for users to enter and edit short pieces of texts, such as names, email addresses, or search queries.
- * Can be used within `daikin-input-group` component.
- *
- * Hierarchies:
- * - `daikin-text-input` (can be used solely)
- * - `daikin-input-group` > `daikin-text-input`
- *
- * @fires change - A cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input>` element.
- *
- * @example
- *
- * ```html
- * <!-- See `daikin-input-group` component for complete example. -->
- * <daikin-text-input name="name"></daikin-text-input>
- * ```
- */
-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-dev/components/text-input/index.cjs

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const daikinTextInput = require("./daikin-text-input.cjs");
-Object.defineProperty(exports, "DaikinTextInput", {
-  enumerable: true,
-  get: () => daikinTextInput.DaikinTextInput
-});

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

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