@daikin-oss/design-system-web-components 0.3.1 → 0.3.2
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 +44 -0
- package/dist/cjs/components/accordion/daikin-accordion.d.ts +0 -1
- package/dist/cjs/components/accordion-item/daikin-accordion-item.d.ts +0 -1
- package/dist/cjs/components/breadcrumb/daikin-breadcrumb.cjs +124 -0
- package/dist/cjs/components/breadcrumb/daikin-breadcrumb.d.ts +52 -0
- package/dist/cjs/components/breadcrumb/index.cjs +7 -0
- package/dist/cjs/components/breadcrumb/index.d.ts +1 -0
- package/dist/cjs/components/breadcrumb-item/daikin-breadcrumb-item.cjs +116 -0
- package/dist/cjs/components/breadcrumb-item/daikin-breadcrumb-item.d.ts +62 -0
- package/dist/cjs/components/breadcrumb-item/index.cjs +7 -0
- package/dist/cjs/components/breadcrumb-item/index.d.ts +1 -0
- package/dist/cjs/components/button/daikin-button.d.ts +0 -1
- package/dist/cjs/components/checkbox/daikin-checkbox.d.ts +0 -1
- package/dist/cjs/components/icon/daikin-icon.d.ts +0 -1
- package/dist/cjs/components/index.cjs +20 -0
- package/dist/cjs/components/index.d.ts +4 -0
- package/dist/cjs/components/input-group/daikin-input-group.cjs +1 -1
- package/dist/cjs/components/input-group/daikin-input-group.d.ts +0 -1
- package/dist/cjs/components/notification/daikin-notification.d.ts +0 -1
- package/dist/cjs/components/panel-switcher/daikin-panel-switcher.d.ts +0 -1
- package/dist/cjs/components/progress-bar/daikin-progress-bar.cjs +137 -0
- package/dist/cjs/components/progress-bar/daikin-progress-bar.d.ts +47 -0
- package/dist/cjs/components/progress-bar/index.cjs +7 -0
- package/dist/cjs/components/progress-bar/index.d.ts +1 -0
- package/dist/cjs/components/radio/daikin-radio.d.ts +0 -1
- package/dist/cjs/components/tab/daikin-tab.d.ts +0 -1
- package/dist/cjs/components/tab-group/daikin-tab-group.d.ts +0 -1
- package/dist/cjs/components/text-input/daikin-text-input.d.ts +0 -1
- package/dist/cjs/components/textarea/daikin-textarea.d.ts +0 -1
- package/dist/cjs/components/toggle/daikin-toggle.d.ts +0 -1
- package/dist/cjs/components/tooltip/daikin-tooltip.cjs +223 -0
- package/dist/cjs/components/tooltip/daikin-tooltip.d.ts +76 -0
- package/dist/cjs/components/tooltip/index.cjs +7 -0
- package/dist/cjs/components/tooltip/index.d.ts +1 -0
- package/dist/cjs/index.cjs +20 -0
- package/dist/cjs/is-client.cjs +5 -0
- package/dist/cjs/is-client.d.ts +1 -0
- package/dist/cjs/tailwind.css.cjs +2 -2
- package/dist/cjs/type-utils.d.ts +0 -1
- package/dist/cjs-dev/components/accordion/daikin-accordion.d.ts +0 -1
- package/dist/cjs-dev/components/accordion-item/daikin-accordion-item.d.ts +0 -1
- package/dist/cjs-dev/components/breadcrumb/daikin-breadcrumb.cjs +124 -0
- package/dist/cjs-dev/components/breadcrumb/daikin-breadcrumb.d.ts +52 -0
- package/dist/cjs-dev/components/breadcrumb/index.cjs +7 -0
- package/dist/cjs-dev/components/breadcrumb/index.d.ts +1 -0
- package/dist/cjs-dev/components/breadcrumb-item/daikin-breadcrumb-item.cjs +116 -0
- package/dist/cjs-dev/components/breadcrumb-item/daikin-breadcrumb-item.d.ts +62 -0
- package/dist/cjs-dev/components/breadcrumb-item/index.cjs +7 -0
- package/dist/cjs-dev/components/breadcrumb-item/index.d.ts +1 -0
- package/dist/cjs-dev/components/button/daikin-button.d.ts +0 -1
- package/dist/cjs-dev/components/checkbox/daikin-checkbox.d.ts +0 -1
- package/dist/cjs-dev/components/icon/daikin-icon.d.ts +0 -1
- package/dist/cjs-dev/components/index.cjs +20 -0
- package/dist/cjs-dev/components/index.d.ts +4 -0
- package/dist/cjs-dev/components/input-group/daikin-input-group.cjs +1 -1
- package/dist/cjs-dev/components/input-group/daikin-input-group.d.ts +0 -1
- package/dist/cjs-dev/components/notification/daikin-notification.d.ts +0 -1
- package/dist/cjs-dev/components/panel-switcher/daikin-panel-switcher.d.ts +0 -1
- package/dist/cjs-dev/components/progress-bar/daikin-progress-bar.cjs +152 -0
- package/dist/cjs-dev/components/progress-bar/daikin-progress-bar.d.ts +47 -0
- package/dist/cjs-dev/components/progress-bar/index.cjs +7 -0
- package/dist/cjs-dev/components/progress-bar/index.d.ts +1 -0
- package/dist/cjs-dev/components/radio/daikin-radio.d.ts +0 -1
- package/dist/cjs-dev/components/tab/daikin-tab.d.ts +0 -1
- package/dist/cjs-dev/components/tab-group/daikin-tab-group.d.ts +0 -1
- package/dist/cjs-dev/components/text-input/daikin-text-input.d.ts +0 -1
- package/dist/cjs-dev/components/textarea/daikin-textarea.d.ts +0 -1
- package/dist/cjs-dev/components/toggle/daikin-toggle.d.ts +0 -1
- package/dist/cjs-dev/components/tooltip/daikin-tooltip.cjs +223 -0
- package/dist/cjs-dev/components/tooltip/daikin-tooltip.d.ts +76 -0
- package/dist/cjs-dev/components/tooltip/index.cjs +7 -0
- package/dist/cjs-dev/components/tooltip/index.d.ts +1 -0
- package/dist/cjs-dev/index.cjs +20 -0
- package/dist/cjs-dev/is-client.cjs +5 -0
- package/dist/cjs-dev/is-client.d.ts +1 -0
- package/dist/cjs-dev/tailwind.css.cjs +2 -2
- package/dist/cjs-dev/type-utils.d.ts +0 -1
- package/dist/es/components/accordion/daikin-accordion.d.ts +0 -1
- package/dist/es/components/accordion-item/daikin-accordion-item.d.ts +0 -1
- package/dist/es/components/breadcrumb/daikin-breadcrumb.d.ts +52 -0
- package/dist/es/components/breadcrumb/daikin-breadcrumb.js +125 -0
- package/dist/es/components/breadcrumb/index.d.ts +1 -0
- package/dist/es/components/breadcrumb/index.js +4 -0
- package/dist/es/components/breadcrumb-item/daikin-breadcrumb-item.d.ts +62 -0
- package/dist/es/components/breadcrumb-item/daikin-breadcrumb-item.js +117 -0
- package/dist/es/components/breadcrumb-item/index.d.ts +1 -0
- package/dist/es/components/breadcrumb-item/index.js +4 -0
- package/dist/es/components/button/daikin-button.d.ts +0 -1
- package/dist/es/components/checkbox/daikin-checkbox.d.ts +0 -1
- package/dist/es/components/icon/daikin-icon.d.ts +0 -1
- package/dist/es/components/index.d.ts +4 -0
- package/dist/es/components/index.js +8 -0
- package/dist/es/components/input-group/daikin-input-group.d.ts +0 -1
- package/dist/es/components/input-group/daikin-input-group.js +1 -1
- package/dist/es/components/notification/daikin-notification.d.ts +0 -1
- package/dist/es/components/panel-switcher/daikin-panel-switcher.d.ts +0 -1
- package/dist/es/components/progress-bar/daikin-progress-bar.d.ts +47 -0
- package/dist/es/components/progress-bar/daikin-progress-bar.js +138 -0
- package/dist/es/components/progress-bar/index.d.ts +1 -0
- package/dist/es/components/progress-bar/index.js +4 -0
- package/dist/es/components/radio/daikin-radio.d.ts +0 -1
- package/dist/es/components/tab/daikin-tab.d.ts +0 -1
- package/dist/es/components/tab-group/daikin-tab-group.d.ts +0 -1
- package/dist/es/components/text-input/daikin-text-input.d.ts +0 -1
- package/dist/es/components/textarea/daikin-textarea.d.ts +0 -1
- package/dist/es/components/toggle/daikin-toggle.d.ts +0 -1
- package/dist/es/components/tooltip/daikin-tooltip.d.ts +76 -0
- package/dist/es/components/tooltip/daikin-tooltip.js +224 -0
- package/dist/es/components/tooltip/index.d.ts +1 -0
- package/dist/es/components/tooltip/index.js +4 -0
- package/dist/es/index.js +8 -0
- package/dist/es/is-client.d.ts +1 -0
- package/dist/es/is-client.js +5 -0
- package/dist/es/tailwind.css.js +2 -2
- package/dist/es/type-utils.d.ts +0 -1
- package/dist/es-dev/components/accordion/daikin-accordion.d.ts +0 -1
- package/dist/es-dev/components/accordion-item/daikin-accordion-item.d.ts +0 -1
- package/dist/es-dev/components/breadcrumb/daikin-breadcrumb.d.ts +52 -0
- package/dist/es-dev/components/breadcrumb/daikin-breadcrumb.js +125 -0
- package/dist/es-dev/components/breadcrumb/index.d.ts +1 -0
- package/dist/es-dev/components/breadcrumb/index.js +4 -0
- package/dist/es-dev/components/breadcrumb-item/daikin-breadcrumb-item.d.ts +62 -0
- package/dist/es-dev/components/breadcrumb-item/daikin-breadcrumb-item.js +117 -0
- package/dist/es-dev/components/breadcrumb-item/index.d.ts +1 -0
- package/dist/es-dev/components/breadcrumb-item/index.js +4 -0
- package/dist/es-dev/components/button/daikin-button.d.ts +0 -1
- package/dist/es-dev/components/checkbox/daikin-checkbox.d.ts +0 -1
- package/dist/es-dev/components/icon/daikin-icon.d.ts +0 -1
- package/dist/es-dev/components/index.d.ts +4 -0
- package/dist/es-dev/components/index.js +8 -0
- package/dist/es-dev/components/input-group/daikin-input-group.d.ts +0 -1
- package/dist/es-dev/components/input-group/daikin-input-group.js +1 -1
- package/dist/es-dev/components/notification/daikin-notification.d.ts +0 -1
- package/dist/es-dev/components/panel-switcher/daikin-panel-switcher.d.ts +0 -1
- package/dist/es-dev/components/progress-bar/daikin-progress-bar.d.ts +47 -0
- package/dist/es-dev/components/progress-bar/daikin-progress-bar.js +153 -0
- package/dist/es-dev/components/progress-bar/index.d.ts +1 -0
- package/dist/es-dev/components/progress-bar/index.js +4 -0
- package/dist/es-dev/components/radio/daikin-radio.d.ts +0 -1
- package/dist/es-dev/components/tab/daikin-tab.d.ts +0 -1
- package/dist/es-dev/components/tab-group/daikin-tab-group.d.ts +0 -1
- package/dist/es-dev/components/text-input/daikin-text-input.d.ts +0 -1
- package/dist/es-dev/components/textarea/daikin-textarea.d.ts +0 -1
- package/dist/es-dev/components/toggle/daikin-toggle.d.ts +0 -1
- package/dist/es-dev/components/tooltip/daikin-tooltip.d.ts +76 -0
- package/dist/es-dev/components/tooltip/daikin-tooltip.js +224 -0
- package/dist/es-dev/components/tooltip/index.d.ts +1 -0
- package/dist/es-dev/components/tooltip/index.js +4 -0
- package/dist/es-dev/index.js +8 -0
- package/dist/es-dev/is-client.d.ts +1 -0
- package/dist/es-dev/is-client.js +5 -0
- package/dist/es-dev/tailwind.css.js +2 -2
- package/dist/es-dev/type-utils.d.ts +0 -1
- package/icons/status-positive.svg +15 -0
- package/package.json +46 -44
- /package/icons/{input-group-error.svg → status-negative.svg} +0 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
# @daikin-oss/design-system-web-components
|
|
2
|
+
|
|
3
|
+
## 0.3.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#24](https://github.com/dsv-rp/DDS/pull/24) [`b2971f4`](https://github.com/dsv-rp/DDS/commit/b2971f4f4fff45d7615157e00314ea26ccc747f9) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Add Breadcrumbs Component
|
|
8
|
+
|
|
9
|
+
- [#42](https://github.com/dsv-rp/DDS/pull/42) [`7db6d0e`](https://github.com/dsv-rp/DDS/commit/7db6d0e0f2f823d9c0ff80e287060b92f32a89ff) Thanks [@yodas7](https://github.com/yodas7)! - Update dependencies.
|
|
10
|
+
|
|
11
|
+
- lit: ^3.1.4 -> ^3.2.0
|
|
12
|
+
|
|
13
|
+
- [#34](https://github.com/dsv-rp/DDS/pull/34) [`dc2640a`](https://github.com/dsv-rp/DDS/commit/dc2640a012c9fb8ab74b969c4721c15a3f814e2c) Thanks [@poetrainy](https://github.com/poetrainy)! - Add Progress Bar Component.
|
|
14
|
+
|
|
15
|
+
- [#40](https://github.com/dsv-rp/DDS/pull/40) [`d11ec1d`](https://github.com/dsv-rp/DDS/commit/d11ec1d49f9d8c7b9a32582954b9b3f96123c1ef) Thanks [@yodas7](https://github.com/yodas7)! - Include CHANGELOG.md in the package.
|
|
16
|
+
|
|
17
|
+
- [#29](https://github.com/dsv-rp/DDS/pull/29) [`38a7063`](https://github.com/dsv-rp/DDS/commit/38a706337a4008b163b05fe4f4b90b838b4be4fc) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Add Tooltip Component.
|
|
18
|
+
|
|
19
|
+
- [#52](https://github.com/dsv-rp/DDS/pull/52) [`d477bae`](https://github.com/dsv-rp/DDS/commit/d477baec057acf00c42038ebcbd7eeba5a13989e) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Add document to breadcrumb component.
|
|
20
|
+
|
|
21
|
+
## 0.3.1
|
|
22
|
+
|
|
23
|
+
### Patch Changes
|
|
24
|
+
|
|
25
|
+
- [#38](https://github.com/dsv-rp/DDS/pull/38) [`8be9351`](https://github.com/dsv-rp/DDS/commit/8be93513040a738f36c0ade2d3a7bb2dc7b0d91f) Thanks [@yodas7](https://github.com/yodas7)! - Fix package not released successfully due to the lack of repository field.
|
|
26
|
+
|
|
27
|
+
## 0.3.0
|
|
28
|
+
|
|
29
|
+
### Minor Changes
|
|
30
|
+
|
|
31
|
+
- [#7](https://github.com/dsv-rp/DDS/pull/7) Navigation Tab
|
|
32
|
+
- [#18](https://github.com/dsv-rp/DDS/pull/18) Icon
|
|
33
|
+
- [#20](https://github.com/dsv-rp/DDS/pull/20) Accordion
|
|
34
|
+
- [#30](https://github.com/dsv-rp/DDS/pull/30) Toggle Switch
|
|
35
|
+
- Add icon to button component
|
|
36
|
+
- Add icon to notification component
|
|
37
|
+
|
|
38
|
+
### Patch Changes
|
|
39
|
+
|
|
40
|
+
- [#33](https://github.com/dsv-rp/DDS/pull/33) [`7dabcfc`](https://github.com/dsv-rp/DDS/commit/7dabcfc08dd3bf9f7dbcc368e0afc25b878f53d0) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Improve Storybook documents
|
|
41
|
+
|
|
42
|
+
- [#31](https://github.com/dsv-rp/DDS/pull/31) [`f72fbbd`](https://github.com/dsv-rp/DDS/commit/f72fbbd4791a0aad32fe9359ff30bc506d14afff) Thanks [@yodas7](https://github.com/yodas7)! - Introduce Changesets.
|
|
43
|
+
|
|
44
|
+
- [#35](https://github.com/dsv-rp/DDS/pull/35) Fix button text being wrapped
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { LitElement, PropertyValues } from 'lit';
|
|
2
|
-
|
|
3
2
|
/**
|
|
4
3
|
* The accordion item component is a child element within the `daikin-accordion` component.
|
|
5
4
|
* It functions similarly to the HTML `<details>` and `<summary>` tag, allowing users to expand or collapse the associated content by clicking on the header.
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const lit = require("lit");
|
|
4
|
+
const decorators_js = require("lit/decorators.js");
|
|
5
|
+
const ref_js = require("lit/directives/ref.js");
|
|
6
|
+
const tailwind = require("../../tailwind.css.cjs");
|
|
7
|
+
var __defProp = Object.defineProperty;
|
|
8
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
9
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
10
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
11
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
12
|
+
if (decorator = decorators[i])
|
|
13
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
14
|
+
if (kind && result) __defProp(target, key, result);
|
|
15
|
+
return result;
|
|
16
|
+
};
|
|
17
|
+
exports.DaikinBreadcrumb = class DaikinBreadcrumb extends lit.LitElement {
|
|
18
|
+
constructor() {
|
|
19
|
+
super(...arguments);
|
|
20
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
21
|
+
this._omit();
|
|
22
|
+
});
|
|
23
|
+
this._divWrapRef = ref_js.createRef();
|
|
24
|
+
this.trailingSlash = false;
|
|
25
|
+
this.overflow = "visible";
|
|
26
|
+
this._expandedContentWidth = 0;
|
|
27
|
+
this.omitted = false;
|
|
28
|
+
}
|
|
29
|
+
get _isEllipsis() {
|
|
30
|
+
return this.overflow === "ellipsis";
|
|
31
|
+
}
|
|
32
|
+
_omit() {
|
|
33
|
+
const shouldOmit = this._isEllipsis && this.offsetWidth < this._expandedContentWidth;
|
|
34
|
+
if (this.omitted === shouldOmit) {
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
this.omitted = shouldOmit;
|
|
38
|
+
const daikinBreadCrumbItems = this._slottedDaikinBreadCrumbItems;
|
|
39
|
+
for (const [index, item] of daikinBreadCrumbItems.entries()) {
|
|
40
|
+
let mode = "normal";
|
|
41
|
+
if (shouldOmit) {
|
|
42
|
+
if (index === 0 || index >= daikinBreadCrumbItems.length - 2) {
|
|
43
|
+
continue;
|
|
44
|
+
} else if (index === 1) {
|
|
45
|
+
mode = "ellipsis";
|
|
46
|
+
} else {
|
|
47
|
+
mode = "hidden";
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
item.hidden = mode === "hidden";
|
|
51
|
+
item.variant = mode === "ellipsis" ? "ellipsis" : "normal";
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
_updateBreadcrumbs() {
|
|
55
|
+
const daikinBreadCrumbItems = this._slottedDaikinBreadCrumbItems;
|
|
56
|
+
for (const [index, item] of daikinBreadCrumbItems.entries()) {
|
|
57
|
+
if (index === daikinBreadCrumbItems.length - 1) {
|
|
58
|
+
item.trailingSlash = this.trailingSlash;
|
|
59
|
+
item.disabled = true;
|
|
60
|
+
continue;
|
|
61
|
+
}
|
|
62
|
+
item.trailingSlash = true;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
_handleChange() {
|
|
66
|
+
this._updateBreadcrumbs();
|
|
67
|
+
}
|
|
68
|
+
_handleResizeObserver() {
|
|
69
|
+
if (this._isEllipsis) {
|
|
70
|
+
this.resizeObserver.observe(this);
|
|
71
|
+
} else {
|
|
72
|
+
this.resizeObserver.disconnect();
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
render() {
|
|
76
|
+
return lit.html`
|
|
77
|
+
<div class="flex gap-2" ${ref_js.ref(this._divWrapRef)}>
|
|
78
|
+
<slot @slotchange=${this._handleChange}></slot>
|
|
79
|
+
</div>
|
|
80
|
+
`;
|
|
81
|
+
}
|
|
82
|
+
updated(changedProperties) {
|
|
83
|
+
if (changedProperties.has("trailingSlash")) {
|
|
84
|
+
this._updateBreadcrumbs();
|
|
85
|
+
}
|
|
86
|
+
if (changedProperties.has("overflow")) {
|
|
87
|
+
this._omit();
|
|
88
|
+
this._handleResizeObserver();
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
firstUpdated() {
|
|
92
|
+
this._updateBreadcrumbs();
|
|
93
|
+
this._omit();
|
|
94
|
+
this._handleResizeObserver();
|
|
95
|
+
this.updateComplete.then(() => {
|
|
96
|
+
const divElement = this._divWrapRef.value;
|
|
97
|
+
if (!divElement) {
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
100
|
+
this._expandedContentWidth = divElement.offsetWidth;
|
|
101
|
+
}).catch(() => {
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
};
|
|
105
|
+
exports.DaikinBreadcrumb.styles = lit.css`
|
|
106
|
+
${lit.unsafeCSS(tailwind.default)}
|
|
107
|
+
|
|
108
|
+
:host {
|
|
109
|
+
display: flex;
|
|
110
|
+
align-items: center;
|
|
111
|
+
}
|
|
112
|
+
`;
|
|
113
|
+
__decorateClass([
|
|
114
|
+
decorators_js.queryAssignedElements()
|
|
115
|
+
], exports.DaikinBreadcrumb.prototype, "_slottedDaikinBreadCrumbItems", 2);
|
|
116
|
+
__decorateClass([
|
|
117
|
+
decorators_js.property({ type: Boolean, reflect: true, attribute: "trailing-slash" })
|
|
118
|
+
], exports.DaikinBreadcrumb.prototype, "trailingSlash", 2);
|
|
119
|
+
__decorateClass([
|
|
120
|
+
decorators_js.property({ type: String, reflect: true })
|
|
121
|
+
], exports.DaikinBreadcrumb.prototype, "overflow", 2);
|
|
122
|
+
exports.DaikinBreadcrumb = __decorateClass([
|
|
123
|
+
decorators_js.customElement("daikin-breadcrumb")
|
|
124
|
+
], exports.DaikinBreadcrumb);
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { LitElement, PropertyValues } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* `daikin-breadcrumb` is a component for representing a breadcrumb list, and is used together with the `daikin-breadcrumb-item` component.
|
|
4
|
+
*
|
|
5
|
+
* Hierarchy:
|
|
6
|
+
* - `daikin-breadcrumb` > `daikin-breadcrumb-item`
|
|
7
|
+
*
|
|
8
|
+
* @slot - A slot for breadcrumb items. Place `breadcrumb-item` elements here.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
*
|
|
12
|
+
* ```html
|
|
13
|
+
* <daikin-breadcrumb>
|
|
14
|
+
* <daikin-breadcrumb-item href="#">
|
|
15
|
+
* Breadcrumb Item 1
|
|
16
|
+
* </daikin-breadcrumb-item>
|
|
17
|
+
* <daikin-breadcrumb-item href="#">
|
|
18
|
+
* Breadcrumb Item 2
|
|
19
|
+
* </daikin-breadcrumb-item>
|
|
20
|
+
* </daikin-breadcrumb>
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
23
|
+
export declare class DaikinBreadcrumb extends LitElement {
|
|
24
|
+
static readonly styles: import('lit').CSSResult;
|
|
25
|
+
private resizeObserver;
|
|
26
|
+
private _slottedDaikinBreadCrumbItems;
|
|
27
|
+
private _divWrapRef;
|
|
28
|
+
/**
|
|
29
|
+
* Whether the last breadcrumb item should have trailing slash.
|
|
30
|
+
*/
|
|
31
|
+
trailingSlash: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Specifies overflow.
|
|
34
|
+
* If `ellipsis`, some breadcrumb items will be omitted when the total width exceeds the container width.
|
|
35
|
+
*/
|
|
36
|
+
overflow: "visible" | "ellipsis";
|
|
37
|
+
private _expandedContentWidth;
|
|
38
|
+
private omitted;
|
|
39
|
+
get _isEllipsis(): boolean;
|
|
40
|
+
private _omit;
|
|
41
|
+
private _updateBreadcrumbs;
|
|
42
|
+
private _handleChange;
|
|
43
|
+
private _handleResizeObserver;
|
|
44
|
+
render(): import('lit-html').TemplateResult<1>;
|
|
45
|
+
updated(changedProperties: PropertyValues<this>): void;
|
|
46
|
+
firstUpdated(): void;
|
|
47
|
+
}
|
|
48
|
+
declare global {
|
|
49
|
+
interface HTMLElementTagNameMap {
|
|
50
|
+
"daikin-breadcrumb": DaikinBreadcrumb;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const daikinBreadcrumb = require("./daikin-breadcrumb.cjs");
|
|
4
|
+
Object.defineProperty(exports, "DaikinBreadcrumb", {
|
|
5
|
+
enumerable: true,
|
|
6
|
+
get: () => daikinBreadcrumb.DaikinBreadcrumb
|
|
7
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './daikin-breadcrumb';
|
|
@@ -0,0 +1,116 @@
|
|
|
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 tailwind = require("../../tailwind.css.cjs");
|
|
8
|
+
var __defProp = Object.defineProperty;
|
|
9
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
10
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
11
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
12
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
13
|
+
if (decorator = decorators[i])
|
|
14
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
15
|
+
if (kind && result) __defProp(target, key, result);
|
|
16
|
+
return result;
|
|
17
|
+
};
|
|
18
|
+
const cvaLinkSlot = classVarianceAuthority.cva(
|
|
19
|
+
[
|
|
20
|
+
"slotted:h-8",
|
|
21
|
+
"slotted:font-normal",
|
|
22
|
+
"slotted:not-italic",
|
|
23
|
+
"slotted:leading-8",
|
|
24
|
+
"slotted:text-sm",
|
|
25
|
+
"slotted:text-daikinBlue-500",
|
|
26
|
+
"slotted:outline-none",
|
|
27
|
+
"slotted:font-daikinSerif"
|
|
28
|
+
],
|
|
29
|
+
{
|
|
30
|
+
variants: {
|
|
31
|
+
variant: {
|
|
32
|
+
normal: [
|
|
33
|
+
"slotted:hover:text-daikinBlue-300",
|
|
34
|
+
"slotted:active:text-daikinNeutral-800",
|
|
35
|
+
"slotted-[*:focus-visible]:text-daikinBlue-700"
|
|
36
|
+
],
|
|
37
|
+
ellipsis: ["slotted:hover:text-daikinBlue-300"]
|
|
38
|
+
},
|
|
39
|
+
disabled: {
|
|
40
|
+
true: [
|
|
41
|
+
"slotted:!text-daikinNeutral-800",
|
|
42
|
+
"slotted:pointer-events-none",
|
|
43
|
+
"slotted:cursor-default",
|
|
44
|
+
"slotted-[*:focus-visible]:!text-daikinNeutral-800"
|
|
45
|
+
],
|
|
46
|
+
false: []
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
);
|
|
51
|
+
exports.DaikinBreadcrumbItem = class DaikinBreadcrumbItem extends lit.LitElement {
|
|
52
|
+
constructor() {
|
|
53
|
+
super(...arguments);
|
|
54
|
+
this.href = "";
|
|
55
|
+
this.variant = "normal";
|
|
56
|
+
this.disabled = false;
|
|
57
|
+
this.target = null;
|
|
58
|
+
this.trailingSlash = false;
|
|
59
|
+
this.hidden = false;
|
|
60
|
+
}
|
|
61
|
+
render() {
|
|
62
|
+
const slash = this.trailingSlash ? lit.html`<span class="text-daikinNeutral-800 font-daikinSerif">/</span>` : null;
|
|
63
|
+
return lit.html`
|
|
64
|
+
${this.variant === "normal" ? lit.html`<slot name="link" class=${cvaLinkSlot(this)}>
|
|
65
|
+
<a
|
|
66
|
+
href=${ifDefined_js.ifDefined(this.href)}
|
|
67
|
+
target=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
|
|
68
|
+
ifDefined_js.ifDefined(this.target)}
|
|
69
|
+
>
|
|
70
|
+
<slot></slot>
|
|
71
|
+
</a>
|
|
72
|
+
</slot>` : (
|
|
73
|
+
// Though `cvaLinkSlot` is designed for slots, it contains "& > *" selector for fallback content so it can be used here.
|
|
74
|
+
lit.html`<span class=${cvaLinkSlot(this)} aria-label="…">
|
|
75
|
+
<span>. . .</span>
|
|
76
|
+
</span> `
|
|
77
|
+
)}
|
|
78
|
+
${slash}
|
|
79
|
+
`;
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
exports.DaikinBreadcrumbItem.styles = lit.css`
|
|
83
|
+
${lit.unsafeCSS(tailwind.default)}
|
|
84
|
+
|
|
85
|
+
:host {
|
|
86
|
+
display: inline-flex;
|
|
87
|
+
align-items: center;
|
|
88
|
+
gap: 8px;
|
|
89
|
+
flex-shrink: 0;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
:host([hidden]) {
|
|
93
|
+
display: none;
|
|
94
|
+
}
|
|
95
|
+
`;
|
|
96
|
+
__decorateClass([
|
|
97
|
+
decorators_js.property({ type: String, reflect: true })
|
|
98
|
+
], exports.DaikinBreadcrumbItem.prototype, "href", 2);
|
|
99
|
+
__decorateClass([
|
|
100
|
+
decorators_js.property({ type: String, reflect: true })
|
|
101
|
+
], exports.DaikinBreadcrumbItem.prototype, "variant", 2);
|
|
102
|
+
__decorateClass([
|
|
103
|
+
decorators_js.property({ type: Boolean, reflect: true })
|
|
104
|
+
], exports.DaikinBreadcrumbItem.prototype, "disabled", 2);
|
|
105
|
+
__decorateClass([
|
|
106
|
+
decorators_js.property({ type: String, reflect: true })
|
|
107
|
+
], exports.DaikinBreadcrumbItem.prototype, "target", 2);
|
|
108
|
+
__decorateClass([
|
|
109
|
+
decorators_js.property({ type: Boolean, reflect: true, attribute: "trailing-slash" })
|
|
110
|
+
], exports.DaikinBreadcrumbItem.prototype, "trailingSlash", 2);
|
|
111
|
+
__decorateClass([
|
|
112
|
+
decorators_js.property({ type: Boolean, reflect: true })
|
|
113
|
+
], exports.DaikinBreadcrumbItem.prototype, "hidden", 2);
|
|
114
|
+
exports.DaikinBreadcrumbItem = __decorateClass([
|
|
115
|
+
decorators_js.customElement("daikin-breadcrumb-item")
|
|
116
|
+
], exports.DaikinBreadcrumbItem);
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import { MergeVariantProps } from '../../type-utils';
|
|
3
|
+
declare const cvaLinkSlot: (props?: ({
|
|
4
|
+
variant?: "normal" | "ellipsis" | null | undefined;
|
|
5
|
+
disabled?: boolean | null | undefined;
|
|
6
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
|
+
type LinkVariantProps = MergeVariantProps<typeof cvaLinkSlot>;
|
|
8
|
+
/**
|
|
9
|
+
* The `daikin-breadcrumb-item` is a component used to represent each item of the breadcrumb list, and is used as a child element of the `daikin-breadcrumb` component.
|
|
10
|
+
*
|
|
11
|
+
* Hierarchy:
|
|
12
|
+
* - `daikin-breadcrumb` > `daikin-breadcrumb-item`
|
|
13
|
+
*
|
|
14
|
+
* @slot - A slot for the breadcrumb item content.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
*
|
|
18
|
+
* ```html
|
|
19
|
+
* <!-- See `daikin-breadcrumb` component for complete example. -->
|
|
20
|
+
* <daikin-breadcrumb-item href="#">
|
|
21
|
+
* Breadcrumb Item 1
|
|
22
|
+
* </daikin-breadcrumb-item>
|
|
23
|
+
* ```
|
|
24
|
+
*/
|
|
25
|
+
export declare class DaikinBreadcrumbItem extends LitElement {
|
|
26
|
+
static styles: import('lit').CSSResult;
|
|
27
|
+
/**
|
|
28
|
+
* Specify link href
|
|
29
|
+
*/
|
|
30
|
+
href: string;
|
|
31
|
+
/**
|
|
32
|
+
* Specifies the display content.
|
|
33
|
+
* If `ellipsis`, the "..." will be displayed instead of the link.
|
|
34
|
+
* Set automatically by `daikin-breadcrumb`.
|
|
35
|
+
*/
|
|
36
|
+
variant: LinkVariantProps["variant"];
|
|
37
|
+
/**
|
|
38
|
+
* Specify whether the link should be disabled
|
|
39
|
+
*/
|
|
40
|
+
disabled: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* Specify the link target
|
|
43
|
+
*/
|
|
44
|
+
target: string | null;
|
|
45
|
+
/**
|
|
46
|
+
* Whether the slash after the link should shown.
|
|
47
|
+
* Set automatically by `daikin-breadcrumb`.
|
|
48
|
+
*/
|
|
49
|
+
trailingSlash: boolean;
|
|
50
|
+
/**
|
|
51
|
+
* Whether the link should be hidden when ellipsis mode.
|
|
52
|
+
* Set automatically by `daikin-breadcrumb`.
|
|
53
|
+
*/
|
|
54
|
+
hidden: boolean;
|
|
55
|
+
render(): import('lit-html').TemplateResult<1>;
|
|
56
|
+
}
|
|
57
|
+
declare global {
|
|
58
|
+
interface HTMLElementTagNameMap {
|
|
59
|
+
"daikin-breadcrumb-item": DaikinBreadcrumbItem;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const daikinBreadcrumbItem = require("./daikin-breadcrumb-item.cjs");
|
|
4
|
+
Object.defineProperty(exports, "DaikinBreadcrumbItem", {
|
|
5
|
+
enumerable: true,
|
|
6
|
+
get: () => daikinBreadcrumbItem.DaikinBreadcrumbItem
|
|
7
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './daikin-breadcrumb-item';
|
|
@@ -2,7 +2,6 @@ import { LitElement } from 'lit';
|
|
|
2
2
|
import { ARIARole } from '../../lit-analyzer-types';
|
|
3
3
|
import { MergeVariantProps } from '../../type-utils';
|
|
4
4
|
import { IconType } from '../icon/daikin-icon';
|
|
5
|
-
|
|
6
5
|
declare const cvaButton: (props?: ({
|
|
7
6
|
intent?: "primary" | "secondary" | "tertiary" | "primaryDanger" | null | undefined;
|
|
8
7
|
size?: "default" | "condensed" | null | undefined;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { LitElement, PropertyValues } from 'lit';
|
|
2
2
|
import { MergeVariantProps } from '../../type-utils';
|
|
3
|
-
|
|
4
3
|
declare const cvaCheckbox: (props?: ({
|
|
5
4
|
size?: "small" | "large" | null | undefined;
|
|
6
5
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
@@ -2,18 +2,22 @@
|
|
|
2
2
|
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
|
+
const daikinBreadcrumb = require("./breadcrumb/daikin-breadcrumb.cjs");
|
|
6
|
+
const daikinBreadcrumbItem = require("./breadcrumb-item/daikin-breadcrumb-item.cjs");
|
|
5
7
|
const daikinButton = require("./button/daikin-button.cjs");
|
|
6
8
|
const daikinCheckbox = require("./checkbox/daikin-checkbox.cjs");
|
|
7
9
|
const daikinIcon = require("./icon/daikin-icon.cjs");
|
|
8
10
|
const daikinInputGroup = require("./input-group/daikin-input-group.cjs");
|
|
9
11
|
const daikinNotification = require("./notification/daikin-notification.cjs");
|
|
10
12
|
const daikinPanelSwitcher = require("./panel-switcher/daikin-panel-switcher.cjs");
|
|
13
|
+
const daikinProgressBar = require("./progress-bar/daikin-progress-bar.cjs");
|
|
11
14
|
const daikinRadio = require("./radio/daikin-radio.cjs");
|
|
12
15
|
const daikinTab = require("./tab/daikin-tab.cjs");
|
|
13
16
|
const daikinTabGroup = require("./tab-group/daikin-tab-group.cjs");
|
|
14
17
|
const daikinTextInput = require("./text-input/daikin-text-input.cjs");
|
|
15
18
|
const daikinTextarea = require("./textarea/daikin-textarea.cjs");
|
|
16
19
|
const daikinToggle = require("./toggle/daikin-toggle.cjs");
|
|
20
|
+
const daikinTooltip = require("./tooltip/daikin-tooltip.cjs");
|
|
17
21
|
Object.defineProperty(exports, "DaikinAccordion", {
|
|
18
22
|
enumerable: true,
|
|
19
23
|
get: () => daikinAccordion.DaikinAccordion
|
|
@@ -22,6 +26,14 @@ Object.defineProperty(exports, "DaikinAccordionItem", {
|
|
|
22
26
|
enumerable: true,
|
|
23
27
|
get: () => daikinAccordionItem.DaikinAccordionItem
|
|
24
28
|
});
|
|
29
|
+
Object.defineProperty(exports, "DaikinBreadcrumb", {
|
|
30
|
+
enumerable: true,
|
|
31
|
+
get: () => daikinBreadcrumb.DaikinBreadcrumb
|
|
32
|
+
});
|
|
33
|
+
Object.defineProperty(exports, "DaikinBreadcrumbItem", {
|
|
34
|
+
enumerable: true,
|
|
35
|
+
get: () => daikinBreadcrumbItem.DaikinBreadcrumbItem
|
|
36
|
+
});
|
|
25
37
|
Object.defineProperty(exports, "DaikinButton", {
|
|
26
38
|
enumerable: true,
|
|
27
39
|
get: () => daikinButton.DaikinButton
|
|
@@ -47,6 +59,10 @@ Object.defineProperty(exports, "DaikinPanelSwitcher", {
|
|
|
47
59
|
enumerable: true,
|
|
48
60
|
get: () => daikinPanelSwitcher.DaikinPanelSwitcher
|
|
49
61
|
});
|
|
62
|
+
Object.defineProperty(exports, "DaikinProgressBar", {
|
|
63
|
+
enumerable: true,
|
|
64
|
+
get: () => daikinProgressBar.DaikinProgressBar
|
|
65
|
+
});
|
|
50
66
|
Object.defineProperty(exports, "DaikinRadio", {
|
|
51
67
|
enumerable: true,
|
|
52
68
|
get: () => daikinRadio.DaikinRadio
|
|
@@ -71,3 +87,7 @@ Object.defineProperty(exports, "DaikinToggle", {
|
|
|
71
87
|
enumerable: true,
|
|
72
88
|
get: () => daikinToggle.DaikinToggle
|
|
73
89
|
});
|
|
90
|
+
Object.defineProperty(exports, "DaikinTooltip", {
|
|
91
|
+
enumerable: true,
|
|
92
|
+
get: () => daikinTooltip.DaikinTooltip
|
|
93
|
+
});
|
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
export * from './accordion';
|
|
2
2
|
export * from './accordion-item';
|
|
3
|
+
export * from './breadcrumb';
|
|
4
|
+
export * from './breadcrumb-item';
|
|
3
5
|
export * from './button';
|
|
4
6
|
export * from './checkbox';
|
|
5
7
|
export * from './icon';
|
|
6
8
|
export * from './input-group';
|
|
7
9
|
export * from './notification';
|
|
8
10
|
export * from './panel-switcher';
|
|
11
|
+
export * from './progress-bar';
|
|
9
12
|
export * from './radio';
|
|
10
13
|
export * from './tab';
|
|
11
14
|
export * from './tab-group';
|
|
12
15
|
export * from './text-input';
|
|
13
16
|
export * from './textarea';
|
|
14
17
|
export * from './toggle';
|
|
18
|
+
export * from './tooltip';
|
|
@@ -70,7 +70,7 @@ exports.DaikinInputGroup = class DaikinInputGroup extends lit.LitElement {
|
|
|
70
70
|
<slot @slotchange=${this._handleSlotChange}></slot>
|
|
71
71
|
${this.helper && !this.error ? lit.html`<span class=${inputGroupHelperClassName}>${this.helper}</span>` : null}
|
|
72
72
|
${!this.disabled && !!this.error ? lit.html`<span
|
|
73
|
-
class="flex gap-2 text-[--input-group-border-color-error] leading-[22px] before:i-daikin-
|
|
73
|
+
class="flex gap-2 text-[--input-group-border-color-error] leading-[22px] before:i-daikin-status-negative before:block before:w-[16px] before:h-[22px]"
|
|
74
74
|
>${this.error}</span
|
|
75
75
|
>` : null}
|
|
76
76
|
</label>
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
2
|
import { DaikinTextInput } from '../text-input/daikin-text-input';
|
|
3
3
|
import { DaikinTextarea } from '../textarea/daikin-textarea';
|
|
4
|
-
|
|
5
4
|
type ControlElement = DaikinTextInput | DaikinTextarea;
|
|
6
5
|
/**
|
|
7
6
|
* 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.
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
2
|
import { MergeVariantProps } from '../../type-utils';
|
|
3
|
-
|
|
4
3
|
declare const cvaContainer: (props?: ({
|
|
5
4
|
variant?: "toast" | "inline" | null | undefined;
|
|
6
5
|
status?: "alarm" | "information" | "negative" | "positive" | "warning" | null | undefined;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
2
|
import { ARIARole } from '../../lit-analyzer-types';
|
|
3
|
-
|
|
4
3
|
/**
|
|
5
4
|
* 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.
|
|
6
5
|
* When a user selects a tab, the panel switcher component ensures the corresponding content panel is shown while hiding the others.
|