@daikin-oss/design-system-web-components 0.1.0 → 0.3.1

package/dist/cjs-dev/components/icon/daikin-icon.cjs

@@ -0,0 +1,96 @@
+"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");
+const icons = require("./icons.json.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 iconList = Object.keys(icons.icons);
+const iconClassMap = Object.fromEntries(
+  Object.entries(icons.icons).map(([name, object]) => [name, object.class])
+);
+const cvaIcon = classVarianceAuthority.cva(["block"], {
+  variants: {
+    icon: iconClassMap,
+    size: {
+      s: [`w-[--size-s]`, `h-[--size-s]`],
+      m: [`w-[--size-m]`, `h-[--size-m]`],
+      l: [`w-[--size-l]`, `h-[--size-l]`],
+      xl: [`w-[--size-xl]`, `h-[--size-xl]`]
+    },
+    color: {
+      black: ["text-black"],
+      white: ["text-white"],
+      default: ["text-[--default-color]"],
+      current: []
+      // uses `currentColor`
+    }
+  }
+});
+exports.DaikinIcon = class DaikinIcon extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.icon = null;
+    this.color = "default";
+    this.size = "m";
+  }
+  render() {
+    var _a;
+    const defaultColor = (_a = icons.icons[this.icon ?? ""]) == null ? void 0 : _a.color;
+    {
+      if (!this.icon) {
+        console.warn("icon property is not specified");
+      } else if (!(this.icon in icons.icons)) {
+        console.warn(`There is no icon named "${this.icon}".`);
+      } else if (this.color === "default" && !defaultColor) {
+        console.warn(`The icon "${this.icon}" does not have a default color.`);
+      }
+    }
+    return lit.html`<span
+      class=${cvaIcon({
+      icon: this.icon,
+      color: this.color,
+      size: this.size
+    })}
+      style=${`--default-color:${defaultColor ?? "#000000"}`}
+      role="presentation"
+    ></span>`;
+  }
+};
+exports.DaikinIcon.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      --size-s: ${lit.unsafeCSS(variables_js.space12)};
+      --size-m: ${lit.unsafeCSS(variables_js.space16)};
+      --size-l: ${lit.unsafeCSS(variables_js.space20)};
+      --size-xl: ${lit.unsafeCSS(variables_js.space24)};
+
+      display: block;
+      width: max-content;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinIcon.prototype, "icon", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinIcon.prototype, "color", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinIcon.prototype, "size", 2);
+exports.DaikinIcon = __decorateClass([
+  decorators_js.customElement("daikin-icon")
+], exports.DaikinIcon);
+exports.iconList = iconList;

package/dist/cjs-dev/components/icon/daikin-icon.d.ts

@@ -0,0 +1,49 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from '../../type-utils';
+import { icons } from './icons.json';
+
+export declare const iconList: string[];
+export type IconType = keyof typeof icons;
+declare const cvaIcon: (props?: ({
+    icon?: string | number | null | undefined;
+    size?: "s" | "m" | "l" | "xl" | null | undefined;
+    color?: "black" | "white" | "default" | "current" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
+/**
+ * The icon component is a versatile UI element used to display small graphical symbols or images that represent actions, objects, or concepts within an application.
+ * The icon set is provided by DDS.
+ *
+ * To use an arbitrary color, specify `"current"` for the `color` property and set the `color` CSS property to the color you want to use.
+ *
+ * If you try to use an icon that does not exist, a blank space will be displayed.
+ * In the development build, warnings will be displayed in the console, so please check there if you encounter any unexpected behavior.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-icon icon="information" color="black" size="m"></daikin-icon>
+ * ```
+ */
+export declare class DaikinIcon extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Specify the name of the icon
+     */
+    icon: IconType | null;
+    /**
+     * Specify icon color
+     */
+    color: IconVariantProps["color"];
+    /**
+     * Specify the height and width of the icon
+     */
+    size: IconVariantProps["size"];
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-icon": DaikinIcon;
+    }
+}
+export default DaikinIcon;

package/dist/cjs-dev/components/icon/icons.json.cjs

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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
+  }
+};
+exports.icons = icons;

