@daikin-oss/design-system-web-components 1.3.1 → 1.4.0-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +90 -0
- package/dist/cjs/base/dds-element.cjs +1 -1
- package/dist/cjs/components/badge/daikin-badge.cjs +133 -0
- package/dist/cjs/components/badge/daikin-badge.d.cts +85 -0
- package/dist/cjs/components/badge/index.cjs +7 -0
- package/dist/cjs/components/badge/index.d.cts +1 -0
- package/dist/cjs/components/button/daikin-button.d.cts +1 -1
- package/dist/cjs/components/calendar/daikin-calendar.cjs +28 -6
- package/dist/cjs/components/calendar/daikin-calendar.d.cts +9 -0
- package/dist/cjs/components/combobox/daikin-combobox.cjs +6 -3
- package/dist/cjs/components/date-picker/daikin-date-picker.cjs +26 -2
- package/dist/cjs/components/date-picker/daikin-date-picker.d.cts +5 -0
- package/dist/cjs/components/dropdown/daikin-dropdown.cjs +5 -7
- package/dist/cjs/components/icon/daikin-icon.cjs +4 -4
- package/dist/cjs/components/icon/daikin-icon.d.cts +8 -0
- package/dist/cjs/components/icon/icons.json.cjs +1 -1
- package/dist/cjs/components/icon/icons.json.d.cts +8 -0
- package/dist/cjs/components/icon-button/daikin-icon-button.d.cts +1 -1
- package/dist/cjs/components/index.cjs +10 -0
- package/dist/cjs/components/index.d.cts +2 -0
- package/dist/cjs/components/inline-notification/daikin-inline-notification.d.cts +4 -1
- package/dist/cjs/components/input-group/daikin-input-group.cjs +21 -6
- package/dist/cjs/components/menu/daikin-menu.cjs +21 -10
- package/dist/cjs/components/menu/daikin-menu.d.cts +6 -1
- package/dist/cjs/components/pagination/daikin-pagination.cjs +2 -1
- package/dist/cjs/components/progress-indicator-item/daikin-progress-indicator-item.cjs +2 -2
- package/dist/cjs/components/status-message/daikin-status-message.cjs +110 -0
- package/dist/cjs/components/status-message/daikin-status-message.d.cts +51 -0
- package/dist/cjs/components/status-message/index.cjs +7 -0
- package/dist/cjs/components/status-message/index.d.cts +1 -0
- package/dist/cjs/components/table/daikin-table.cjs +2 -2
- package/dist/cjs/components/time-picker/daikin-time-picker.cjs +1 -1
- package/dist/cjs/components/toast-notification/daikin-toast-notification.d.cts +4 -1
- package/dist/cjs/components/tree/daikin-tree.d.cts +2 -1
- package/dist/cjs/components/tree-item/daikin-tree-item.d.cts +6 -1
- package/dist/cjs/components/tree-section/daikin-tree-section.d.cts +6 -1
- package/dist/cjs/index.cjs +10 -0
- package/dist/cjs/tailwind.css.cjs +1 -1
- package/dist/cjs/utils/calendar-common.cjs +6 -0
- package/dist/cjs/utils/calendar-common.d.cts +7 -0
- package/dist/cjs/utils/notification-common.d.cts +1 -1
- package/dist/cjs-dev/base/dds-element.cjs +1 -1
- package/dist/cjs-dev/components/badge/daikin-badge.cjs +133 -0
- package/dist/cjs-dev/components/badge/daikin-badge.d.cts +85 -0
- package/dist/cjs-dev/components/badge/index.cjs +7 -0
- package/dist/cjs-dev/components/badge/index.d.cts +1 -0
- package/dist/cjs-dev/components/button/daikin-button.d.cts +1 -1
- package/dist/cjs-dev/components/calendar/daikin-calendar.cjs +28 -6
- package/dist/cjs-dev/components/calendar/daikin-calendar.d.cts +9 -0
- package/dist/cjs-dev/components/combobox/daikin-combobox.cjs +6 -3
- package/dist/cjs-dev/components/date-picker/daikin-date-picker.cjs +26 -2
- package/dist/cjs-dev/components/date-picker/daikin-date-picker.d.cts +5 -0
- package/dist/cjs-dev/components/dropdown/daikin-dropdown.cjs +5 -7
- package/dist/cjs-dev/components/icon/daikin-icon.cjs +4 -4
- package/dist/cjs-dev/components/icon/daikin-icon.d.cts +8 -0
- package/dist/cjs-dev/components/icon/icons.json.cjs +1 -1
- package/dist/cjs-dev/components/icon/icons.json.d.cts +8 -0
- package/dist/cjs-dev/components/icon-button/daikin-icon-button.d.cts +1 -1
- package/dist/cjs-dev/components/index.cjs +10 -0
- package/dist/cjs-dev/components/index.d.cts +2 -0
- package/dist/cjs-dev/components/inline-notification/daikin-inline-notification.d.cts +4 -1
- package/dist/cjs-dev/components/input-group/daikin-input-group.cjs +21 -6
- package/dist/cjs-dev/components/menu/daikin-menu.cjs +21 -10
- package/dist/cjs-dev/components/menu/daikin-menu.d.cts +6 -1
- package/dist/cjs-dev/components/pagination/daikin-pagination.cjs +2 -1
- package/dist/cjs-dev/components/progress-indicator-item/daikin-progress-indicator-item.cjs +2 -2
- package/dist/cjs-dev/components/status-message/daikin-status-message.cjs +110 -0
- package/dist/cjs-dev/components/status-message/daikin-status-message.d.cts +51 -0
- package/dist/cjs-dev/components/status-message/index.cjs +7 -0
- package/dist/cjs-dev/components/status-message/index.d.cts +1 -0
- package/dist/cjs-dev/components/table/daikin-table.cjs +2 -2
- package/dist/cjs-dev/components/time-picker/daikin-time-picker.cjs +1 -1
- package/dist/cjs-dev/components/toast-notification/daikin-toast-notification.d.cts +4 -1
- package/dist/cjs-dev/components/tree/daikin-tree.d.cts +2 -1
- package/dist/cjs-dev/components/tree-item/daikin-tree-item.d.cts +6 -1
- package/dist/cjs-dev/components/tree-section/daikin-tree-section.d.cts +6 -1
- package/dist/cjs-dev/index.cjs +10 -0
- package/dist/cjs-dev/tailwind.css.cjs +1 -1
- package/dist/cjs-dev/utils/calendar-common.cjs +6 -0
- package/dist/cjs-dev/utils/calendar-common.d.cts +7 -0
- package/dist/cjs-dev/utils/notification-common.d.cts +1 -1
- package/dist/es/base/dds-element.js +1 -1
- package/dist/es/components/badge/daikin-badge.d.ts +85 -0
- package/dist/es/components/badge/daikin-badge.js +134 -0
- package/dist/es/components/badge/index.d.ts +1 -0
- package/dist/es/components/badge/index.js +4 -0
- package/dist/es/components/button/daikin-button.d.ts +1 -1
- package/dist/es/components/calendar/daikin-calendar.d.ts +9 -0
- package/dist/es/components/calendar/daikin-calendar.js +29 -7
- package/dist/es/components/combobox/daikin-combobox.js +6 -3
- package/dist/es/components/date-picker/daikin-date-picker.d.ts +5 -0
- package/dist/es/components/date-picker/daikin-date-picker.js +26 -2
- package/dist/es/components/dropdown/daikin-dropdown.js +6 -8
- package/dist/es/components/icon/daikin-icon.d.ts +8 -0
- package/dist/es/components/icon/daikin-icon.js +4 -4
- package/dist/es/components/icon/icons.json.d.ts +8 -0
- package/dist/es/components/icon/icons.json.js +1 -1
- package/dist/es/components/icon-button/daikin-icon-button.d.ts +1 -1
- package/dist/es/components/index.d.ts +2 -0
- package/dist/es/components/index.js +4 -0
- package/dist/es/components/inline-notification/daikin-inline-notification.d.ts +4 -1
- package/dist/es/components/input-group/daikin-input-group.js +21 -6
- package/dist/es/components/menu/daikin-menu.d.ts +6 -1
- package/dist/es/components/menu/daikin-menu.js +21 -10
- package/dist/es/components/pagination/daikin-pagination.js +2 -1
- package/dist/es/components/progress-indicator-item/daikin-progress-indicator-item.js +2 -2
- package/dist/es/components/status-message/daikin-status-message.d.ts +51 -0
- package/dist/es/components/status-message/daikin-status-message.js +111 -0
- package/dist/es/components/status-message/index.d.ts +1 -0
- package/dist/es/components/status-message/index.js +4 -0
- package/dist/es/components/table/daikin-table.js +2 -2
- package/dist/es/components/time-picker/daikin-time-picker.js +1 -1
- package/dist/es/components/toast-notification/daikin-toast-notification.d.ts +4 -1
- package/dist/es/components/tree/daikin-tree.d.ts +2 -1
- package/dist/es/components/tree-item/daikin-tree-item.d.ts +6 -1
- package/dist/es/components/tree-section/daikin-tree-section.d.ts +6 -1
- package/dist/es/index.js +4 -0
- package/dist/es/tailwind.css.js +1 -1
- package/dist/es/utils/calendar-common.d.ts +7 -0
- package/dist/es/utils/calendar-common.js +6 -0
- package/dist/es/utils/notification-common.d.ts +1 -1
- package/dist/es-dev/base/dds-element.js +1 -1
- package/dist/es-dev/components/badge/daikin-badge.d.ts +85 -0
- package/dist/es-dev/components/badge/daikin-badge.js +134 -0
- package/dist/es-dev/components/badge/index.d.ts +1 -0
- package/dist/es-dev/components/badge/index.js +4 -0
- package/dist/es-dev/components/button/daikin-button.d.ts +1 -1
- package/dist/es-dev/components/calendar/daikin-calendar.d.ts +9 -0
- package/dist/es-dev/components/calendar/daikin-calendar.js +29 -7
- package/dist/es-dev/components/combobox/daikin-combobox.js +6 -3
- package/dist/es-dev/components/date-picker/daikin-date-picker.d.ts +5 -0
- package/dist/es-dev/components/date-picker/daikin-date-picker.js +26 -2
- package/dist/es-dev/components/dropdown/daikin-dropdown.js +6 -8
- package/dist/es-dev/components/icon/daikin-icon.d.ts +8 -0
- package/dist/es-dev/components/icon/daikin-icon.js +4 -4
- package/dist/es-dev/components/icon/icons.json.d.ts +8 -0
- package/dist/es-dev/components/icon/icons.json.js +1 -1
- package/dist/es-dev/components/icon-button/daikin-icon-button.d.ts +1 -1
- package/dist/es-dev/components/index.d.ts +2 -0
- package/dist/es-dev/components/index.js +4 -0
- package/dist/es-dev/components/inline-notification/daikin-inline-notification.d.ts +4 -1
- package/dist/es-dev/components/input-group/daikin-input-group.js +21 -6
- package/dist/es-dev/components/menu/daikin-menu.d.ts +6 -1
- package/dist/es-dev/components/menu/daikin-menu.js +21 -10
- package/dist/es-dev/components/pagination/daikin-pagination.js +2 -1
- package/dist/es-dev/components/progress-indicator-item/daikin-progress-indicator-item.js +2 -2
- package/dist/es-dev/components/status-message/daikin-status-message.d.ts +51 -0
- package/dist/es-dev/components/status-message/daikin-status-message.js +111 -0
- package/dist/es-dev/components/status-message/index.d.ts +1 -0
- package/dist/es-dev/components/status-message/index.js +4 -0
- package/dist/es-dev/components/table/daikin-table.js +2 -2
- package/dist/es-dev/components/time-picker/daikin-time-picker.js +1 -1
- package/dist/es-dev/components/toast-notification/daikin-toast-notification.d.ts +4 -1
- package/dist/es-dev/components/tree/daikin-tree.d.ts +2 -1
- package/dist/es-dev/components/tree-item/daikin-tree-item.d.ts +6 -1
- package/dist/es-dev/components/tree-section/daikin-tree-section.d.ts +6 -1
- package/dist/es-dev/index.js +4 -0
- package/dist/es-dev/tailwind.css.js +1 -1
- package/dist/es-dev/utils/calendar-common.d.ts +7 -0
- package/dist/es-dev/utils/calendar-common.js +6 -0
- package/dist/es-dev/utils/notification-common.d.ts +1 -1
- package/icons/neutral.svg +3 -0
- package/icons/notification.svg +3 -0
- package/package.json +1 -1
|
@@ -78,6 +78,14 @@ declare const icons: {
|
|
|
78
78
|
class: string;
|
|
79
79
|
color: null;
|
|
80
80
|
};
|
|
81
|
+
notification: {
|
|
82
|
+
class: string;
|
|
83
|
+
color: null;
|
|
84
|
+
};
|
|
85
|
+
neutral: {
|
|
86
|
+
class: string;
|
|
87
|
+
color: null;
|
|
88
|
+
};
|
|
81
89
|
};
|
|
82
90
|
export declare const iconList: string[];
|
|
83
91
|
export type IconType = keyof typeof icons;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
-
const icons = { "logo-positive": { "class": "i-daikin-logo-positive", "color": null }, "logo-negative": { "class": "i-daikin-logo-negative", "color": null }, "alarm": { "class": "i-daikin-alarm", "color": null }, "close": { "class": "i-daikin-close", "color": "#a0a0a0" }, "information": { "class": "i-daikin-information", "color": null }, "error": { "class": "i-daikin-error", "color": null }, "success": { "class": "i-daikin-success", "color": null }, "warning": { "class": "i-daikin-warning", "color": null }, "pagination-chevron-left": { "class": "i-daikin-pagination-chevron-left", "color": "#414141" }, "pagination-chevron-right": { "class": "i-daikin-pagination-chevron-right", "color": "#414141" }, "profile": { "class": "i-daikin-profile", "color": null }, "chevron-up": { "class": "i-daikin-chevron-up", "color": null }, "chevron-down": { "class": "i-daikin-chevron-down", "color": null }, "chevron-left": { "class": "i-daikin-chevron-left", "color": null }, "chevron-right": { "class": "i-daikin-chevron-right", "color": null }, "sort": { "class": "i-daikin-sort", "color": null }, "negative": { "class": "i-daikin-error", "color": null }, "positive": { "class": "i-daikin-success", "color": null }, "cross": { "class": "i-daikin-close", "color": null } };
|
|
3
|
+
const icons = { "logo-positive": { "class": "i-daikin-logo-positive", "color": null }, "logo-negative": { "class": "i-daikin-logo-negative", "color": null }, "alarm": { "class": "i-daikin-alarm", "color": null }, "close": { "class": "i-daikin-close", "color": "#a0a0a0" }, "information": { "class": "i-daikin-information", "color": null }, "error": { "class": "i-daikin-error", "color": null }, "success": { "class": "i-daikin-success", "color": null }, "warning": { "class": "i-daikin-warning", "color": null }, "pagination-chevron-left": { "class": "i-daikin-pagination-chevron-left", "color": "#414141" }, "pagination-chevron-right": { "class": "i-daikin-pagination-chevron-right", "color": "#414141" }, "profile": { "class": "i-daikin-profile", "color": null }, "chevron-up": { "class": "i-daikin-chevron-up", "color": null }, "chevron-down": { "class": "i-daikin-chevron-down", "color": null }, "chevron-left": { "class": "i-daikin-chevron-left", "color": null }, "chevron-right": { "class": "i-daikin-chevron-right", "color": null }, "sort": { "class": "i-daikin-sort", "color": null }, "negative": { "class": "i-daikin-error", "color": null }, "positive": { "class": "i-daikin-success", "color": null }, "cross": { "class": "i-daikin-close", "color": null }, "notification": { "class": "i-daikin-notification", "color": null }, "neutral": { "class": "i-daikin-neutral", "color": null } };
|
|
4
4
|
const iconsJson = {
|
|
5
5
|
icons
|
|
6
6
|
};
|
|
@@ -75,6 +75,14 @@ declare const _default: {
|
|
|
75
75
|
"cross": {
|
|
76
76
|
"class": "i-daikin-close",
|
|
77
77
|
"color": null
|
|
78
|
+
},
|
|
79
|
+
"notification": {
|
|
80
|
+
"class": "i-daikin-notification",
|
|
81
|
+
"color": null
|
|
82
|
+
},
|
|
83
|
+
"neutral": {
|
|
84
|
+
"class": "i-daikin-neutral",
|
|
85
|
+
"color": null
|
|
78
86
|
}
|
|
79
87
|
}
|
|
80
88
|
}
|
|
@@ -2,7 +2,7 @@ import { DDSFormSubmitElement } from "../../base/index.cjs";
|
|
|
2
2
|
import { ARIARole } from "../../lit-analyzer-types.cjs";
|
|
3
3
|
import { MergeVariantProps } from "../../type-utils.cjs";
|
|
4
4
|
declare const cvaIconButton: (props?: ({
|
|
5
|
-
color?: "
|
|
5
|
+
color?: "danger" | "default" | "neutral" | null | undefined;
|
|
6
6
|
variant?: "fill" | "outline" | "ghost" | null | undefined;
|
|
7
7
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
8
8
|
type IconButtonVariantProps = MergeVariantProps<typeof cvaIconButton>;
|
|
@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
const daikinAccordion = require("./accordion/daikin-accordion.cjs");
|
|
4
4
|
const daikinAccordionItem = require("./accordion-item/daikin-accordion-item.cjs");
|
|
5
5
|
const daikinAvatar = require("./avatar/daikin-avatar.cjs");
|
|
6
|
+
const daikinBadge = require("./badge/daikin-badge.cjs");
|
|
6
7
|
const daikinBreadcrumb = require("./breadcrumb/daikin-breadcrumb.cjs");
|
|
7
8
|
const daikinBreadcrumbItem = require("./breadcrumb-item/daikin-breadcrumb-item.cjs");
|
|
8
9
|
const daikinButton = require("./button/daikin-button.cjs");
|
|
@@ -40,6 +41,7 @@ const daikinRadio = require("./radio/daikin-radio.cjs");
|
|
|
40
41
|
const daikinRadioGroup = require("./radio-group/daikin-radio-group.cjs");
|
|
41
42
|
const daikinSelect = require("./select/daikin-select.cjs");
|
|
42
43
|
const daikinSlider = require("./slider/daikin-slider.cjs");
|
|
44
|
+
const daikinStatusMessage = require("./status-message/daikin-status-message.cjs");
|
|
43
45
|
const daikinTab = require("./tab/daikin-tab.cjs");
|
|
44
46
|
const daikinTabPanels = require("./tab-panels/daikin-tab-panels.cjs");
|
|
45
47
|
const daikinTable = require("./table/daikin-table.cjs");
|
|
@@ -69,6 +71,10 @@ Object.defineProperty(exports, "DaikinAvatar", {
|
|
|
69
71
|
enumerable: true,
|
|
70
72
|
get: () => daikinAvatar.DaikinAvatar
|
|
71
73
|
});
|
|
74
|
+
Object.defineProperty(exports, "DaikinBadge", {
|
|
75
|
+
enumerable: true,
|
|
76
|
+
get: () => daikinBadge.DaikinBadge
|
|
77
|
+
});
|
|
72
78
|
Object.defineProperty(exports, "DaikinBreadcrumb", {
|
|
73
79
|
enumerable: true,
|
|
74
80
|
get: () => daikinBreadcrumb.DaikinBreadcrumb
|
|
@@ -219,6 +225,10 @@ Object.defineProperty(exports, "DaikinSlider", {
|
|
|
219
225
|
enumerable: true,
|
|
220
226
|
get: () => daikinSlider.DaikinSlider
|
|
221
227
|
});
|
|
228
|
+
Object.defineProperty(exports, "DaikinStatusMessage", {
|
|
229
|
+
enumerable: true,
|
|
230
|
+
get: () => daikinStatusMessage.DaikinStatusMessage
|
|
231
|
+
});
|
|
222
232
|
Object.defineProperty(exports, "DaikinTab", {
|
|
223
233
|
enumerable: true,
|
|
224
234
|
get: () => daikinTab.DaikinTab
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export * from "./accordion/index.cjs";
|
|
2
2
|
export * from "./accordion-item/index.cjs";
|
|
3
3
|
export * from "./avatar/index.cjs";
|
|
4
|
+
export * from "./badge/index.cjs";
|
|
4
5
|
export * from "./breadcrumb/index.cjs";
|
|
5
6
|
export * from "./breadcrumb-item/index.cjs";
|
|
6
7
|
export * from "./button/index.cjs";
|
|
@@ -38,6 +39,7 @@ export * from "./radio/index.cjs";
|
|
|
38
39
|
export * from "./radio-group/index.cjs";
|
|
39
40
|
export * from "./select/index.cjs";
|
|
40
41
|
export * from "./slider/index.cjs";
|
|
42
|
+
export * from "./status-message/index.cjs";
|
|
41
43
|
export * from "./tab/index.cjs";
|
|
42
44
|
export * from "./tab-panels/index.cjs";
|
|
43
45
|
export * from "./table/index.cjs";
|
|
@@ -41,7 +41,10 @@ export declare class DaikinInlineNotification extends DDSElement {
|
|
|
41
41
|
*/
|
|
42
42
|
closable: boolean;
|
|
43
43
|
/**
|
|
44
|
-
* The timestamp to display.
|
|
44
|
+
* The timestamp to display. Accepts a Date object and displays it in YYYY/MM/DD format.
|
|
45
|
+
*
|
|
46
|
+
* @example
|
|
47
|
+
* element.timestamp = new Date();
|
|
45
48
|
*/
|
|
46
49
|
timestamp: Date | null;
|
|
47
50
|
/**
|
|
@@ -8,6 +8,7 @@ require("../../base/dds-form-element.cjs");
|
|
|
8
8
|
const decorators = require("../../base/decorators.cjs");
|
|
9
9
|
require("../../base/define.cjs");
|
|
10
10
|
const tailwind = require("../../tailwind.css.cjs");
|
|
11
|
+
require("../status-message/daikin-status-message.cjs");
|
|
11
12
|
var __defProp = Object.defineProperty;
|
|
12
13
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
13
14
|
var __decorateClass = (decorators2, target, key, kind) => {
|
|
@@ -112,6 +113,25 @@ exports.DaikinInputGroup = class DaikinInputGroup extends ddsElement.DDSElement
|
|
|
112
113
|
textareaLimitExceedError: this.textareaLimitExceedError,
|
|
113
114
|
none: ""
|
|
114
115
|
}[helperTextVariant];
|
|
116
|
+
const formatHelperText = (helperTextVariant2, helperText2) => {
|
|
117
|
+
switch (helperTextVariant2) {
|
|
118
|
+
case "error":
|
|
119
|
+
case "textareaLimitExceedError":
|
|
120
|
+
return lit.html`<daikin-status-message
|
|
121
|
+
status="negative"
|
|
122
|
+
message-role="alert"
|
|
123
|
+
size="small"
|
|
124
|
+
>
|
|
125
|
+
${helperText2}
|
|
126
|
+
</daikin-status-message>`;
|
|
127
|
+
case "none":
|
|
128
|
+
return lit.nothing;
|
|
129
|
+
default:
|
|
130
|
+
return lit.html`<span class=${cvaHelper({ type: helperTextVariant2 })}>
|
|
131
|
+
${helperText2}
|
|
132
|
+
</span>`;
|
|
133
|
+
}
|
|
134
|
+
};
|
|
115
135
|
return lit.html`<fieldset class="contents" ?disabled=${this.disabled}>
|
|
116
136
|
<label
|
|
117
137
|
class="flex flex-col justify-center gap-2 w-full text-ddt-color-common-text-primary font-daikinSerif"
|
|
@@ -124,12 +144,7 @@ exports.DaikinInputGroup = class DaikinInputGroup extends ddsElement.DDSElement
|
|
|
124
144
|
${this.required}
|
|
125
145
|
</span>` : lit.nothing}
|
|
126
146
|
</div>
|
|
127
|
-
|
|
128
|
-
class=${cvaHelper({ type: helperTextVariant })}
|
|
129
|
-
aria-live=${helperTextVariant === "error" ? "polite" : "off"}
|
|
130
|
-
>
|
|
131
|
-
${helperText}
|
|
132
|
-
</span>
|
|
147
|
+
${formatHelperText(helperTextVariant, helperText)}
|
|
133
148
|
<slot
|
|
134
149
|
@slotchange=${this._handleSlotChange}
|
|
135
150
|
@input=${this._handleInput}
|
|
@@ -95,19 +95,27 @@ exports.DaikinMenu = class DaikinMenu extends ddsElement.DDSElement {
|
|
|
95
95
|
this._reflectStaticProperties();
|
|
96
96
|
}
|
|
97
97
|
_handleTriggerClick(event) {
|
|
98
|
-
if (this.trigger
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
}
|
|
98
|
+
if (this.trigger !== "click") return;
|
|
99
|
+
event.preventDefault();
|
|
100
|
+
this.open = !this.open;
|
|
101
|
+
if (this.open) {
|
|
102
|
+
setTimeout(() => {
|
|
103
|
+
this._lists[0].focusFirstItem();
|
|
104
|
+
});
|
|
106
105
|
}
|
|
107
106
|
}
|
|
107
|
+
_handleTouchEnd(event) {
|
|
108
|
+
if (this.trigger !== "click") return;
|
|
109
|
+
event.preventDefault();
|
|
110
|
+
this.open = !this.open;
|
|
111
|
+
}
|
|
112
|
+
/**
|
|
113
|
+
* Handles click events on the menu-item.
|
|
114
|
+
* When the popoverValue is manual, the logic for closing the popover should be entirely controlled by the developer and not be the responsibility of the component.
|
|
115
|
+
*/
|
|
108
116
|
_handleClick(event) {
|
|
109
117
|
event.preventDefault();
|
|
110
|
-
if (event.target instanceof daikinListItem.default && !event.target.disabled) {
|
|
118
|
+
if (event.target instanceof daikinListItem.default && !event.target.disabled && this.popoverValue === "auto") {
|
|
111
119
|
this.open = false;
|
|
112
120
|
}
|
|
113
121
|
}
|
|
@@ -134,7 +142,10 @@ exports.DaikinMenu = class DaikinMenu extends ddsElement.DDSElement {
|
|
|
134
142
|
aria-describedby="menu"
|
|
135
143
|
${this._autoUpdateController.refReference()}
|
|
136
144
|
>
|
|
137
|
-
<slot
|
|
145
|
+
<slot
|
|
146
|
+
@click=${this._handleTriggerClick}
|
|
147
|
+
@touchend=${this._handleTouchEnd}
|
|
148
|
+
></slot>
|
|
138
149
|
</div>
|
|
139
150
|
<span
|
|
140
151
|
id="menu"
|
|
@@ -45,7 +45,7 @@ export declare class DaikinMenu extends DDSElement {
|
|
|
45
45
|
* Specifies the initial position of the menu relative to the trigger.
|
|
46
46
|
* However, if there isn't enough space in the specified direction, the menu will automatically adjust its direction.
|
|
47
47
|
*/
|
|
48
|
-
placement: "top" | "bottom" | "left" | "right";
|
|
48
|
+
placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
|
|
49
49
|
/**
|
|
50
50
|
* Whether the menu is open.
|
|
51
51
|
*/
|
|
@@ -76,6 +76,11 @@ export declare class DaikinMenu extends DDSElement {
|
|
|
76
76
|
private _reflectDynamicProperties;
|
|
77
77
|
private _handleSlotChange;
|
|
78
78
|
private _handleTriggerClick;
|
|
79
|
+
private _handleTouchEnd;
|
|
80
|
+
/**
|
|
81
|
+
* Handles click events on the menu-item.
|
|
82
|
+
* When the popoverValue is manual, the logic for closing the popover should be entirely controlled by the developer and not be the responsibility of the component.
|
|
83
|
+
*/
|
|
79
84
|
private _handleClick;
|
|
80
85
|
private _handleBeforeToggle;
|
|
81
86
|
private _handleToggle;
|
|
@@ -139,9 +139,10 @@ exports.DaikinPagination = class DaikinPagination extends ddsElement.DDSElement
|
|
|
139
139
|
this.current,
|
|
140
140
|
this.window
|
|
141
141
|
);
|
|
142
|
+
const landmarkLabel = this.ariaLabel || "Pagination";
|
|
142
143
|
return lit.html`
|
|
143
144
|
<div
|
|
144
|
-
aria-label
|
|
145
|
+
aria-label=${landmarkLabel}
|
|
145
146
|
role="navigation"
|
|
146
147
|
class="inline-flex flex-wrap"
|
|
147
148
|
>
|
|
@@ -53,7 +53,7 @@ exports.DaikinProgressIndicatorItem = class DaikinProgressIndicatorItem extends
|
|
|
53
53
|
this.status === "inprogress" ? "step" : void 0
|
|
54
54
|
)}
|
|
55
55
|
>
|
|
56
|
-
<div class="flex flex-col gap-1 w-full">
|
|
56
|
+
<div class="flex flex-col gap-1 w-full overflow-auto">
|
|
57
57
|
<slot class="font-bold leading-[130%]"></slot>
|
|
58
58
|
<slot name="description" class="text-sm leading-[130%]"></slot>
|
|
59
59
|
</div>
|
|
@@ -73,7 +73,7 @@ exports.DaikinProgressIndicatorItem.styles = lit.css`
|
|
|
73
73
|
:host {
|
|
74
74
|
display: block;
|
|
75
75
|
width: 100%;
|
|
76
|
-
min-width:
|
|
76
|
+
min-width: 5rem;
|
|
77
77
|
}
|
|
78
78
|
`;
|
|
79
79
|
__decorateClass([
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const classVarianceAuthority = require("class-variance-authority");
|
|
4
|
+
const lit = require("lit");
|
|
5
|
+
const decorators_js = require("lit/decorators.js");
|
|
6
|
+
const ifDefined_js = require("lit/directives/if-defined.js");
|
|
7
|
+
const ddsElement = require("../../base/dds-element.cjs");
|
|
8
|
+
require("../../base/dds-form-element.cjs");
|
|
9
|
+
const decorators = require("../../base/decorators.cjs");
|
|
10
|
+
require("../../base/define.cjs");
|
|
11
|
+
const tailwind = require("../../tailwind.css.cjs");
|
|
12
|
+
var __defProp = Object.defineProperty;
|
|
13
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
14
|
+
var __decorateClass = (decorators2, target, key, kind) => {
|
|
15
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
16
|
+
for (var i = decorators2.length - 1, decorator; i >= 0; i--)
|
|
17
|
+
if (decorator = decorators2[i])
|
|
18
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
19
|
+
if (kind && result) __defProp(target, key, result);
|
|
20
|
+
return result;
|
|
21
|
+
};
|
|
22
|
+
const cvaWrapper = classVarianceAuthority.cva(
|
|
23
|
+
[
|
|
24
|
+
"flex",
|
|
25
|
+
"items-center",
|
|
26
|
+
"size-full",
|
|
27
|
+
"font-daikinSerif",
|
|
28
|
+
"font-normal",
|
|
29
|
+
"leading-[130%]",
|
|
30
|
+
"gap-1",
|
|
31
|
+
"break-all",
|
|
32
|
+
"before:content-['']",
|
|
33
|
+
"before:flex-none"
|
|
34
|
+
],
|
|
35
|
+
{
|
|
36
|
+
variants: {
|
|
37
|
+
size: {
|
|
38
|
+
small: ["before:size-4", "text-sm", "h-[18px]"],
|
|
39
|
+
medium: ["before:size-6", "text-base", "h-6"]
|
|
40
|
+
},
|
|
41
|
+
status: {
|
|
42
|
+
neutral: [
|
|
43
|
+
"text-ddt-color-common-text-primary",
|
|
44
|
+
"before:i-daikin-neutral",
|
|
45
|
+
"before:text-ddt-color-common-disabled"
|
|
46
|
+
],
|
|
47
|
+
positive: [
|
|
48
|
+
"text-ddt-color-common-text-primary",
|
|
49
|
+
"before:i-daikin-success",
|
|
50
|
+
"before:text-ddt-color-common-success"
|
|
51
|
+
],
|
|
52
|
+
negative: [
|
|
53
|
+
"text-ddt-color-common-danger-default",
|
|
54
|
+
"before:i-daikin-error",
|
|
55
|
+
"before:text-ddt-color-common-danger-default"
|
|
56
|
+
],
|
|
57
|
+
warning: [
|
|
58
|
+
"text-ddt-color-common-text-primary",
|
|
59
|
+
"before:i-daikin-warning",
|
|
60
|
+
"before:text-ddt-color-common-warning"
|
|
61
|
+
]
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
);
|
|
66
|
+
exports.DaikinStatusMessage = class DaikinStatusMessage extends ddsElement.DDSElement {
|
|
67
|
+
constructor() {
|
|
68
|
+
super(...arguments);
|
|
69
|
+
this.size = "medium";
|
|
70
|
+
this.status = "positive";
|
|
71
|
+
this.statusMessageRole = null;
|
|
72
|
+
this.screenReaderText = null;
|
|
73
|
+
}
|
|
74
|
+
render() {
|
|
75
|
+
return lit.html`
|
|
76
|
+
<div
|
|
77
|
+
class=${cvaWrapper({ status: this.status, size: this.size })}
|
|
78
|
+
role=${ifDefined_js.ifDefined(this.statusMessageRole ?? void 0)}
|
|
79
|
+
>
|
|
80
|
+
${this.screenReaderText ? lit.html`<span class="sr-only">${this.screenReaderText}</span>` : lit.nothing}
|
|
81
|
+
<span>
|
|
82
|
+
<slot></slot>
|
|
83
|
+
</span>
|
|
84
|
+
</div>
|
|
85
|
+
`;
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
exports.DaikinStatusMessage.styles = lit.css`
|
|
89
|
+
${lit.unsafeCSS(tailwind.default)}
|
|
90
|
+
|
|
91
|
+
:host {
|
|
92
|
+
display: flex;
|
|
93
|
+
width: 100%;
|
|
94
|
+
}
|
|
95
|
+
`;
|
|
96
|
+
__decorateClass([
|
|
97
|
+
decorators_js.property({ type: String, reflect: true })
|
|
98
|
+
], exports.DaikinStatusMessage.prototype, "size", 2);
|
|
99
|
+
__decorateClass([
|
|
100
|
+
decorators_js.property({ type: String, reflect: true })
|
|
101
|
+
], exports.DaikinStatusMessage.prototype, "status", 2);
|
|
102
|
+
__decorateClass([
|
|
103
|
+
decorators_js.property({ type: String, reflect: true, attribute: "status-message-role" })
|
|
104
|
+
], exports.DaikinStatusMessage.prototype, "statusMessageRole", 2);
|
|
105
|
+
__decorateClass([
|
|
106
|
+
decorators_js.property({ type: String, reflect: true, attribute: "screen-reader-text" })
|
|
107
|
+
], exports.DaikinStatusMessage.prototype, "screenReaderText", 2);
|
|
108
|
+
exports.DaikinStatusMessage = __decorateClass([
|
|
109
|
+
decorators.ddsElement("daikin-status-message")
|
|
110
|
+
], exports.DaikinStatusMessage);
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { DDSElement } from "../../base/index.cjs";
|
|
2
|
+
/**
|
|
3
|
+
* A status message is a concise UI component for displaying status feedback, notifications, or contextual information to users. It typically indicates success, warning, error, or other states, helping users quickly understand the current state or important updates in the interface.
|
|
4
|
+
*
|
|
5
|
+
* @example
|
|
6
|
+
*
|
|
7
|
+
* ```js
|
|
8
|
+
* import "@daikin-oss/design-system-web-components/components/status-message/index.js";
|
|
9
|
+
* ```
|
|
10
|
+
*
|
|
11
|
+
* ```html
|
|
12
|
+
* <daikin-status-message>description</daikin-status-message>
|
|
13
|
+
* ```
|
|
14
|
+
*/
|
|
15
|
+
export declare class DaikinStatusMessage extends DDSElement {
|
|
16
|
+
static readonly styles: import('lit').CSSResult;
|
|
17
|
+
/**
|
|
18
|
+
* Sets the size of the status message component.
|
|
19
|
+
* - "small": Compact status message style.
|
|
20
|
+
* - "medium": Default status message style.
|
|
21
|
+
*/
|
|
22
|
+
size: "small" | "medium";
|
|
23
|
+
/**
|
|
24
|
+
* Specifies the status of the message.
|
|
25
|
+
* - "neutral": Neutral or incomplete status.
|
|
26
|
+
* - "positive": Success or confirmation status.
|
|
27
|
+
* - "negative": Error or failure status.
|
|
28
|
+
* - "warning": Warning or caution status.
|
|
29
|
+
*/
|
|
30
|
+
status: "neutral" | "positive" | "negative" | "warning";
|
|
31
|
+
/**
|
|
32
|
+
* Sets the ARIA role of the status message component.
|
|
33
|
+
* - "[alert](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alert_role)": Indicates an important message that requires user attention.
|
|
34
|
+
* - "[status](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role)": Indicates an advisory message that provides feedback or updates.
|
|
35
|
+
* - `null` (default): No specific ARIA role, meaning the message content will not be announced automatically when it changes.
|
|
36
|
+
*/
|
|
37
|
+
statusMessageRole: "alert" | "status" | null;
|
|
38
|
+
/**
|
|
39
|
+
* Provides an alternative text for screen readers that is read by assistive technologies but not displayed visually.
|
|
40
|
+
*
|
|
41
|
+
* e.g. If you use the message component for a password validation status (ensure the statusMessageRole is `status`), you might do the following:
|
|
42
|
+
* When the user inputs an 8-character password, set the status to `positive` and update the screenReaderText to "Met,". This allows the screen reader to announce the full updated message, such as "Met, minimum 8 characters".
|
|
43
|
+
*/
|
|
44
|
+
screenReaderText: string | null;
|
|
45
|
+
render(): import('lit-html').TemplateResult<1>;
|
|
46
|
+
}
|
|
47
|
+
declare global {
|
|
48
|
+
interface HTMLElementTagNameMap {
|
|
49
|
+
"daikin-status-message": DaikinStatusMessage;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const daikinStatusMessage = require("./daikin-status-message.cjs");
|
|
4
|
+
Object.defineProperty(exports, "DaikinStatusMessage", {
|
|
5
|
+
enumerable: true,
|
|
6
|
+
get: () => daikinStatusMessage.DaikinStatusMessage
|
|
7
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./daikin-status-message.cjs";
|
|
@@ -38,12 +38,12 @@ const cvaRow = classVarianceAuthority.cva(
|
|
|
38
38
|
variants: {
|
|
39
39
|
selected: {
|
|
40
40
|
false: [
|
|
41
|
-
"group-[:not([data-hover])]:
|
|
41
|
+
"group-[:not([data-hover])]:hover:bg-ddt-color-common-surface-hover",
|
|
42
42
|
"data-[hover]:bg-ddt-color-common-surface-hover"
|
|
43
43
|
],
|
|
44
44
|
true: [
|
|
45
45
|
"bg-ddt-color-common-surface-selected-default",
|
|
46
|
-
"group-[:not([data-hover])]:
|
|
46
|
+
"group-[:not([data-hover])]:hover:bg-ddt-color-common-surface-selected-hover",
|
|
47
47
|
"data-[hover]:bg-ddt-color-common-surface-selected-hover"
|
|
48
48
|
]
|
|
49
49
|
}
|
|
@@ -50,7 +50,10 @@ export declare class DaikinToastNotification extends DDSElement {
|
|
|
50
50
|
*/
|
|
51
51
|
closable: boolean;
|
|
52
52
|
/**
|
|
53
|
-
* The timestamp to display.
|
|
53
|
+
* The timestamp to display. Accepts a Date object and displays it in YYYY/MM/DD format.
|
|
54
|
+
*
|
|
55
|
+
* @example
|
|
56
|
+
* element.timestamp = new Date();
|
|
54
57
|
*/
|
|
55
58
|
timestamp: Date | null;
|
|
56
59
|
/**
|
|
@@ -38,8 +38,9 @@ export declare class DaikinTree extends DDSElement {
|
|
|
38
38
|
*/
|
|
39
39
|
selectable: boolean;
|
|
40
40
|
/**
|
|
41
|
-
* The
|
|
41
|
+
* The values of the currently selected tree sections or items.
|
|
42
42
|
* Even if `selectable` is `false`, you can still set this property yourself.
|
|
43
|
+
* See the `value` property of the `daikin-tree-section` and `daikin-tree-item` components.
|
|
43
44
|
*/
|
|
44
45
|
selectedItems: string[];
|
|
45
46
|
private readonly _children;
|
|
@@ -33,7 +33,9 @@ export declare const cvaTreeChildren: (props?: ({
|
|
|
33
33
|
export declare class DaikinTreeItem extends DDSElement {
|
|
34
34
|
static readonly styles: import('lit').CSSResult;
|
|
35
35
|
/**
|
|
36
|
-
*
|
|
36
|
+
* An unique value within the tree.
|
|
37
|
+
* This value is used by the `daikin-tree` component to manage the selection target.
|
|
38
|
+
* While not required, you can use a value based on the hierarchy to ensure uniqueness. (For example, if the parent is "foo", use "foo.bar".)
|
|
37
39
|
*/
|
|
38
40
|
value: string;
|
|
39
41
|
/**
|
|
@@ -43,6 +45,9 @@ export declare class DaikinTreeItem extends DDSElement {
|
|
|
43
45
|
/**
|
|
44
46
|
* Whether the tree item is selected.
|
|
45
47
|
* Controlled by `daikin-tree`.
|
|
48
|
+
* Do not specify this manually, as it will be overwritten by the `daikin-tree` component.
|
|
49
|
+
*
|
|
50
|
+
* @private
|
|
46
51
|
*/
|
|
47
52
|
selected: boolean;
|
|
48
53
|
/**
|
|
@@ -36,7 +36,9 @@ import { DDSElement } from "../../base/index.cjs";
|
|
|
36
36
|
export declare class DaikinTreeSection extends DDSElement {
|
|
37
37
|
static readonly styles: import('lit').CSSResult;
|
|
38
38
|
/**
|
|
39
|
-
*
|
|
39
|
+
* An unique value within the tree.
|
|
40
|
+
* This value is used by the `daikin-tree` component to manage the selection target.
|
|
41
|
+
* While not required, you can use a value based on the hierarchy to ensure uniqueness. (For example, if the parent is "foo", use "foo.bar".)
|
|
40
42
|
*/
|
|
41
43
|
value: string;
|
|
42
44
|
/**
|
|
@@ -46,6 +48,9 @@ export declare class DaikinTreeSection extends DDSElement {
|
|
|
46
48
|
/**
|
|
47
49
|
* Whether the tree item is selected.
|
|
48
50
|
* Controlled by `daikin-tree`.
|
|
51
|
+
* Do not specify this manually, as it will be overwritten by the `daikin-tree` component.
|
|
52
|
+
*
|
|
53
|
+
* @private
|
|
49
54
|
*/
|
|
50
55
|
selected: boolean;
|
|
51
56
|
/**
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
const daikinAccordion = require("./components/accordion/daikin-accordion.cjs");
|
|
4
4
|
const daikinAccordionItem = require("./components/accordion-item/daikin-accordion-item.cjs");
|
|
5
5
|
const daikinAvatar = require("./components/avatar/daikin-avatar.cjs");
|
|
6
|
+
const daikinBadge = require("./components/badge/daikin-badge.cjs");
|
|
6
7
|
const daikinBreadcrumb = require("./components/breadcrumb/daikin-breadcrumb.cjs");
|
|
7
8
|
const daikinBreadcrumbItem = require("./components/breadcrumb-item/daikin-breadcrumb-item.cjs");
|
|
8
9
|
const daikinButton = require("./components/button/daikin-button.cjs");
|
|
@@ -40,6 +41,7 @@ const daikinRadio = require("./components/radio/daikin-radio.cjs");
|
|
|
40
41
|
const daikinRadioGroup = require("./components/radio-group/daikin-radio-group.cjs");
|
|
41
42
|
const daikinSelect = require("./components/select/daikin-select.cjs");
|
|
42
43
|
const daikinSlider = require("./components/slider/daikin-slider.cjs");
|
|
44
|
+
const daikinStatusMessage = require("./components/status-message/daikin-status-message.cjs");
|
|
43
45
|
const daikinTab = require("./components/tab/daikin-tab.cjs");
|
|
44
46
|
const daikinTabPanels = require("./components/tab-panels/daikin-tab-panels.cjs");
|
|
45
47
|
const daikinTable = require("./components/table/daikin-table.cjs");
|
|
@@ -70,6 +72,10 @@ Object.defineProperty(exports, "DaikinAvatar", {
|
|
|
70
72
|
enumerable: true,
|
|
71
73
|
get: () => daikinAvatar.DaikinAvatar
|
|
72
74
|
});
|
|
75
|
+
Object.defineProperty(exports, "DaikinBadge", {
|
|
76
|
+
enumerable: true,
|
|
77
|
+
get: () => daikinBadge.DaikinBadge
|
|
78
|
+
});
|
|
73
79
|
Object.defineProperty(exports, "DaikinBreadcrumb", {
|
|
74
80
|
enumerable: true,
|
|
75
81
|
get: () => daikinBreadcrumb.DaikinBreadcrumb
|
|
@@ -220,6 +226,10 @@ Object.defineProperty(exports, "DaikinSlider", {
|
|
|
220
226
|
enumerable: true,
|
|
221
227
|
get: () => daikinSlider.DaikinSlider
|
|
222
228
|
});
|
|
229
|
+
Object.defineProperty(exports, "DaikinStatusMessage", {
|
|
230
|
+
enumerable: true,
|
|
231
|
+
get: () => daikinStatusMessage.DaikinStatusMessage
|
|
232
|
+
});
|
|
223
233
|
Object.defineProperty(exports, "DaikinTab", {
|
|
224
234
|
enumerable: true,
|
|
225
235
|
get: () => daikinTab.DaikinTab
|