@daikin-oss/design-system-web-components 1.1.0 → 1.3.0-next.2

package/dist/es/components/button/daikin-button.js

@@ -1,10 +1,11 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
+import { DDSFormSubmitElement } from "../../base/dds-form-element.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -25,7 +26,6 @@ const cvaButton = cva(
     "font-daikinSerif",
     "font-bold",
     "rounded",
-    "px-3",
     "tracking-wide",
     "text-nowrap",
     "leading-[130%]",
@@ -65,34 +65,43 @@ const cvaButton = cva(
         ghost: ["text-[--color-primary]", "bg-[--color-secondary]"]
       },
       size: {
-        small: ["text-sm"],
-        medium: []
+        small: ["px-2", "text-sm"],
+        medium: ["px-3", "text-base"],
+        large: ["px-4", "text-xl"]
       }
     }
   }
 );
-const cvaIcon = cva([], {
+const cvaIcon = cva(["slotted:flex-none"], {
   variants: {
     size: {
       small: ["icon-size-4"],
-      medium: ["icon-size-6"]
+      medium: ["icon-size-6"],
+      large: ["icon-size-6"]
     }
   }
 });
-let DaikinButton = class extends DDSElement {
+let DaikinButton = class extends DDSFormSubmitElement {
   constructor() {
     super();
     this.variant = "fill";
+    this.type = "button";
     this.size = "medium";
     this.color = "default";
     this.disabled = false;
     this.href = null;
-    this.type = "button";
     this.buttonRole = null;
+    this.buttonAriaHaspopup = null;
+    this.buttonAriaExpanded = null;
     this.addEventListener("click", (event) => {
       if (this.disabled || this.type === "link" && this.href == null) {
         event.stopImmediatePropagation();
       }
+      if (this.type === "submit") {
+        this.requestSubmit();
+      } else if (this.type === "reset") {
+        this.reset();
+      }
     });
   }
   render() {
@@ -126,13 +135,15 @@ let DaikinButton = class extends DDSElement {
         ?disabled=${this.disabled}
         type=${this.type}
         role=${ifDefined(this.buttonRole ?? void 0)}
+        aria-haspopup=${ifDefined(this.buttonAriaHaspopup ?? void 0)}
+        aria-expanded=${ifDefined(this.buttonAriaExpanded ?? void 0)}
       >
         <slot name="left-icon" class=${cvaIcon({ size: this.size })}>
-          <span class="block -ml-1"></span>
+          <span class="flex-none block -ml-1"></span>
         </slot>
         <span class="px-2"><slot></slot></span>
         <slot name="right-icon" class=${cvaIcon({ size: this.size })}>
-          <span class="block -mr-1"></span>
+          <span class="flex-none block -mr-1"></span>
         </slot>
       </button>
     `;
@@ -163,10 +174,18 @@ DaikinButton.styles = css`
       min-width: 3.75em;
       height: 3rem;
     }
+
+    :host([size="large"]) {
+      min-width: 4.25em;
+      height: 4.5rem;
+    }
   `;
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinButton.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinButton.prototype, "type", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinButton.prototype, "size", 2);
@@ -179,12 +198,15 @@ __decorateClass([
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinButton.prototype, "href", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinButton.prototype, "type", 2);
 __decorateClass([
   property({ type: String, reflect: true, attribute: "button-role" })
 ], DaikinButton.prototype, "buttonRole", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "button-aria-haspopup" })
+], DaikinButton.prototype, "buttonAriaHaspopup", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "button-aria-expanded" })
+], DaikinButton.prototype, "buttonAriaExpanded", 2);
 __decorateClass([
   query("a,button")
 ], DaikinButton.prototype, "_focusableElement", 2);

package/dist/es/components/calendar/daikin-calendar.d.ts

@@ -0,0 +1,87 @@
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+/**
+ * The calendar component provides calendar elements. It has a function for selecting dates, and is also used in `daikin-date-picker`.
+ *
+ * @fires select - Fires when the date is selected.
+ * @fires selecting - Fires when the year or month is selected.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/calendar/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-calendar></daikin-calendar>
+ * ```
+ */
+export declare class DaikinCalendar extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * The current value of the input, submitted as a name/value pair with form data.
+     */
+    value: string | null;
+    /**
+     * The minimum date.
+     * example: `1900-01-01`
+     */
+    min: string;
+    /**
+     * The maximum date.
+     * example: `2099-12-31`
+     */
+    max: string;
+    /**
+     * The month that is initially displayed when the date picker is opened.
+     * If there is a `value` attribute, this is ignored.
+     */
+    defaultValue: string | null;
+    /**
+     * _Internal use._
+     *
+     * Calendar view (day, month, or year)
+     *
+     * @private
+     * Intended for use only by `daikin-date-picker`.
+     */
+    view: "year" | "month" | "day";
+    private _dateToBeFocused;
+    private get _value();
+    private get _min();
+    private get _max();
+    private get _defaultValue();
+    /**
+     * The date that serves as the basis for the current view.
+     * The year and month are used to determine the display range, and the date is used to update the value.
+     * The range of viewDate is not affected by min or max.
+     */
+    private _viewDate;
+    /**
+     * The date that serves as the basis for the current view.
+     */
+    get viewDate(): Date;
+    private _emitSelect;
+    private _emitSelecting;
+    private _canNavigateMonth;
+    private _navigateMonth;
+    private _handleCalendarClick;
+    private _handleMonthClick;
+    private _handleYearAndMonthPickerClick;
+    private _handleCalendarKeyDown;
+    private _handleYearAndMonthPickerKeyDown;
+    private _createYearAndMonthPickerContainer;
+    private _createYearAndMonthPickerButton;
+    private _createYearPicker;
+    private _createMonthPicker;
+    private _createDatePicker;
+    render(): TemplateResult<1>;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected updated(changedProperties: PropertyValues<this> & PropertyValues<{
+        _viewDate: Date;
+    }>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-calendar": DaikinCalendar;
+    }
+}