package/dist/cjs-dev/components/icon/icons.json.d.ts

@@ -0,0 +1,31 @@
+declare const _default: {
+  "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 default _default;

package/dist/cjs-dev/components/icon/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinIcon = require("./daikin-icon.cjs");
+Object.defineProperty(exports, "DaikinIcon", {
+  enumerable: true,
+  get: () => daikinIcon.DaikinIcon
+});
+exports.iconList = daikinIcon.iconList;

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

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

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

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinAccordion = require("./accordion/daikin-accordion.cjs");
+const daikinAccordionItem = require("./accordion-item/daikin-accordion-item.cjs");
+const daikinButton = require("./button/daikin-button.cjs");
+const daikinCheckbox = require("./checkbox/daikin-checkbox.cjs");
+const daikinIcon = require("./icon/daikin-icon.cjs");
+const daikinInputGroup = require("./input-group/daikin-input-group.cjs");
+const daikinNotification = require("./notification/daikin-notification.cjs");
+const daikinPanelSwitcher = require("./panel-switcher/daikin-panel-switcher.cjs");
+const daikinRadio = require("./radio/daikin-radio.cjs");
+const daikinTab = require("./tab/daikin-tab.cjs");
+const daikinTabGroup = require("./tab-group/daikin-tab-group.cjs");
+const daikinTextInput = require("./text-input/daikin-text-input.cjs");
+const daikinTextarea = require("./textarea/daikin-textarea.cjs");
+const daikinToggle = require("./toggle/daikin-toggle.cjs");
+Object.defineProperty(exports, "DaikinAccordion", {
+  enumerable: true,
+  get: () => daikinAccordion.DaikinAccordion
+});
+Object.defineProperty(exports, "DaikinAccordionItem", {
+  enumerable: true,
+  get: () => daikinAccordionItem.DaikinAccordionItem
+});
+Object.defineProperty(exports, "DaikinButton", {
+  enumerable: true,
+  get: () => daikinButton.DaikinButton
+});
+Object.defineProperty(exports, "DaikinCheckbox", {
+  enumerable: true,
+  get: () => daikinCheckbox.DaikinCheckbox
+});
+Object.defineProperty(exports, "DaikinIcon", {
+  enumerable: true,
+  get: () => daikinIcon.DaikinIcon
+});
+exports.iconList = daikinIcon.iconList;
+Object.defineProperty(exports, "DaikinInputGroup", {
+  enumerable: true,
+  get: () => daikinInputGroup.DaikinInputGroup
+});
+Object.defineProperty(exports, "DaikinNotification", {
+  enumerable: true,
+  get: () => daikinNotification.DaikinNotification
+});
+Object.defineProperty(exports, "DaikinPanelSwitcher", {
+  enumerable: true,
+  get: () => daikinPanelSwitcher.DaikinPanelSwitcher
+});
+Object.defineProperty(exports, "DaikinRadio", {
+  enumerable: true,
+  get: () => daikinRadio.DaikinRadio
+});
+Object.defineProperty(exports, "DaikinTab", {
+  enumerable: true,
+  get: () => daikinTab.DaikinTab
+});
+Object.defineProperty(exports, "DaikinTabGroup", {
+  enumerable: true,
+  get: () => daikinTabGroup.DaikinTabGroup
+});
+Object.defineProperty(exports, "DaikinTextInput", {
+  enumerable: true,
+  get: () => daikinTextInput.DaikinTextInput
+});
+Object.defineProperty(exports, "DaikinTextarea", {
+  enumerable: true,
+  get: () => daikinTextarea.DaikinTextarea
+});
+Object.defineProperty(exports, "DaikinToggle", {
+  enumerable: true,
+  get: () => daikinToggle.DaikinToggle
+});

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

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

package/dist/cjs-dev/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-dev/components/input-group/daikin-input-group.d.ts

@@ -0,0 +1,73 @@
+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/cjs-dev/components/input-group/index.cjs

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

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

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