@iyulab/components 0.1.0 → 0.1.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 +8 -0
- package/dist/assets/icons/arrow-clockwise.svg.js +3 -7
- package/dist/assets/icons/arrow-down.svg.js +3 -6
- package/dist/assets/icons/arrow-up.svg.js +3 -6
- package/dist/assets/icons/ban.svg.js +3 -6
- package/dist/assets/icons/bell-fill.svg.js +3 -6
- package/dist/assets/icons/check-circle-fill.svg.js +3 -6
- package/dist/assets/icons/check-lg.svg.js +3 -6
- package/dist/assets/icons/chevron-down.svg.js +3 -6
- package/dist/assets/icons/chevron-left.svg.js +3 -6
- package/dist/assets/icons/chevron-right.svg.js +3 -6
- package/dist/assets/icons/chevron-up.svg.js +3 -6
- package/dist/assets/icons/copy.svg.js +3 -6
- package/dist/assets/icons/dash-lg.svg.js +3 -6
- package/dist/assets/icons/exclamation-circle-fill.svg.js +3 -6
- package/dist/assets/icons/exclamation-triangle-fill.svg.js +3 -6
- package/dist/assets/icons/eye-slash.svg.js +3 -8
- package/dist/assets/icons/eye.svg.js +3 -7
- package/dist/assets/icons/info-circle-fill.svg.js +3 -6
- package/dist/assets/icons/layout-sidebar.svg.js +3 -6
- package/dist/assets/icons/lightbulb-fill.svg.js +3 -6
- package/dist/assets/icons/lightbulb-off.svg.js +3 -6
- package/dist/assets/icons/lightbulb.svg.js +3 -6
- package/dist/assets/icons/mic-fill.svg.js +3 -7
- package/dist/assets/icons/mic-mute-fill.svg.js +3 -7
- package/dist/assets/icons/paperclip.svg.js +3 -6
- package/dist/assets/icons/pencil-square.svg.js +3 -7
- package/dist/assets/icons/plus-lg.svg.js +3 -6
- package/dist/assets/icons/search.svg.js +3 -6
- package/dist/assets/icons/speedometer.svg.js +3 -7
- package/dist/assets/icons/x-lg.svg.js +3 -6
- package/dist/assets/styles/dark.css.js +3 -4
- package/dist/assets/styles/light.css.js +3 -4
- package/dist/components/BaseElement.js +32 -22
- package/dist/components/BaseElement.styles.js +5 -5
- package/dist/components/alert/Alert.js +79 -51
- package/dist/components/alert/Alert.styles.js +5 -5
- package/dist/components/button/Button.js +29 -23
- package/dist/components/button/Button.styles.js +5 -5
- package/dist/components/context-menu/ContextMenu.js +123 -72
- package/dist/components/context-menu/ContextMenu.styles.js +5 -5
- package/dist/components/dialog/Dialog.js +73 -40
- package/dist/components/dialog/Dialog.styles.js +5 -5
- package/dist/components/form/Form.js +51 -32
- package/dist/components/form/Form.styles.js +5 -5
- package/dist/components/icon/Icon.js +53 -36
- package/dist/components/icon/Icon.styles.js +5 -5
- package/dist/components/icon-button/IconButton.js +44 -36
- package/dist/components/icon-button/IconButton.styles.js +5 -5
- package/dist/components/input/Input.js +161 -112
- package/dist/components/input/Input.styles.js +5 -5
- package/dist/components/menu/Menu.js +108 -58
- package/dist/components/menu/Menu.styles.js +5 -5
- package/dist/components/menu-item/MenuItem.js +67 -37
- package/dist/components/menu-item/MenuItem.styles.js +5 -5
- package/dist/components/panel/Panel.js +11 -10
- package/dist/components/panel/Panel.styles.js +5 -5
- package/dist/components/progress-ring/ProgressRing.js +70 -45
- package/dist/components/progress-ring/ProgressRing.styles.js +5 -5
- package/dist/components/spinner/Spinner.js +9 -9
- package/dist/components/spinner/Spinner.styles.js +5 -5
- package/dist/components/split-panel/SplitPanel.js +127 -66
- package/dist/components/split-panel/SplitPanel.styles.js +5 -5
- package/dist/components/split-panel/Splitter.js +29 -23
- package/dist/components/split-panel/Splitter.styles.js +5 -5
- package/dist/components/tooltip/Tooltip.js +115 -74
- package/dist/components/tooltip/Tooltip.styles.js +5 -5
- package/dist/index.js +18 -40
- package/dist/internals/attribute-converters.js +10 -8
- package/dist/internals/icons.js +41 -66
- package/dist/internals/node-helpers.js +16 -17
- package/dist/utilities/BrowserStorage.d.ts +43 -0
- package/dist/utilities/BrowserStorage.js +87 -0
- package/dist/utilities/decorators.js +19 -14
- package/dist/utilities/index.d.ts +1 -1
- package/dist/utilities/notifier.js +62 -20
- package/dist/utilities/theme.d.ts +38 -26
- package/dist/utilities/theme.js +110 -85
- package/package.json +2 -2
- package/dist/utilities/storage.d.ts +0 -60
- package/dist/utilities/storage.js +0 -120
package/CHANGELOG.md
CHANGED
|
@@ -1,4 +1,12 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.1.2 (2025-11-13)
|
|
4
|
+
- fixed a type issue in `theme` utility.
|
|
5
|
+
|
|
6
|
+
## 0.1.1 (2025-11-13)
|
|
7
|
+
- added `BrowserStorage` which supports `localStorage` and `cookie` with async methods for getting, setting, and removing items.
|
|
8
|
+
- changed theme `persist` option to `store` option, and fixed some issues.
|
|
9
|
+
- removed `toggle` method from theme utility.
|
|
10
|
+
|
|
3
11
|
## 0.1.0 (2025-11-12)
|
|
4
12
|
- Initial library version release
|
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
</svg>`;
|
|
5
|
-
export {
|
|
6
|
-
r as default
|
|
7
|
-
};
|
|
1
|
+
const arrowClockwise = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path fill-rule=\"evenodd\" d=\"M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z\"/>\r\n <path d=\"M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466\"/>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { arrowClockwise as default };
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
r as default
|
|
6
|
-
};
|
|
1
|
+
const arrowDown = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path stroke=\"currentColor\" stroke-width=\"1.5\" d=\"M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1\"/>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { arrowDown as default };
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
r as default
|
|
6
|
-
};
|
|
1
|
+
const arrowUp = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path stroke=\"currentColor\" stroke-width=\"1.5\" d=\"M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5\"/>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { arrowUp as default };
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
a as default
|
|
6
|
-
};
|
|
1
|
+
const ban = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path d=\"M15 8a6.97 6.97 0 0 0-1.71-4.584l-9.874 9.875A7 7 0 0 0 15 8M2.71 12.584l9.874-9.875a7 7 0 0 0-9.874 9.874ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0\"/>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { ban as default };
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
a as default
|
|
6
|
-
};
|
|
1
|
+
const bellFill = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2m.995-14.901a1 1 0 1 0-1.99 0A5 5 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901\"/>\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { bellFill as default };
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
a as default
|
|
6
|
-
};
|
|
1
|
+
const checkCircleFill = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z\"/>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { checkCircleFill as default };
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
a as default
|
|
6
|
-
};
|
|
1
|
+
const checkLg = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z\"/>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { checkLg as default };
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
a as default
|
|
6
|
-
};
|
|
1
|
+
const chevronDown = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path fill-rule=\"evenodd\" d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708\"></path>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { chevronDown as default };
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
e as default
|
|
6
|
-
};
|
|
1
|
+
const chevronLeft = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0\"/>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { chevronLeft as default };
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
a as default
|
|
6
|
-
};
|
|
1
|
+
const chevronRight = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708\"/>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { chevronRight as default };
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
a as default
|
|
6
|
-
};
|
|
1
|
+
const chevronUp = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path fill-rule=\"evenodd\" d=\"M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z\"></path>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { chevronUp as default };
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
a as default
|
|
6
|
-
};
|
|
1
|
+
const copy = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path fill-rule=\"evenodd\" d=\"M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z\"/>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { copy as default };
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
s as default
|
|
6
|
-
};
|
|
1
|
+
const dashLg = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path fill-rule=\"evenodd\" d=\"M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8\"/>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { dashLg as default };
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
a as default
|
|
6
|
-
};
|
|
1
|
+
const exclamationCircleFill = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2\"/>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { exclamationCircleFill as default };
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
a as default
|
|
6
|
-
};
|
|
1
|
+
const exclamationTriangleFill = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path d=\"M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2\"/>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { exclamationTriangleFill as default };
|
|
@@ -1,8 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
<path d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z"/>
|
|
5
|
-
</svg>`;
|
|
6
|
-
export {
|
|
7
|
-
a as default
|
|
8
|
-
};
|
|
1
|
+
const eyeSlash = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z\"/>\n <path d=\"M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829\"/>\n <path d=\"M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z\"/>\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { eyeSlash as default };
|
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
</svg>`;
|
|
5
|
-
export {
|
|
6
|
-
s as default
|
|
7
|
-
};
|
|
1
|
+
const eye = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z\"/>\n <path d=\"M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0\"/>\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { eye as default };
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
l as default
|
|
6
|
-
};
|
|
1
|
+
const infoCircleFill = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path d=\"M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2\"/>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { infoCircleFill as default };
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
a as default
|
|
6
|
-
};
|
|
1
|
+
const layoutSidebar = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path d=\"M0 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm5-1v12h9a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zM4 2H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h2z\"/>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { layoutSidebar as default };
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
a as default
|
|
6
|
-
};
|
|
1
|
+
const lightbulbFill = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path d=\"M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a2 2 0 0 0-.453-.618A5.98 5.98 0 0 1 2 6m3 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1-.5-.5\"/>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { lightbulbFill as default };
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
a as default
|
|
6
|
-
};
|
|
1
|
+
const lightbulbOff = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path fill-rule=\"evenodd\" d=\"M2.23 4.35A6 6 0 0 0 2 6c0 1.691.7 3.22 1.826 4.31.203.196.359.4.453.619l.762 1.769A.5.5 0 0 0 5.5 13a.5.5 0 0 0 0 1 .5.5 0 0 0 0 1l.224.447a1 1 0 0 0 .894.553h2.764a1 1 0 0 0 .894-.553L10.5 15a.5.5 0 0 0 0-1 .5.5 0 0 0 0-1 .5.5 0 0 0 .288-.091L9.878 12H5.83l-.632-1.467a3 3 0 0 0-.676-.941 4.98 4.98 0 0 1-1.455-4.405zm1.588-2.653.708.707a5 5 0 0 1 7.07 7.07l.707.707a6 6 0 0 0-8.484-8.484zm-2.172-.051a.5.5 0 0 1 .708 0l12 12a.5.5 0 0 1-.708.708l-12-12a.5.5 0 0 1 0-.708\"/>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { lightbulbOff as default };
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
a as default
|
|
6
|
-
};
|
|
1
|
+
const lightbulb = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path d=\"M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a2 2 0 0 0-.453-.618A5.98 5.98 0 0 1 2 6m6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1\"/>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { lightbulb as default };
|
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
</svg>`;
|
|
5
|
-
export {
|
|
6
|
-
a as default
|
|
7
|
-
};
|
|
1
|
+
const micFill = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path d=\"M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0z\"/>\r\n <path d=\"M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5\"/>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { micFill as default };
|
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
</svg>`;
|
|
5
|
-
export {
|
|
6
|
-
a as default
|
|
7
|
-
};
|
|
1
|
+
const micMuteFill = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path d=\"M13 8c0 .564-.094 1.107-.266 1.613l-.814-.814A4 4 0 0 0 12 8V7a.5.5 0 0 1 1 0zm-5 4c.818 0 1.578-.245 2.212-.667l.718.719a5 5 0 0 1-2.43.923V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 1 0v1a4 4 0 0 0 4 4m3-9v4.879L5.158 2.037A3.001 3.001 0 0 1 11 3\"/>\r\n <path d=\"M9.486 10.607 5 6.12V8a3 3 0 0 0 4.486 2.607m-7.84-9.253 12 12 .708-.708-12-12z\"/>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { micMuteFill as default };
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
a as default
|
|
6
|
-
};
|
|
1
|
+
const paperclip = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path d=\"M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5a.5.5 0 0 1 1 0v7a.5.5 0 0 0 1 0V3a1.5 1.5 0 1 0-3 0v9a2.5 2.5 0 0 0 5 0V5a.5.5 0 0 1 1 0v7a3.5 3.5 0 1 1-7 0z\"/>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { paperclip as default };
|
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
</svg>`;
|
|
5
|
-
export {
|
|
6
|
-
a as default
|
|
7
|
-
};
|
|
1
|
+
const pencilSquare = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path d=\"M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z\"/>\r\n <path fill-rule=\"evenodd\" d=\"M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z\"/>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { pencilSquare as default };
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
v as default
|
|
6
|
-
};
|
|
1
|
+
const plusLg = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path fill-rule=\"evenodd\" d=\"M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2\"/>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { plusLg as default };
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
a as default
|
|
6
|
-
};
|
|
1
|
+
const search = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path d=\"M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0\"/>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { search as default };
|
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
</svg>`;
|
|
5
|
-
export {
|
|
6
|
-
a as default
|
|
7
|
-
};
|
|
1
|
+
const speedometer = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path d=\"M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2M3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707M2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8m9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5m.754-4.246a.39.39 0 0 0-.527-.02L7.547 7.31A.91.91 0 1 0 8.85 8.569l3.434-4.297a.39.39 0 0 0-.029-.518z\"/>\r\n <path fill-rule=\"evenodd\" d=\"M6.664 15.889A8 8 0 1 1 9.336.11a8 8 0 0 1-2.672 15.78zm-4.665-4.283A11.95 11.95 0 0 1 8 10c2.186 0 4.236.585 6.001 1.606a7 7 0 1 0-12.002 0\"/>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { speedometer as default };
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
a as default
|
|
6
|
-
};
|
|
1
|
+
const xLg = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n <path d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z\"/>\r\n</svg>";
|
|
2
|
+
|
|
3
|
+
export { xLg as default };
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
};
|
|
1
|
+
const dark = ":root[theme=\"dark\"] {\r\n color-scheme: dark;\r\n\r\n /* Neutral Colors */\r\n --u-neutral-0: #000000;\r\n --u-neutral-50: #0A0A0A;\r\n --u-neutral-100: #121212;\r\n --u-neutral-200: #1E1E1E;\r\n --u-neutral-300: #2A2A2A;\r\n --u-neutral-400: #3D3D3D;\r\n --u-neutral-500: #525252;\r\n --u-neutral-600: #6E6E6E;\r\n --u-neutral-700: #8A8A8A;\r\n --u-neutral-800: #B0B0B0;\r\n --u-neutral-900: #D4D4D4;\r\n --u-neutral-1000: #FFFFFF;\r\n\r\n /* Blue Colors */\r\n --u-blue-0: #0A1E3D;\r\n --u-blue-100: #1E3A5F;\r\n --u-blue-200: #2B4F7E;\r\n --u-blue-300: #3D6B9E;\r\n --u-blue-400: #5284BE;\r\n --u-blue-500: #6BA3E3;\r\n --u-blue-600: #87B8F5;\r\n --u-blue-700: #A5CDFF;\r\n --u-blue-800: #C2DEFF;\r\n --u-blue-900: #DDEEFF;\r\n --u-blue-1000: #F0F7FF;\r\n\r\n /* Green Colors */\r\n --u-green-0: #0D2818;\r\n --u-green-100: #1A3F2A;\r\n --u-green-200: #285639;\r\n --u-green-300: #3A7450;\r\n --u-green-400: #4E9268;\r\n --u-green-500: #66B584;\r\n --u-green-600: #81D19D;\r\n --u-green-700: #9FE5B5;\r\n --u-green-800: #BEF2CD;\r\n --u-green-900: #DDF9E5;\r\n --u-green-1000: #F0FDF5;\r\n\r\n /* Yellow Colors */\r\n --u-yellow-0: #2E2200;\r\n --u-yellow-100: #4D3A00;\r\n --u-yellow-200: #6B5200;\r\n --u-yellow-300: #8A6B00;\r\n --u-yellow-400: #B08900;\r\n --u-yellow-500: #D4A712;\r\n --u-yellow-600: #F5C842;\r\n --u-yellow-700: #FFE066;\r\n --u-yellow-800: #FFED99;\r\n --u-yellow-900: #FFF5CC;\r\n --u-yellow-1000: #FFFBE6;\r\n\r\n /* Red Colors */\r\n --u-red-0: #2E0A0A;\r\n --u-red-100: #4D1717;\r\n --u-red-200: #6B2424;\r\n --u-red-300: #8F3535;\r\n --u-red-400: #B24848;\r\n --u-red-500: #D66060;\r\n --u-red-600: #F57878;\r\n --u-red-700: #FF9494;\r\n --u-red-800: #FFB3B3;\r\n --u-red-900: #FFD2D2;\r\n --u-red-1000: #FFF0F0;\r\n\r\n /* Shadow Colors */\r\n --u-shadow-weak: rgba(0, 0, 0, 0.15);\r\n --u-shadow-normal: rgba(0, 0, 0, 0.25);\r\n --u-shadow-medium: rgba(0, 0, 0, 0.35);\r\n --u-shadow-strong: rgba(0, 0, 0, 0.45);\r\n --u-shadow-heavy: rgba(0, 0, 0, 0.60);\r\n\r\n /* background Colors */\r\n --u-bg-color: var(--u-neutral-100);\r\n --u-bg-color-inverse: var(--u-neutral-0);\r\n --u-bg-color-hover: var(--u-neutral-300);\r\n --u-bg-color-active: var(--u-neutral-400);\r\n --u-bg-color-disabled: var(--u-neutral-200);\r\n \r\n --u-panel-bg-color: var(--u-neutral-200);\r\n --u-overlay-bg-color: rgba(0, 0, 0, 0.7);\r\n --u-tooltip-bg-color: rgba(255, 255, 255, 0.85);\r\n\r\n /* border Colors */\r\n --u-border-color: var(--u-neutral-400);\r\n --u-border-color-weak: var(--u-neutral-300);\r\n --u-border-color-strong: var(--u-neutral-500);\r\n\r\n --u-input-border-color: var(--u-neutral-400);\r\n --u-input-border-hover: var(--u-neutral-500);\r\n --u-input-border-focus: var(--u-blue-600);\r\n\r\n /* text Colors */\r\n --u-text-color: var(--u-neutral-900);\r\n --u-text-color-inverse: var(--u-neutral-100);\r\n --u-text-color-hover: var(--u-blue-600);\r\n --u-text-color-disabled: var(--u-neutral-500);\r\n\r\n --u-soft-text-color: var(--u-neutral-700);\r\n --u-strong-text-color: var(--u-neutral-1000);\r\n --u-link-text-color: var(--u-blue-700);\r\n --u-tooltip-text-color: var(--u-neutral-100);\r\n\r\n /* Icon Colors */\r\n --u-icon-color: var(--u-neutral-800);\r\n --u-icon-color-inverse: var(--u-neutral-100);\r\n --u-icon-color-hover: var(--u-blue-600);\r\n --u-icon-color-disabled: var(--u-neutral-500);\r\n\r\n /* Scrollbar Colors */\r\n --u-scrollbar-color: var(--u-neutral-500);\r\n --u-scrollbar-color-hover: var(--u-neutral-600);\r\n --u-scrollbar-track-color: transparent;\r\n\r\n /* Font Styles */\r\n --u-font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';\r\n --u-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace;\r\n --u-font-serif: 'Georgia', 'Times New Roman', Times, serif;\r\n --u-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;\r\n --u-font-modern: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n --u-font-rounded: 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n}";
|
|
2
|
+
|
|
3
|
+
export { dark as default };
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
};
|
|
1
|
+
const light = ":root {\r\n color-scheme: light;\r\n\r\n /* Neutral Colors */\r\n --u-neutral-0: #FFFFFF;\r\n --u-neutral-50: #FAFAFA;\r\n --u-neutral-100: #F5F5F5;\r\n --u-neutral-200: #EEEEEE;\r\n --u-neutral-300: #E0E0E0;\r\n --u-neutral-400: #BDBDBD;\r\n --u-neutral-500: #9E9E9E;\r\n --u-neutral-600: #757575;\r\n --u-neutral-700: #616161;\r\n --u-neutral-800: #424242;\r\n --u-neutral-900: #212121;\r\n --u-neutral-1000: #000000;\r\n\r\n /* Blue Colors */\r\n --u-blue-0: #E3F2FD;\r\n --u-blue-100: #BBDEFB;\r\n --u-blue-200: #90CAF9;\r\n --u-blue-300: #64B5F6;\r\n --u-blue-400: #42A5F5;\r\n --u-blue-500: #2196F3;\r\n --u-blue-600: #1E88E5;\r\n --u-blue-700: #1976D2;\r\n --u-blue-800: #1565C0;\r\n --u-blue-900: #0D47A1;\r\n --u-blue-1000: #062A5E;\r\n\r\n /* Green Colors */\r\n --u-green-0: #E8F5E9;\r\n --u-green-100: #C8E6C9;\r\n --u-green-200: #A5D6A7;\r\n --u-green-300: #81C784;\r\n --u-green-400: #66BB6A;\r\n --u-green-500: #4CAF50;\r\n --u-green-600: #43A047;\r\n --u-green-700: #388E3C;\r\n --u-green-800: #2E7D32;\r\n --u-green-900: #1B5E20;\r\n --u-green-1000: #0F3A12;\r\n\r\n /* Yellow Colors */\r\n --u-yellow-0: #FFFDE7;\r\n --u-yellow-100: #FFF9C4;\r\n --u-yellow-200: #FFF59D;\r\n --u-yellow-300: #FFF176;\r\n --u-yellow-400: #FFEE58;\r\n --u-yellow-500: #FFEB3B;\r\n --u-yellow-600: #FDD835;\r\n --u-yellow-700: #FBC02D;\r\n --u-yellow-800: #F9A825;\r\n --u-yellow-900: #F57F17;\r\n --u-yellow-1000: #8A4A00;\r\n\r\n /* Red Colors */\r\n --u-red-0: #FFEBEE;\r\n --u-red-100: #FFCDD2;\r\n --u-red-200: #EF9A9A;\r\n --u-red-300: #E57373;\r\n --u-red-400: #EF5350;\r\n --u-red-500: #F44336;\r\n --u-red-600: #E53935;\r\n --u-red-700: #D32F2F;\r\n --u-red-800: #C62828;\r\n --u-red-900: #B71C1C;\r\n --u-red-1000: #6B0F0F;\r\n\r\n /* Shadow Colors */\r\n --u-shadow-weak: rgba(0, 0, 0, 0.04);\r\n --u-shadow-normal: rgba(0, 0, 0, 0.08);\r\n --u-shadow-medium: rgba(0, 0, 0, 0.12);\r\n --u-shadow-strong: rgba(0, 0, 0, 0.16);\r\n --u-shadow-heavy: rgba(0, 0, 0, 0.24);\r\n\r\n /* background Colors */\r\n --u-bg-color: var(--u-neutral-0);\r\n --u-bg-color-inverse: var(--u-neutral-900);\r\n --u-bg-color-hover: var(--u-neutral-100);\r\n --u-bg-color-active: var(--u-neutral-200);\r\n --u-bg-color-disabled: var(--u-neutral-50);\r\n \r\n --u-panel-bg-color: var(--u-neutral-0);\r\n --u-overlay-bg-color: rgba(0, 0, 0, 0.5);\r\n --u-tooltip-bg-color: rgba(0, 0, 0, 0.75);\r\n\r\n /* border Colors */\r\n --u-border-color: var(--u-neutral-300);\r\n --u-border-color-weak: var(--u-neutral-200);\r\n --u-border-color-strong: var(--u-neutral-400);\r\n\r\n --u-input-border-color: var(--u-neutral-300);\r\n --u-input-border-hover: var(--u-neutral-400);\r\n --u-input-border-focus: var(--u-blue-600);\r\n\r\n /* text Colors */\r\n --u-text-color: var(--u-neutral-900);\r\n --u-text-color-inverse: var(--u-neutral-0);\r\n --u-text-color-hover: var(--u-blue-600);\r\n --u-text-color-active: var(--u-blue-600);\r\n --u-text-color-disabled: var(--u-neutral-400);\r\n \r\n --u-soft-text-color: var(--u-neutral-700);\r\n --u-link-text-color: var(--u-blue-700);\r\n --u-tooltip-text-color: var(--u-neutral-0);\r\n\r\n /* Icon Colors */\r\n --u-icon-color: var(--u-neutral-700);\r\n --u-icon-color-inverse: var(--u-neutral-0);\r\n --u-icon-color-hover: var(--u-blue-600);\r\n --u-icon-color-active: var(--u-blue-600);\r\n --u-icon-color-disabled: var(--u-neutral-400);\r\n\r\n /* Scrollbar Colors */\r\n --u-scrollbar-color: var(--u-neutral-400);\r\n --u-scrollbar-color-hover: var(--u-neutral-500);\r\n --u-scrollbar-track-color: transparent;\r\n\r\n /* Font Styles */\r\n --u-font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';\r\n --u-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace;\r\n --u-font-serif: 'Georgia', 'Times New Roman', Times, serif;\r\n --u-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;\r\n --u-font-modern: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n --u-font-rounded: 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n}";
|
|
2
|
+
|
|
3
|
+
export { light as default };
|
|
@@ -1,15 +1,25 @@
|
|
|
1
|
-
import { LitElement
|
|
2
|
-
import { styles
|
|
3
|
-
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import { styles } from './BaseElement.styles.js';
|
|
3
|
+
|
|
4
|
+
class BaseElement extends LitElement {
|
|
4
5
|
static {
|
|
5
|
-
|
|
6
|
+
/**
|
|
7
|
+
* 기본 스타일을 정의합니다.
|
|
8
|
+
*/
|
|
9
|
+
this.styles = styles;
|
|
6
10
|
}
|
|
7
11
|
static {
|
|
12
|
+
/**
|
|
13
|
+
* 현재 컴포넌트에 종속된 컴포넌트들을 정의하는 정적 속성입니다.
|
|
14
|
+
* 이 속성은 컴포넌트가 정의될 때 자동으로 호출되어
|
|
15
|
+
* 종속된 컴포넌트를 등록합니다.
|
|
16
|
+
*/
|
|
8
17
|
this.dependencies = {};
|
|
9
18
|
}
|
|
10
19
|
constructor() {
|
|
11
|
-
super()
|
|
12
|
-
|
|
20
|
+
super();
|
|
21
|
+
Object.entries(this.constructor.dependencies).forEach(([name, component]) => {
|
|
22
|
+
component.define(name);
|
|
13
23
|
});
|
|
14
24
|
}
|
|
15
25
|
/**
|
|
@@ -18,13 +28,14 @@ class a extends c {
|
|
|
18
28
|
* @param name - 커스텀 엘리먼트의 이름
|
|
19
29
|
* @param options - 엘리먼트 정의 옵션
|
|
20
30
|
*/
|
|
21
|
-
static define(
|
|
22
|
-
if (!customElements.get(
|
|
31
|
+
static define(name, options = {}) {
|
|
32
|
+
if (!customElements.get(name)) {
|
|
23
33
|
try {
|
|
24
|
-
customElements.define(
|
|
25
|
-
} catch (
|
|
26
|
-
console.warn(`Failed to register component "${
|
|
34
|
+
customElements.define(name, this, options);
|
|
35
|
+
} catch (error) {
|
|
36
|
+
console.warn(`Failed to register component "${name}":`, error);
|
|
27
37
|
}
|
|
38
|
+
}
|
|
28
39
|
}
|
|
29
40
|
/**
|
|
30
41
|
* 커스텀 이벤트를 디스패치합니다.
|
|
@@ -33,17 +44,16 @@ class a extends c {
|
|
|
33
44
|
* @param options - 추가 이벤트 옵션 (예: bubbles, composed 등)
|
|
34
45
|
* @returns 이벤트가 성공적으로 디스패치되었는지 여부
|
|
35
46
|
*/
|
|
36
|
-
emit(
|
|
37
|
-
const
|
|
38
|
-
bubbles:
|
|
39
|
-
composed:
|
|
40
|
-
cancelable:
|
|
41
|
-
detail:
|
|
42
|
-
...
|
|
47
|
+
emit(name, value, options) {
|
|
48
|
+
const event = new CustomEvent(name, {
|
|
49
|
+
bubbles: true,
|
|
50
|
+
composed: true,
|
|
51
|
+
cancelable: false,
|
|
52
|
+
detail: value,
|
|
53
|
+
...options
|
|
43
54
|
});
|
|
44
|
-
return this.dispatchEvent(
|
|
55
|
+
return this.dispatchEvent(event);
|
|
45
56
|
}
|
|
46
57
|
}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
};
|
|
58
|
+
|
|
59
|
+
export { BaseElement };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { css
|
|
2
|
-
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
|
|
3
|
+
const styles = css`
|
|
3
4
|
:host {
|
|
4
5
|
box-sizing: border-box;
|
|
5
6
|
overflow-wrap: anywhere;
|
|
@@ -24,6 +25,5 @@ const t = r`
|
|
|
24
25
|
scrollbar-gutter: stable;
|
|
25
26
|
}
|
|
26
27
|
`;
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
};
|
|
28
|
+
|
|
29
|
+
export { styles };
|