@daikin-oss/design-system-web-components 1.6.0-next.0 → 1.6.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
CHANGED
|
@@ -1,5 +1,94 @@
|
|
|
1
1
|
# @daikin-oss/design-system-web-components
|
|
2
2
|
|
|
3
|
+
## 1.6.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#430](https://github.com/dsv-rp/DDS/pull/430) [`092cc3a`](https://github.com/dsv-rp/DDS/commit/092cc3a55b65e0712e06c7dc2bbf530823d28b9b) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Divider: Add divider component. (DDS-3073)
|
|
8
|
+
|
|
9
|
+
- [#448](https://github.com/dsv-rp/DDS/pull/448) [`f84640c`](https://github.com/dsv-rp/DDS/commit/f84640c970ad9f69db0b2b77dec7b028780c542e) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Vertical Navigation: Add new Vertical Navigation component. (DDS-3124)
|
|
10
|
+
|
|
11
|
+
- [#403](https://github.com/dsv-rp/DDS/pull/403) [`73f2866`](https://github.com/dsv-rp/DDS/commit/73f28664b0abcbd89c67cfaf9b4e80b1e84a3c9c) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - List Item: Add underline divider support. (DDS-3006)
|
|
12
|
+
|
|
13
|
+
- [#396](https://github.com/dsv-rp/DDS/pull/396) [`0a69700`](https://github.com/dsv-rp/DDS/commit/0a69700bc954dc637c925d4370feb183fb45bae0) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Drawer: Add Drawer component. (DDS-2975)
|
|
14
|
+
Drawer Header: Add Drawer Header component. (DDS-2975)
|
|
15
|
+
Drawer Footer: Add Drawer Footer component. (DDS-2975)
|
|
16
|
+
|
|
17
|
+
- [#443](https://github.com/dsv-rp/DDS/pull/443) [`e1e1aa6`](https://github.com/dsv-rp/DDS/commit/e1e1aa6671bd986063c40e49508eb034bdf620e0) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Badge: Add large size and display mode to badge. (DDS-3128)
|
|
18
|
+
|
|
19
|
+
- [#449](https://github.com/dsv-rp/DDS/pull/449) [`6e3b0cf`](https://github.com/dsv-rp/DDS/commit/6e3b0cf44953fcb3dcd67f9ee6251fb0fc1552bd) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Header Recipe: Implement with navigation case. (DDS-3017)
|
|
20
|
+
|
|
21
|
+
### Patch Changes
|
|
22
|
+
|
|
23
|
+
- [#442](https://github.com/dsv-rp/DDS/pull/442) [`d20ebca`](https://github.com/dsv-rp/DDS/commit/d20ebcae7ed5c0598bd2397147cdaa20490b1da9) Thanks [@yodas7](https://github.com/yodas7)! - Improve documentation and event consistency for controlled components. (DDS-3114)
|
|
24
|
+
|
|
25
|
+
- Add JSDoc guidance on keeping external state in sync for all components with externally controllable state (accordion-item, calendar, carousel, chip, drawer, menu, modal, table, tabs, tree, and all form controls).
|
|
26
|
+
- Accordion: fire `change` event when `openItems` changes due to user interaction.
|
|
27
|
+
- Tree: fire `change` event when `selectedItems` changes due to user interaction. Fix spurious `change` events that were incorrectly fired during initial render for trees containing disabled items.
|
|
28
|
+
- Tree Section: apply the same cancellable `toggle` guard to keyboard (ArrowLeft/Right) open/close, consistent with click behavior.
|
|
29
|
+
- Dropdown, Combobox: fire `toggle` event (with `oldState`/`newState`) when `open` changes. Fix spurious `toggle` events that were incorrectly fired on initial render.
|
|
30
|
+
- Date Picker: document existing `toggle` event (already fired via internal Popover API re-dispatch).
|
|
31
|
+
- Radio Group: fire `change` event when the selected radio changes via click (was already fired for keyboard navigation).
|
|
32
|
+
- Pagination: replace broken post-mutation `cancelable` `change` with a proper pre-mutation `before-change` event (cancellable, with `event.detail.page`), followed by a non-cancellable `change` event.
|
|
33
|
+
- Calendar: fire `view-change` event when the view switches between day / month / year picker.
|
|
34
|
+
- Menu: align `popoverValue` and `trigger` property docs with Tooltip; improve class-level description.
|
|
35
|
+
|
|
36
|
+
- [#436](https://github.com/dsv-rp/DDS/pull/436) [`481f812`](https://github.com/dsv-rp/DDS/commit/481f812f04154ac02029f00431b8299f5834b90b) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Navigation/Menu: Improved the responsive strategy for the navigation component (and menu integration with navigation-item triggers). (DDS-3010)
|
|
37
|
+
|
|
38
|
+
- [#426](https://github.com/dsv-rp/DDS/pull/426) [`759e3de`](https://github.com/dsv-rp/DDS/commit/759e3de207faf1ae058913186f37baf194370fcc) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - List: Fix the wrong line height and remove checkbox from story. (DDS-3062, DDS-3063)
|
|
39
|
+
|
|
40
|
+
- [#444](https://github.com/dsv-rp/DDS/pull/444) [`18c735b`](https://github.com/dsv-rp/DDS/commit/18c735bf20804c4d14dc489265fae2cba85b0fa2) Thanks [@dk-wei](https://github.com/dk-wei)! - Menu: Fixed the issue where the menu failed to open on touch devices.
|
|
41
|
+
|
|
42
|
+
- [#413](https://github.com/dsv-rp/DDS/pull/413) [`7d1180e`](https://github.com/dsv-rp/DDS/commit/7d1180efbc301a3de1a2aa9d7c58fa6327fc632a) Thanks [@dk-wei](https://github.com/dk-wei)! - Calendar (Storybook): Change max and min values on kitchen sink page. (DDS-0307)
|
|
43
|
+
|
|
44
|
+
- [#432](https://github.com/dsv-rp/DDS/pull/432) [`112206d`](https://github.com/dsv-rp/DDS/commit/112206d5a2996daccf20e69509e9a4307e365e3b) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Progress Indicator: Adjust success icon position. (DDS-3077)
|
|
45
|
+
|
|
46
|
+
- [#431](https://github.com/dsv-rp/DDS/pull/431) [`8c8c57c`](https://github.com/dsv-rp/DDS/commit/8c8c57ce1f2c49f5887775dfaf0e4140da7e59b1) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Modal: Disable scrolling on the underlying content area covered by the backdrop when the modal is active. (DDS-3083)
|
|
47
|
+
Modal: Add overlay color token to modal backdrop. (DDS-3087)
|
|
48
|
+
|
|
49
|
+
- [#433](https://github.com/dsv-rp/DDS/pull/433) [`0195360`](https://github.com/dsv-rp/DDS/commit/01953601b606274b4db46d25ecc74ed61de45b66) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Chore: Add global font token to specify default font family, font size, font weight, line height. (DDS-3089)
|
|
50
|
+
Corrected the font family for the following components. (DDS-3089)
|
|
51
|
+
|
|
52
|
+
- Breadcrumb
|
|
53
|
+
- List
|
|
54
|
+
- Table
|
|
55
|
+
- Tree
|
|
56
|
+
|
|
57
|
+
- [#401](https://github.com/dsv-rp/DDS/pull/401) [`014ed76`](https://github.com/dsv-rp/DDS/commit/014ed764c4ba9c048aa1a281c45025157ab2d93e) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Tooltip: Improved and clarified the documentation regarding the `trigger` and `popover-value` APIs. (DDS-3003)
|
|
58
|
+
|
|
59
|
+
- [#440](https://github.com/dsv-rp/DDS/pull/440) [`2d910a3`](https://github.com/dsv-rp/DDS/commit/2d910a3c7557df8ebb65df2ec641a00aebf56fbf) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Modal: Fixed header layout scrolling on low screen heights. (DDS-3102)
|
|
60
|
+
Storybook: Fixed modal title and description visibility in the Persistent story. (DDS-3105)
|
|
61
|
+
Modal: Adjusted button spacing for vertically stacked modal footers. (DDS-3081)
|
|
62
|
+
|
|
63
|
+
- [#446](https://github.com/dsv-rp/DDS/pull/446) [`8410ae8`](https://github.com/dsv-rp/DDS/commit/8410ae831a6b6f1f3d21c5d6d273da6695519940) Thanks [@dk-wei](https://github.com/dk-wei)! - Fix icon position for under components. (DDS-3117)
|
|
64
|
+
|
|
65
|
+
- Accordion
|
|
66
|
+
- List
|
|
67
|
+
|
|
68
|
+
- [#412](https://github.com/dsv-rp/DDS/pull/412) [`3bd76ae`](https://github.com/dsv-rp/DDS/commit/3bd76ae38fe565028e06459b7840fd70426ad584) Thanks [@dk-wei](https://github.com/dk-wei)! - Time Picker (Storybook): Add min and max patterns for kitchen sink page. (DDS-3035)
|
|
69
|
+
|
|
70
|
+
- [#451](https://github.com/dsv-rp/DDS/pull/451) [`50fa4e9`](https://github.com/dsv-rp/DDS/commit/50fa4e9faa24da3b779f40becf017f8eeb2a977f) Thanks [@dk-wei](https://github.com/dk-wei)! - Data Display(Enhancement):Add pagination for data display recipe.
|
|
71
|
+
|
|
72
|
+
- [#410](https://github.com/dsv-rp/DDS/pull/410) [`17a0f75`](https://github.com/dsv-rp/DDS/commit/17a0f75acb00053907a12a8de9a7f5866c730460) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Set `cursor: pointer` to the following components:
|
|
73
|
+
|
|
74
|
+
- Checkbox
|
|
75
|
+
- Radio
|
|
76
|
+
- Slider
|
|
77
|
+
|
|
78
|
+
- [#435](https://github.com/dsv-rp/DDS/pull/435) [`59c135d`](https://github.com/dsv-rp/DDS/commit/59c135d05372bb7aac50e8ae3c19361057341625) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Icon: Remove useless console log. (DDS-3094)
|
|
79
|
+
|
|
80
|
+
- [#400](https://github.com/dsv-rp/DDS/pull/400) [`755814a`](https://github.com/dsv-rp/DDS/commit/755814a086aa5629386e6ebd02c4f5cd1b07cc7c) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Date Picker: Fixed a scrolling issue caused by the screen-reader-only span within the date picker. (DDS-3004)
|
|
81
|
+
Status Message: Add `position: relative` to the parent of the `sr-only` element. (DDS-3004)
|
|
82
|
+
|
|
83
|
+
- [#446](https://github.com/dsv-rp/DDS/pull/446) [`8410ae8`](https://github.com/dsv-rp/DDS/commit/8410ae831a6b6f1f3d21c5d6d273da6695519940) Thanks [@dk-wei](https://github.com/dk-wei)! - Accordion: Fix icon position for accordion and fix padding issue. (DDS-3117 DDS-3142)
|
|
84
|
+
|
|
85
|
+
- [#393](https://github.com/dsv-rp/DDS/pull/393) [`45caaa6`](https://github.com/dsv-rp/DDS/commit/45caaa64ea5a73aa491c27bec4e06306054e874a) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Button: Fix the height of large button. (DDS-2973)
|
|
86
|
+
|
|
87
|
+
- [#382](https://github.com/dsv-rp/DDS/pull/382) [`f8b22a1`](https://github.com/dsv-rp/DDS/commit/f8b22a1020298ffcb66287b682710ce9f206747e) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Date Picker: Updated the date picker's input format to automatically adapt based on the system locale. (DDS-2900)
|
|
88
|
+
Date Picker: Added default placeholder text that reflects the system locale, enhancing user experience. To remove the default placeholder, set the `placeholder` property to an empty string. (DDS-2900)
|
|
89
|
+
|
|
90
|
+
- [#415](https://github.com/dsv-rp/DDS/pull/415) [`d987357`](https://github.com/dsv-rp/DDS/commit/d987357249d33fc348c1e658dcb253993d1f3cbd) Thanks [@dk-wei](https://github.com/dk-wei)! - Time Picker (Storybook): Change min and max name on kitchen sink page. (DDS-3035)
|
|
91
|
+
|
|
3
92
|
## 1.6.0-next.0
|
|
4
93
|
|
|
5
94
|
### Minor Changes
|
package/custom-elements.json
CHANGED
|
@@ -1171,30 +1171,6 @@
|
|
|
1171
1171
|
}
|
|
1172
1172
|
]
|
|
1173
1173
|
},
|
|
1174
|
-
{
|
|
1175
|
-
"kind": "javascript-module",
|
|
1176
|
-
"path": "dist/es/constants/events.js",
|
|
1177
|
-
"declarations": [
|
|
1178
|
-
{
|
|
1179
|
-
"kind": "variable",
|
|
1180
|
-
"name": "EVENT_CLOSE",
|
|
1181
|
-
"type": {
|
|
1182
|
-
"text": "string"
|
|
1183
|
-
},
|
|
1184
|
-
"default": "\"close\""
|
|
1185
|
-
}
|
|
1186
|
-
],
|
|
1187
|
-
"exports": [
|
|
1188
|
-
{
|
|
1189
|
-
"kind": "js",
|
|
1190
|
-
"name": "EVENT_CLOSE",
|
|
1191
|
-
"declaration": {
|
|
1192
|
-
"name": "EVENT_CLOSE",
|
|
1193
|
-
"module": "src/constants/events.ts"
|
|
1194
|
-
}
|
|
1195
|
-
}
|
|
1196
|
-
]
|
|
1197
|
-
},
|
|
1198
1174
|
{
|
|
1199
1175
|
"kind": "javascript-module",
|
|
1200
1176
|
"path": "dist/es/components/index.js",
|
|
@@ -1762,6 +1738,30 @@
|
|
|
1762
1738
|
}
|
|
1763
1739
|
]
|
|
1764
1740
|
},
|
|
1741
|
+
{
|
|
1742
|
+
"kind": "javascript-module",
|
|
1743
|
+
"path": "dist/es/constants/events.js",
|
|
1744
|
+
"declarations": [
|
|
1745
|
+
{
|
|
1746
|
+
"kind": "variable",
|
|
1747
|
+
"name": "EVENT_CLOSE",
|
|
1748
|
+
"type": {
|
|
1749
|
+
"text": "string"
|
|
1750
|
+
},
|
|
1751
|
+
"default": "\"close\""
|
|
1752
|
+
}
|
|
1753
|
+
],
|
|
1754
|
+
"exports": [
|
|
1755
|
+
{
|
|
1756
|
+
"kind": "js",
|
|
1757
|
+
"name": "EVENT_CLOSE",
|
|
1758
|
+
"declaration": {
|
|
1759
|
+
"name": "EVENT_CLOSE",
|
|
1760
|
+
"module": "src/constants/events.ts"
|
|
1761
|
+
}
|
|
1762
|
+
}
|
|
1763
|
+
]
|
|
1764
|
+
},
|
|
1765
1765
|
{
|
|
1766
1766
|
"kind": "javascript-module",
|
|
1767
1767
|
"path": "dist/es/controllers/block-scroll.js",
|
|
@@ -11383,187 +11383,428 @@
|
|
|
11383
11383
|
},
|
|
11384
11384
|
{
|
|
11385
11385
|
"kind": "javascript-module",
|
|
11386
|
-
"path": "dist/es/components/icon
|
|
11386
|
+
"path": "dist/es/components/icon/daikin-icon.js",
|
|
11387
11387
|
"declarations": [
|
|
11388
|
+
{
|
|
11389
|
+
"kind": "variable",
|
|
11390
|
+
"name": "iconList"
|
|
11391
|
+
},
|
|
11388
11392
|
{
|
|
11389
11393
|
"kind": "class",
|
|
11390
|
-
"description": "
|
|
11391
|
-
"name": "
|
|
11392
|
-
"
|
|
11394
|
+
"description": "A versatile UI element that displays small graphical symbols or images representing actions, objects, or concepts within an application.\nThe component uses the predefined DDS icon set by default but also supports custom icons via the icon registry.\n\nPredefined DDS icons are automatically rendered using optimized CSS classes.\nCustom icons can be dynamically loaded from various sources using the icon registry.\n\nIf an icon cannot be loaded, a blank space is displayed.\nIn development builds, warnings are logged to the console for debugging.\n\n### Using Custom Icons\n\nCustom icons must be registered with the icon registry before use.\nThey can be registered individually or in bulk using pattern matching, with support for multiple rendering modes.\n\n#### Rendering Modes\n\nCustom icons support multiple rendering modes, each with different characteristics:\n\n- **mask** (default): Uses CSS `mask-image` to render the icon.\n - Secure rendering method (SVG is converted to data URL).\n - Supports color customization via the `color` property or CSS `color`.\n - Best choice for most use cases with custom icons.\n- **background**: Uses CSS `background-image` to render the icon.\n - Secure rendering method (SVG is converted to data URL).\n - Does NOT support color customization; the icon is rendered with its original colors.\n - Use this mode when you need to preserve the original colors of multi-color SVG icons.\n- **inline**: Traditional SVG rendering using `innerHTML`.\n - Renders the raw SVG markup directly in the DOM.\n - Supports color customization if the SVG uses `currentColor` or inheritable properties.\n - ⚠️ **Security Warning**: Only use this mode with SVG content from trusted sources. Untrusted SVG content may lead to XSS vulnerabilities.\n - Use `mask` or `background` modes for better security.\n\n#### Registration Examples\n\n```js\nimport { iconRegistry } from \"@daikin-oss/design-system-web-components/icon-registry.js\";\n\n// Register a single custom icon using mask mode for secure rendering and color customization\niconRegistry.register({\n name: \"my-custom-icon\",\n svg: {\n svg: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">...</svg>',\n mode: \"mask\",\n defaultColor: \"#0066cc\"\n },\n});\n\n// Register multiple custom icons dynamically using pattern matching\niconRegistry.register({\n match: /^dynamic-custom-/,\n async fetch: (name) => {\n const response = await fetch(`/path/to/custom/icons/${name}.svg`);\n if (!response.ok) {\n throw new Error(`Failed to load custom icon \"${name}\"`);\n }\n // You can return just the SVG content as a string (defaults to mask mode)\n // Or return an object with `svg`, `defaultColor` (optional), and `mode` (optional) for more control\n return response.text();\n },\n});\n```\n\nOnce registered, you can use your custom icons in components:\n\n```html\n<daikin-icon icon=\"my-custom-icon\" color=\"current\" size=\"m\"></daikin-icon>\n<daikin-icon icon=\"dynamic-custom-icon-123\" color=\"current\" size=\"m\"></daikin-icon>\n```\n\n### Changing Icon Color\n\nTo use a custom color, set the `color` property to `\"current\"` and apply the desired color using the CSS `color` property:\n\n```html\n<daikin-icon icon=\"information\" color=\"current\" style=\"color: red;\"></daikin-icon>\n<!-- or you can inherit the color from a parent element -->\n<div style=\"color: blue;\">\n <daikin-icon icon=\"information\" color=\"current\"></daikin-icon>\n</div>\n```\n\nThis behavior is supported natively for DDS icons and `mask` mode (the default for custom icons).\nIn `inline` mode, color inheritance works only if the SVG uses `currentColor` or inheritable properties.\nNote that `background` mode does not support custom colors.",
|
|
11395
|
+
"name": "DaikinIcon",
|
|
11396
|
+
"cssProperties": [
|
|
11393
11397
|
{
|
|
11394
|
-
"description": "
|
|
11395
|
-
"name": ""
|
|
11398
|
+
"description": "The size of the icon. If you set a value other than \"current\" for the `size` property, this will be automatically overwritten.",
|
|
11399
|
+
"name": "--ddc-icon-size"
|
|
11396
11400
|
}
|
|
11397
11401
|
],
|
|
11398
11402
|
"members": [
|
|
11399
11403
|
{
|
|
11400
11404
|
"kind": "field",
|
|
11401
|
-
"name": "
|
|
11402
|
-
"type": {
|
|
11403
|
-
"text": "IconButtonVariantProps[\"variant\"]"
|
|
11404
|
-
},
|
|
11405
|
-
"description": "Variant of the button.",
|
|
11406
|
-
"default": "\"fill\"",
|
|
11407
|
-
"attribute": "variant",
|
|
11408
|
-
"reflects": true
|
|
11409
|
-
},
|
|
11410
|
-
{
|
|
11411
|
-
"kind": "field",
|
|
11412
|
-
"name": "color",
|
|
11413
|
-
"type": {
|
|
11414
|
-
"text": "IconButtonVariantProps[\"color\"]"
|
|
11415
|
-
},
|
|
11416
|
-
"description": "Color of the button.",
|
|
11417
|
-
"default": "\"default\"",
|
|
11418
|
-
"attribute": "color",
|
|
11419
|
-
"reflects": true
|
|
11420
|
-
},
|
|
11421
|
-
{
|
|
11422
|
-
"kind": "field",
|
|
11423
|
-
"name": "disabled",
|
|
11424
|
-
"type": {
|
|
11425
|
-
"text": "boolean"
|
|
11426
|
-
},
|
|
11427
|
-
"default": "false",
|
|
11428
|
-
"description": "Whether the button is disabled.",
|
|
11429
|
-
"attribute": "disabled",
|
|
11430
|
-
"reflects": true
|
|
11431
|
-
},
|
|
11432
|
-
{
|
|
11433
|
-
"kind": "field",
|
|
11434
|
-
"name": "href",
|
|
11435
|
-
"type": {
|
|
11436
|
-
"text": "string | null"
|
|
11437
|
-
},
|
|
11438
|
-
"default": "null",
|
|
11439
|
-
"description": "Link `href`.\nOnly used if the `type` is `\"link\"`.\nIf omitted with `type=\"link\"`, the link will be treated as [a placeholder link](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element:~:text=If%20the%20a%20element%20has%20no%20href%20attribute) and rendered as disabled state.",
|
|
11440
|
-
"attribute": "href",
|
|
11441
|
-
"reflects": true
|
|
11442
|
-
},
|
|
11443
|
-
{
|
|
11444
|
-
"kind": "field",
|
|
11445
|
-
"name": "type",
|
|
11446
|
-
"type": {
|
|
11447
|
-
"text": "\"button\" | \"submit\" | \"reset\" | \"link\""
|
|
11448
|
-
},
|
|
11449
|
-
"description": "Type of the button.\nIf `\"link\"` is specified, the button will be rendered as an `<a>` element.",
|
|
11450
|
-
"default": "\"button\"",
|
|
11451
|
-
"attribute": "type",
|
|
11452
|
-
"reflects": true
|
|
11453
|
-
},
|
|
11454
|
-
{
|
|
11455
|
-
"kind": "field",
|
|
11456
|
-
"name": "buttonAriaLabel",
|
|
11405
|
+
"name": "registry",
|
|
11457
11406
|
"type": {
|
|
11458
|
-
"text": "
|
|
11407
|
+
"text": "IconRegistry"
|
|
11459
11408
|
},
|
|
11460
|
-
"default": "
|
|
11461
|
-
"description": "The
|
|
11462
|
-
"attribute": "button-aria-label",
|
|
11463
|
-
"reflects": true
|
|
11409
|
+
"default": "iconRegistry",
|
|
11410
|
+
"description": "The icon registry instance to use.\nDefaults to the global icon registry."
|
|
11464
11411
|
},
|
|
11465
11412
|
{
|
|
11466
11413
|
"kind": "field",
|
|
11467
|
-
"name": "
|
|
11414
|
+
"name": "icon",
|
|
11468
11415
|
"type": {
|
|
11469
|
-
"text": "
|
|
11416
|
+
"text": "string"
|
|
11470
11417
|
},
|
|
11471
|
-
"
|
|
11472
|
-
"
|
|
11473
|
-
"attribute": "button-role",
|
|
11418
|
+
"description": "The name of the icon to display.\nCan be a static DDS icon name or a custom icon name registered in the icon registry.",
|
|
11419
|
+
"attribute": "icon",
|
|
11474
11420
|
"reflects": true
|
|
11475
11421
|
},
|
|
11476
11422
|
{
|
|
11477
11423
|
"kind": "field",
|
|
11478
|
-
"name": "
|
|
11424
|
+
"name": "color",
|
|
11479
11425
|
"type": {
|
|
11480
|
-
"text": "
|
|
11426
|
+
"text": "IconVariantProps[\"color\"]"
|
|
11481
11427
|
},
|
|
11482
|
-
"
|
|
11483
|
-
"
|
|
11484
|
-
"attribute": "
|
|
11428
|
+
"description": "The color of the icon.\nUse `\"current\"` for most cases.\n\n**This property will be removed in a future release.**\nTo prepare for this change, start using `color=\"current\"` and set icon colors via the CSS `color` property instead of using predefined color values.",
|
|
11429
|
+
"default": "\"default\"",
|
|
11430
|
+
"attribute": "color",
|
|
11485
11431
|
"reflects": true
|
|
11486
11432
|
},
|
|
11487
11433
|
{
|
|
11488
11434
|
"kind": "field",
|
|
11489
|
-
"name": "
|
|
11435
|
+
"name": "size",
|
|
11490
11436
|
"type": {
|
|
11491
|
-
"text": "\"
|
|
11437
|
+
"text": "\"s\" | \"m\" | \"l\" | \"xl\" | \"current\""
|
|
11492
11438
|
},
|
|
11493
|
-
"
|
|
11494
|
-
"
|
|
11495
|
-
"attribute": "
|
|
11439
|
+
"description": "The size of the icon.\nIf set to \"current\", the `--ddc-icon-size` CSS variable will be used. `--ddc-icon-size` may be set by a parent component such as `daikin-icon-button`.",
|
|
11440
|
+
"default": "\"current\"",
|
|
11441
|
+
"attribute": "size",
|
|
11496
11442
|
"reflects": true
|
|
11497
11443
|
},
|
|
11498
11444
|
{
|
|
11499
11445
|
"kind": "field",
|
|
11500
|
-
"name": "
|
|
11446
|
+
"name": "_iconData",
|
|
11501
11447
|
"type": {
|
|
11502
|
-
"text": "
|
|
11448
|
+
"text": "IconData | StaticIconData | null"
|
|
11503
11449
|
},
|
|
11504
|
-
"
|
|
11505
|
-
"
|
|
11506
|
-
"reflects": true
|
|
11450
|
+
"privacy": "private",
|
|
11451
|
+
"default": "null"
|
|
11507
11452
|
},
|
|
11508
11453
|
{
|
|
11509
|
-
"kind": "
|
|
11510
|
-
"name": "
|
|
11511
|
-
"
|
|
11512
|
-
"text": "\"s\" | \"m\""
|
|
11513
|
-
},
|
|
11514
|
-
"default": "\"s\"",
|
|
11515
|
-
"description": "Size of the button.\n- `s`: 32px * 32px\n- `m`: 48px * 48px",
|
|
11516
|
-
"attribute": "size",
|
|
11517
|
-
"reflects": true
|
|
11454
|
+
"kind": "method",
|
|
11455
|
+
"name": "loadIcon",
|
|
11456
|
+
"privacy": "private"
|
|
11518
11457
|
},
|
|
11519
11458
|
{
|
|
11520
11459
|
"kind": "field",
|
|
11521
|
-
"name": "
|
|
11460
|
+
"name": "version",
|
|
11522
11461
|
"type": {
|
|
11523
|
-
"text": "
|
|
11462
|
+
"text": "string"
|
|
11524
11463
|
},
|
|
11525
|
-
"
|
|
11526
|
-
"readonly": true
|
|
11464
|
+
"static": true,
|
|
11465
|
+
"readonly": true,
|
|
11466
|
+
"default": "VERSION",
|
|
11467
|
+
"description": "The version of the DDS library",
|
|
11468
|
+
"inheritedFrom": {
|
|
11469
|
+
"name": "DDSElement",
|
|
11470
|
+
"module": "dist/es/base/dds-element.js"
|
|
11471
|
+
}
|
|
11527
11472
|
},
|
|
11528
11473
|
{
|
|
11529
11474
|
"kind": "method",
|
|
11530
|
-
"name": "
|
|
11475
|
+
"name": "getPropertyDescriptor",
|
|
11476
|
+
"static": true,
|
|
11531
11477
|
"return": {
|
|
11532
11478
|
"type": {
|
|
11533
11479
|
"text": ""
|
|
11534
11480
|
}
|
|
11535
11481
|
},
|
|
11536
|
-
"
|
|
11537
|
-
|
|
11482
|
+
"parameters": [
|
|
11483
|
+
{
|
|
11484
|
+
"name": "name",
|
|
11485
|
+
"type": {
|
|
11486
|
+
"text": "PropertyKey"
|
|
11487
|
+
},
|
|
11488
|
+
"description": "The property name (e.g., \"value\", \"disabled\")"
|
|
11489
|
+
},
|
|
11490
|
+
{
|
|
11491
|
+
"name": "key",
|
|
11492
|
+
"type": {
|
|
11493
|
+
"text": "string | symbol"
|
|
11494
|
+
},
|
|
11495
|
+
"description": "The backing property key used for internal storage (generated by Lit)"
|
|
11496
|
+
},
|
|
11497
|
+
{
|
|
11498
|
+
"name": "{ fallbackValue, isAllowedValue, ...options }",
|
|
11499
|
+
"type": {
|
|
11500
|
+
"text": "DDSPropertyDeclaration"
|
|
11501
|
+
}
|
|
11502
|
+
},
|
|
11503
|
+
{
|
|
11504
|
+
"description": "DDS property declaration options including fallbackValue and isAllowedValue",
|
|
11505
|
+
"name": "options"
|
|
11506
|
+
}
|
|
11507
|
+
],
|
|
11508
|
+
"description": "Override of LitElement's getPropertyDescriptor to add support for fallback values\nand property validation.",
|
|
11509
|
+
"inheritedFrom": {
|
|
11510
|
+
"name": "DDSElement",
|
|
11511
|
+
"module": "dist/es/base/dds-element.js"
|
|
11512
|
+
}
|
|
11538
11513
|
},
|
|
11539
11514
|
{
|
|
11540
11515
|
"kind": "method",
|
|
11541
|
-
"name": "
|
|
11516
|
+
"name": "getBackingProperty",
|
|
11517
|
+
"privacy": "protected",
|
|
11542
11518
|
"return": {
|
|
11543
11519
|
"type": {
|
|
11544
|
-
"text": "
|
|
11520
|
+
"text": ""
|
|
11545
11521
|
}
|
|
11546
11522
|
},
|
|
11547
11523
|
"parameters": [
|
|
11548
11524
|
{
|
|
11549
|
-
"name": "
|
|
11550
|
-
"optional": true,
|
|
11525
|
+
"name": "name",
|
|
11551
11526
|
"type": {
|
|
11552
|
-
"text": "
|
|
11527
|
+
"text": "T"
|
|
11553
11528
|
},
|
|
11554
|
-
"description": "
|
|
11529
|
+
"description": "The property name to retrieve the backing value for"
|
|
11555
11530
|
}
|
|
11556
11531
|
],
|
|
11557
|
-
"description": "
|
|
11558
|
-
|
|
11532
|
+
"description": "Retrieves the backing property value for a given property name.\nThis allows access to the underlying stored value before any fallback logic is applied.\n\nWhy is this needed?\n- The public property getter may return a fallback value when the actual value is undefined.\n- Sometimes we need to know if the property was explicitly set or if we're using a fallback.\n- This method provides access to the raw backing value stored by Lit.",
|
|
11533
|
+
"inheritedFrom": {
|
|
11534
|
+
"name": "DDSElement",
|
|
11535
|
+
"module": "dist/es/base/dds-element.js"
|
|
11536
|
+
}
|
|
11537
|
+
}
|
|
11538
|
+
],
|
|
11539
|
+
"attributes": [
|
|
11559
11540
|
{
|
|
11560
|
-
"
|
|
11561
|
-
"name": "formAttr",
|
|
11541
|
+
"name": "icon",
|
|
11562
11542
|
"type": {
|
|
11563
11543
|
"text": "string"
|
|
11564
11544
|
},
|
|
11565
|
-
"description": "The
|
|
11566
|
-
"
|
|
11545
|
+
"description": "The name of the icon to display.\nCan be a static DDS icon name or a custom icon name registered in the icon registry.",
|
|
11546
|
+
"fieldName": "icon"
|
|
11547
|
+
},
|
|
11548
|
+
{
|
|
11549
|
+
"name": "color",
|
|
11550
|
+
"type": {
|
|
11551
|
+
"text": "IconVariantProps[\"color\"]"
|
|
11552
|
+
},
|
|
11553
|
+
"description": "The color of the icon.\nUse `\"current\"` for most cases.\n\n**This property will be removed in a future release.**\nTo prepare for this change, start using `color=\"current\"` and set icon colors via the CSS `color` property instead of using predefined color values.",
|
|
11554
|
+
"default": "\"default\"",
|
|
11555
|
+
"fieldName": "color"
|
|
11556
|
+
},
|
|
11557
|
+
{
|
|
11558
|
+
"name": "size",
|
|
11559
|
+
"type": {
|
|
11560
|
+
"text": "\"s\" | \"m\" | \"l\" | \"xl\" | \"current\""
|
|
11561
|
+
},
|
|
11562
|
+
"description": "The size of the icon.\nIf set to \"current\", the `--ddc-icon-size` CSS variable will be used. `--ddc-icon-size` may be set by a parent component such as `daikin-icon-button`.",
|
|
11563
|
+
"default": "\"current\"",
|
|
11564
|
+
"fieldName": "size"
|
|
11565
|
+
}
|
|
11566
|
+
],
|
|
11567
|
+
"superclass": {
|
|
11568
|
+
"name": "DDSElement",
|
|
11569
|
+
"module": "/src/base"
|
|
11570
|
+
},
|
|
11571
|
+
"tagName": "daikin-icon",
|
|
11572
|
+
"customElement": true
|
|
11573
|
+
}
|
|
11574
|
+
],
|
|
11575
|
+
"exports": [
|
|
11576
|
+
{
|
|
11577
|
+
"kind": "js",
|
|
11578
|
+
"name": "iconList",
|
|
11579
|
+
"declaration": {
|
|
11580
|
+
"name": "iconList",
|
|
11581
|
+
"module": "src/components/icon/daikin-icon.ts"
|
|
11582
|
+
}
|
|
11583
|
+
},
|
|
11584
|
+
{
|
|
11585
|
+
"kind": "js",
|
|
11586
|
+
"name": "DaikinIcon",
|
|
11587
|
+
"declaration": {
|
|
11588
|
+
"name": "DaikinIcon",
|
|
11589
|
+
"module": "src/components/icon/daikin-icon.ts"
|
|
11590
|
+
}
|
|
11591
|
+
},
|
|
11592
|
+
{
|
|
11593
|
+
"kind": "custom-element-definition",
|
|
11594
|
+
"name": "daikin-icon",
|
|
11595
|
+
"declaration": {
|
|
11596
|
+
"name": "DaikinIcon",
|
|
11597
|
+
"module": "src/components/icon/daikin-icon.ts"
|
|
11598
|
+
}
|
|
11599
|
+
},
|
|
11600
|
+
{
|
|
11601
|
+
"kind": "js",
|
|
11602
|
+
"name": "default",
|
|
11603
|
+
"declaration": {
|
|
11604
|
+
"name": "DaikinIcon",
|
|
11605
|
+
"module": "src/components/icon/daikin-icon.ts"
|
|
11606
|
+
}
|
|
11607
|
+
}
|
|
11608
|
+
]
|
|
11609
|
+
},
|
|
11610
|
+
{
|
|
11611
|
+
"kind": "javascript-module",
|
|
11612
|
+
"path": "dist/es/components/icon/index.js",
|
|
11613
|
+
"declarations": [],
|
|
11614
|
+
"exports": [
|
|
11615
|
+
{
|
|
11616
|
+
"kind": "js",
|
|
11617
|
+
"name": "*",
|
|
11618
|
+
"declaration": {
|
|
11619
|
+
"name": "*",
|
|
11620
|
+
"module": "src/components/icon/daikin-icon"
|
|
11621
|
+
}
|
|
11622
|
+
}
|
|
11623
|
+
]
|
|
11624
|
+
},
|
|
11625
|
+
{
|
|
11626
|
+
"kind": "javascript-module",
|
|
11627
|
+
"path": "dist/es/components/icon-button/daikin-icon-button.js",
|
|
11628
|
+
"declarations": [
|
|
11629
|
+
{
|
|
11630
|
+
"kind": "class",
|
|
11631
|
+
"description": "The icon button component is a versatile UI element that triggers actions or submits forms when clicked.\nIt functions similarly to the HTML `<button>` tag, allowing users to initiate various operations such as submitting data, opening dialogs, or navigating to different sections of an application.\n\nYou can insert any icon, including the daikin-icon, but please note the following regarding style:\n- About fill color - The icon should be able to accept the CSS `color` property.\n- About size - The recommended width of the icon is 24px * 24px. Please make sure that the size of the icon you insert conforms to this, or please set the `width` and `height` properties of the icon to 100%.",
|
|
11632
|
+
"name": "DaikinIconButton",
|
|
11633
|
+
"slots": [
|
|
11634
|
+
{
|
|
11635
|
+
"description": "A slot for an icon. Place a daikin-icon element or something similar.",
|
|
11636
|
+
"name": ""
|
|
11637
|
+
}
|
|
11638
|
+
],
|
|
11639
|
+
"members": [
|
|
11640
|
+
{
|
|
11641
|
+
"kind": "field",
|
|
11642
|
+
"name": "variant",
|
|
11643
|
+
"type": {
|
|
11644
|
+
"text": "IconButtonVariantProps[\"variant\"]"
|
|
11645
|
+
},
|
|
11646
|
+
"description": "Variant of the button.",
|
|
11647
|
+
"default": "\"fill\"",
|
|
11648
|
+
"attribute": "variant",
|
|
11649
|
+
"reflects": true
|
|
11650
|
+
},
|
|
11651
|
+
{
|
|
11652
|
+
"kind": "field",
|
|
11653
|
+
"name": "color",
|
|
11654
|
+
"type": {
|
|
11655
|
+
"text": "IconButtonVariantProps[\"color\"]"
|
|
11656
|
+
},
|
|
11657
|
+
"description": "Color of the button.",
|
|
11658
|
+
"default": "\"default\"",
|
|
11659
|
+
"attribute": "color",
|
|
11660
|
+
"reflects": true
|
|
11661
|
+
},
|
|
11662
|
+
{
|
|
11663
|
+
"kind": "field",
|
|
11664
|
+
"name": "disabled",
|
|
11665
|
+
"type": {
|
|
11666
|
+
"text": "boolean"
|
|
11667
|
+
},
|
|
11668
|
+
"default": "false",
|
|
11669
|
+
"description": "Whether the button is disabled.",
|
|
11670
|
+
"attribute": "disabled",
|
|
11671
|
+
"reflects": true
|
|
11672
|
+
},
|
|
11673
|
+
{
|
|
11674
|
+
"kind": "field",
|
|
11675
|
+
"name": "href",
|
|
11676
|
+
"type": {
|
|
11677
|
+
"text": "string | null"
|
|
11678
|
+
},
|
|
11679
|
+
"default": "null",
|
|
11680
|
+
"description": "Link `href`.\nOnly used if the `type` is `\"link\"`.\nIf omitted with `type=\"link\"`, the link will be treated as [a placeholder link](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element:~:text=If%20the%20a%20element%20has%20no%20href%20attribute) and rendered as disabled state.",
|
|
11681
|
+
"attribute": "href",
|
|
11682
|
+
"reflects": true
|
|
11683
|
+
},
|
|
11684
|
+
{
|
|
11685
|
+
"kind": "field",
|
|
11686
|
+
"name": "type",
|
|
11687
|
+
"type": {
|
|
11688
|
+
"text": "\"button\" | \"submit\" | \"reset\" | \"link\""
|
|
11689
|
+
},
|
|
11690
|
+
"description": "Type of the button.\nIf `\"link\"` is specified, the button will be rendered as an `<a>` element.",
|
|
11691
|
+
"default": "\"button\"",
|
|
11692
|
+
"attribute": "type",
|
|
11693
|
+
"reflects": true
|
|
11694
|
+
},
|
|
11695
|
+
{
|
|
11696
|
+
"kind": "field",
|
|
11697
|
+
"name": "buttonAriaLabel",
|
|
11698
|
+
"type": {
|
|
11699
|
+
"text": "string | null"
|
|
11700
|
+
},
|
|
11701
|
+
"default": "null",
|
|
11702
|
+
"description": "The aria-label of the icon button.",
|
|
11703
|
+
"attribute": "button-aria-label",
|
|
11704
|
+
"reflects": true
|
|
11705
|
+
},
|
|
11706
|
+
{
|
|
11707
|
+
"kind": "field",
|
|
11708
|
+
"name": "buttonRole",
|
|
11709
|
+
"type": {
|
|
11710
|
+
"text": "ARIARole | null"
|
|
11711
|
+
},
|
|
11712
|
+
"default": "null",
|
|
11713
|
+
"description": "Optional ARIA role of the button.",
|
|
11714
|
+
"attribute": "button-role",
|
|
11715
|
+
"reflects": true
|
|
11716
|
+
},
|
|
11717
|
+
{
|
|
11718
|
+
"kind": "field",
|
|
11719
|
+
"name": "buttonAriaHaspopup",
|
|
11720
|
+
"type": {
|
|
11721
|
+
"text": "| \"false\"\n | \"true\"\n | \"menu\"\n | \"listbox\"\n | \"tree\"\n | \"grid\"\n | \"dialog\"\n | null"
|
|
11722
|
+
},
|
|
11723
|
+
"default": "null",
|
|
11724
|
+
"description": "The aria-haspopup of the icon button when `type=\"button\"`.\nWhen used within a daikin-menu component, this property is automatically assigned the value `buttonAriaHaspopup=\"menu\"`.",
|
|
11725
|
+
"attribute": "button-aria-haspopup",
|
|
11726
|
+
"reflects": true
|
|
11727
|
+
},
|
|
11728
|
+
{
|
|
11729
|
+
"kind": "field",
|
|
11730
|
+
"name": "buttonAriaExpanded",
|
|
11731
|
+
"type": {
|
|
11732
|
+
"text": "\"true\" | \"false\" | \"undefined\" | null"
|
|
11733
|
+
},
|
|
11734
|
+
"default": "null",
|
|
11735
|
+
"description": "The aria-expanded of icon button when `type=\"button\"`.\nWhen used within a daikin-menu component, this property will be controlled by daikin-menu, so you don't need to specify it explicitly.",
|
|
11736
|
+
"attribute": "button-aria-expanded",
|
|
11737
|
+
"reflects": true
|
|
11738
|
+
},
|
|
11739
|
+
{
|
|
11740
|
+
"kind": "field",
|
|
11741
|
+
"name": "buttonTabIndex",
|
|
11742
|
+
"type": {
|
|
11743
|
+
"text": "number"
|
|
11744
|
+
},
|
|
11745
|
+
"description": "The `tabindex` of the button.\nIf omitted or set to 0, the button follows the default tab flow.\nSetting it to -1 makes the button unreachable via the Tab key.\nThis is useful when the button is part of a composite widget and accessible via other keys.",
|
|
11746
|
+
"attribute": "button-tabindex",
|
|
11747
|
+
"reflects": true
|
|
11748
|
+
},
|
|
11749
|
+
{
|
|
11750
|
+
"kind": "field",
|
|
11751
|
+
"name": "size",
|
|
11752
|
+
"type": {
|
|
11753
|
+
"text": "\"s\" | \"m\""
|
|
11754
|
+
},
|
|
11755
|
+
"default": "\"s\"",
|
|
11756
|
+
"description": "Size of the button.\n- `s`: 32px * 32px\n- `m`: 48px * 48px",
|
|
11757
|
+
"attribute": "size",
|
|
11758
|
+
"reflects": true
|
|
11759
|
+
},
|
|
11760
|
+
{
|
|
11761
|
+
"kind": "field",
|
|
11762
|
+
"name": "_button",
|
|
11763
|
+
"type": {
|
|
11764
|
+
"text": "HTMLButtonElement | null"
|
|
11765
|
+
},
|
|
11766
|
+
"privacy": "private",
|
|
11767
|
+
"readonly": true
|
|
11768
|
+
},
|
|
11769
|
+
{
|
|
11770
|
+
"kind": "method",
|
|
11771
|
+
"name": "getDDSNavigationTarget",
|
|
11772
|
+
"return": {
|
|
11773
|
+
"type": {
|
|
11774
|
+
"text": ""
|
|
11775
|
+
}
|
|
11776
|
+
},
|
|
11777
|
+
"description": "_Internal use._\nReturns the navigation target information.\nUsed by navigation handling utilities.",
|
|
11778
|
+
"privacy": "private"
|
|
11779
|
+
},
|
|
11780
|
+
{
|
|
11781
|
+
"kind": "method",
|
|
11782
|
+
"name": "focus",
|
|
11783
|
+
"return": {
|
|
11784
|
+
"type": {
|
|
11785
|
+
"text": "void"
|
|
11786
|
+
}
|
|
11787
|
+
},
|
|
11788
|
+
"parameters": [
|
|
11789
|
+
{
|
|
11790
|
+
"name": "options",
|
|
11791
|
+
"optional": true,
|
|
11792
|
+
"type": {
|
|
11793
|
+
"text": "FocusOptions"
|
|
11794
|
+
},
|
|
11795
|
+
"description": "focus options"
|
|
11796
|
+
}
|
|
11797
|
+
],
|
|
11798
|
+
"description": "Focuses on the inner button."
|
|
11799
|
+
},
|
|
11800
|
+
{
|
|
11801
|
+
"kind": "field",
|
|
11802
|
+
"name": "formAttr",
|
|
11803
|
+
"type": {
|
|
11804
|
+
"text": "string"
|
|
11805
|
+
},
|
|
11806
|
+
"description": "The form the component belongs to.",
|
|
11807
|
+
"attribute": "form",
|
|
11567
11808
|
"reflects": true,
|
|
11568
11809
|
"inheritedFrom": {
|
|
11569
11810
|
"name": "DDSFormSubmitElement",
|
|
@@ -11901,247 +12142,6 @@
|
|
|
11901
12142
|
}
|
|
11902
12143
|
]
|
|
11903
12144
|
},
|
|
11904
|
-
{
|
|
11905
|
-
"kind": "javascript-module",
|
|
11906
|
-
"path": "dist/es/components/icon/daikin-icon.js",
|
|
11907
|
-
"declarations": [
|
|
11908
|
-
{
|
|
11909
|
-
"kind": "variable",
|
|
11910
|
-
"name": "iconList"
|
|
11911
|
-
},
|
|
11912
|
-
{
|
|
11913
|
-
"kind": "class",
|
|
11914
|
-
"description": "A versatile UI element that displays small graphical symbols or images representing actions, objects, or concepts within an application.\nThe component uses the predefined DDS icon set by default but also supports custom icons via the icon registry.\n\nPredefined DDS icons are automatically rendered using optimized CSS classes.\nCustom icons can be dynamically loaded from various sources using the icon registry.\n\nIf an icon cannot be loaded, a blank space is displayed.\nIn development builds, warnings are logged to the console for debugging.\n\n### Using Custom Icons\n\nCustom icons must be registered with the icon registry before use.\nThey can be registered individually or in bulk using pattern matching, with support for multiple rendering modes.\n\n#### Rendering Modes\n\nCustom icons support multiple rendering modes, each with different characteristics:\n\n- **mask** (default): Uses CSS `mask-image` to render the icon.\n - Secure rendering method (SVG is converted to data URL).\n - Supports color customization via the `color` property or CSS `color`.\n - Best choice for most use cases with custom icons.\n- **background**: Uses CSS `background-image` to render the icon.\n - Secure rendering method (SVG is converted to data URL).\n - Does NOT support color customization; the icon is rendered with its original colors.\n - Use this mode when you need to preserve the original colors of multi-color SVG icons.\n- **inline**: Traditional SVG rendering using `innerHTML`.\n - Renders the raw SVG markup directly in the DOM.\n - Supports color customization if the SVG uses `currentColor` or inheritable properties.\n - ⚠️ **Security Warning**: Only use this mode with SVG content from trusted sources. Untrusted SVG content may lead to XSS vulnerabilities.\n - Use `mask` or `background` modes for better security.\n\n#### Registration Examples\n\n```js\nimport { iconRegistry } from \"@daikin-oss/design-system-web-components/icon-registry.js\";\n\n// Register a single custom icon using mask mode for secure rendering and color customization\niconRegistry.register({\n name: \"my-custom-icon\",\n svg: {\n svg: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">...</svg>',\n mode: \"mask\",\n defaultColor: \"#0066cc\"\n },\n});\n\n// Register multiple custom icons dynamically using pattern matching\niconRegistry.register({\n match: /^dynamic-custom-/,\n async fetch: (name) => {\n const response = await fetch(`/path/to/custom/icons/${name}.svg`);\n if (!response.ok) {\n throw new Error(`Failed to load custom icon \"${name}\"`);\n }\n // You can return just the SVG content as a string (defaults to mask mode)\n // Or return an object with `svg`, `defaultColor` (optional), and `mode` (optional) for more control\n return response.text();\n },\n});\n```\n\nOnce registered, you can use your custom icons in components:\n\n```html\n<daikin-icon icon=\"my-custom-icon\" color=\"current\" size=\"m\"></daikin-icon>\n<daikin-icon icon=\"dynamic-custom-icon-123\" color=\"current\" size=\"m\"></daikin-icon>\n```\n\n### Changing Icon Color\n\nTo use a custom color, set the `color` property to `\"current\"` and apply the desired color using the CSS `color` property:\n\n```html\n<daikin-icon icon=\"information\" color=\"current\" style=\"color: red;\"></daikin-icon>\n<!-- or you can inherit the color from a parent element -->\n<div style=\"color: blue;\">\n <daikin-icon icon=\"information\" color=\"current\"></daikin-icon>\n</div>\n```\n\nThis behavior is supported natively for DDS icons and `mask` mode (the default for custom icons).\nIn `inline` mode, color inheritance works only if the SVG uses `currentColor` or inheritable properties.\nNote that `background` mode does not support custom colors.",
|
|
11915
|
-
"name": "DaikinIcon",
|
|
11916
|
-
"cssProperties": [
|
|
11917
|
-
{
|
|
11918
|
-
"description": "The size of the icon. If you set a value other than \"current\" for the `size` property, this will be automatically overwritten.",
|
|
11919
|
-
"name": "--ddc-icon-size"
|
|
11920
|
-
}
|
|
11921
|
-
],
|
|
11922
|
-
"members": [
|
|
11923
|
-
{
|
|
11924
|
-
"kind": "field",
|
|
11925
|
-
"name": "registry",
|
|
11926
|
-
"type": {
|
|
11927
|
-
"text": "IconRegistry"
|
|
11928
|
-
},
|
|
11929
|
-
"default": "iconRegistry",
|
|
11930
|
-
"description": "The icon registry instance to use.\nDefaults to the global icon registry."
|
|
11931
|
-
},
|
|
11932
|
-
{
|
|
11933
|
-
"kind": "field",
|
|
11934
|
-
"name": "icon",
|
|
11935
|
-
"type": {
|
|
11936
|
-
"text": "string"
|
|
11937
|
-
},
|
|
11938
|
-
"description": "The name of the icon to display.\nCan be a static DDS icon name or a custom icon name registered in the icon registry.",
|
|
11939
|
-
"attribute": "icon",
|
|
11940
|
-
"reflects": true
|
|
11941
|
-
},
|
|
11942
|
-
{
|
|
11943
|
-
"kind": "field",
|
|
11944
|
-
"name": "color",
|
|
11945
|
-
"type": {
|
|
11946
|
-
"text": "IconVariantProps[\"color\"]"
|
|
11947
|
-
},
|
|
11948
|
-
"description": "The color of the icon.\nUse `\"current\"` for most cases.\n\n**This property will be removed in a future release.**\nTo prepare for this change, start using `color=\"current\"` and set icon colors via the CSS `color` property instead of using predefined color values.",
|
|
11949
|
-
"default": "\"default\"",
|
|
11950
|
-
"attribute": "color",
|
|
11951
|
-
"reflects": true
|
|
11952
|
-
},
|
|
11953
|
-
{
|
|
11954
|
-
"kind": "field",
|
|
11955
|
-
"name": "size",
|
|
11956
|
-
"type": {
|
|
11957
|
-
"text": "\"s\" | \"m\" | \"l\" | \"xl\" | \"current\""
|
|
11958
|
-
},
|
|
11959
|
-
"description": "The size of the icon.\nIf set to \"current\", the `--ddc-icon-size` CSS variable will be used. `--ddc-icon-size` may be set by a parent component such as `daikin-icon-button`.",
|
|
11960
|
-
"default": "\"current\"",
|
|
11961
|
-
"attribute": "size",
|
|
11962
|
-
"reflects": true
|
|
11963
|
-
},
|
|
11964
|
-
{
|
|
11965
|
-
"kind": "field",
|
|
11966
|
-
"name": "_iconData",
|
|
11967
|
-
"type": {
|
|
11968
|
-
"text": "IconData | StaticIconData | null"
|
|
11969
|
-
},
|
|
11970
|
-
"privacy": "private",
|
|
11971
|
-
"default": "null"
|
|
11972
|
-
},
|
|
11973
|
-
{
|
|
11974
|
-
"kind": "method",
|
|
11975
|
-
"name": "loadIcon",
|
|
11976
|
-
"privacy": "private"
|
|
11977
|
-
},
|
|
11978
|
-
{
|
|
11979
|
-
"kind": "field",
|
|
11980
|
-
"name": "version",
|
|
11981
|
-
"type": {
|
|
11982
|
-
"text": "string"
|
|
11983
|
-
},
|
|
11984
|
-
"static": true,
|
|
11985
|
-
"readonly": true,
|
|
11986
|
-
"default": "VERSION",
|
|
11987
|
-
"description": "The version of the DDS library",
|
|
11988
|
-
"inheritedFrom": {
|
|
11989
|
-
"name": "DDSElement",
|
|
11990
|
-
"module": "dist/es/base/dds-element.js"
|
|
11991
|
-
}
|
|
11992
|
-
},
|
|
11993
|
-
{
|
|
11994
|
-
"kind": "method",
|
|
11995
|
-
"name": "getPropertyDescriptor",
|
|
11996
|
-
"static": true,
|
|
11997
|
-
"return": {
|
|
11998
|
-
"type": {
|
|
11999
|
-
"text": ""
|
|
12000
|
-
}
|
|
12001
|
-
},
|
|
12002
|
-
"parameters": [
|
|
12003
|
-
{
|
|
12004
|
-
"name": "name",
|
|
12005
|
-
"type": {
|
|
12006
|
-
"text": "PropertyKey"
|
|
12007
|
-
},
|
|
12008
|
-
"description": "The property name (e.g., \"value\", \"disabled\")"
|
|
12009
|
-
},
|
|
12010
|
-
{
|
|
12011
|
-
"name": "key",
|
|
12012
|
-
"type": {
|
|
12013
|
-
"text": "string | symbol"
|
|
12014
|
-
},
|
|
12015
|
-
"description": "The backing property key used for internal storage (generated by Lit)"
|
|
12016
|
-
},
|
|
12017
|
-
{
|
|
12018
|
-
"name": "{ fallbackValue, isAllowedValue, ...options }",
|
|
12019
|
-
"type": {
|
|
12020
|
-
"text": "DDSPropertyDeclaration"
|
|
12021
|
-
}
|
|
12022
|
-
},
|
|
12023
|
-
{
|
|
12024
|
-
"description": "DDS property declaration options including fallbackValue and isAllowedValue",
|
|
12025
|
-
"name": "options"
|
|
12026
|
-
}
|
|
12027
|
-
],
|
|
12028
|
-
"description": "Override of LitElement's getPropertyDescriptor to add support for fallback values\nand property validation.",
|
|
12029
|
-
"inheritedFrom": {
|
|
12030
|
-
"name": "DDSElement",
|
|
12031
|
-
"module": "dist/es/base/dds-element.js"
|
|
12032
|
-
}
|
|
12033
|
-
},
|
|
12034
|
-
{
|
|
12035
|
-
"kind": "method",
|
|
12036
|
-
"name": "getBackingProperty",
|
|
12037
|
-
"privacy": "protected",
|
|
12038
|
-
"return": {
|
|
12039
|
-
"type": {
|
|
12040
|
-
"text": ""
|
|
12041
|
-
}
|
|
12042
|
-
},
|
|
12043
|
-
"parameters": [
|
|
12044
|
-
{
|
|
12045
|
-
"name": "name",
|
|
12046
|
-
"type": {
|
|
12047
|
-
"text": "T"
|
|
12048
|
-
},
|
|
12049
|
-
"description": "The property name to retrieve the backing value for"
|
|
12050
|
-
}
|
|
12051
|
-
],
|
|
12052
|
-
"description": "Retrieves the backing property value for a given property name.\nThis allows access to the underlying stored value before any fallback logic is applied.\n\nWhy is this needed?\n- The public property getter may return a fallback value when the actual value is undefined.\n- Sometimes we need to know if the property was explicitly set or if we're using a fallback.\n- This method provides access to the raw backing value stored by Lit.",
|
|
12053
|
-
"inheritedFrom": {
|
|
12054
|
-
"name": "DDSElement",
|
|
12055
|
-
"module": "dist/es/base/dds-element.js"
|
|
12056
|
-
}
|
|
12057
|
-
}
|
|
12058
|
-
],
|
|
12059
|
-
"attributes": [
|
|
12060
|
-
{
|
|
12061
|
-
"name": "icon",
|
|
12062
|
-
"type": {
|
|
12063
|
-
"text": "string"
|
|
12064
|
-
},
|
|
12065
|
-
"description": "The name of the icon to display.\nCan be a static DDS icon name or a custom icon name registered in the icon registry.",
|
|
12066
|
-
"fieldName": "icon"
|
|
12067
|
-
},
|
|
12068
|
-
{
|
|
12069
|
-
"name": "color",
|
|
12070
|
-
"type": {
|
|
12071
|
-
"text": "IconVariantProps[\"color\"]"
|
|
12072
|
-
},
|
|
12073
|
-
"description": "The color of the icon.\nUse `\"current\"` for most cases.\n\n**This property will be removed in a future release.**\nTo prepare for this change, start using `color=\"current\"` and set icon colors via the CSS `color` property instead of using predefined color values.",
|
|
12074
|
-
"default": "\"default\"",
|
|
12075
|
-
"fieldName": "color"
|
|
12076
|
-
},
|
|
12077
|
-
{
|
|
12078
|
-
"name": "size",
|
|
12079
|
-
"type": {
|
|
12080
|
-
"text": "\"s\" | \"m\" | \"l\" | \"xl\" | \"current\""
|
|
12081
|
-
},
|
|
12082
|
-
"description": "The size of the icon.\nIf set to \"current\", the `--ddc-icon-size` CSS variable will be used. `--ddc-icon-size` may be set by a parent component such as `daikin-icon-button`.",
|
|
12083
|
-
"default": "\"current\"",
|
|
12084
|
-
"fieldName": "size"
|
|
12085
|
-
}
|
|
12086
|
-
],
|
|
12087
|
-
"superclass": {
|
|
12088
|
-
"name": "DDSElement",
|
|
12089
|
-
"module": "/src/base"
|
|
12090
|
-
},
|
|
12091
|
-
"tagName": "daikin-icon",
|
|
12092
|
-
"customElement": true
|
|
12093
|
-
}
|
|
12094
|
-
],
|
|
12095
|
-
"exports": [
|
|
12096
|
-
{
|
|
12097
|
-
"kind": "js",
|
|
12098
|
-
"name": "iconList",
|
|
12099
|
-
"declaration": {
|
|
12100
|
-
"name": "iconList",
|
|
12101
|
-
"module": "src/components/icon/daikin-icon.ts"
|
|
12102
|
-
}
|
|
12103
|
-
},
|
|
12104
|
-
{
|
|
12105
|
-
"kind": "js",
|
|
12106
|
-
"name": "DaikinIcon",
|
|
12107
|
-
"declaration": {
|
|
12108
|
-
"name": "DaikinIcon",
|
|
12109
|
-
"module": "src/components/icon/daikin-icon.ts"
|
|
12110
|
-
}
|
|
12111
|
-
},
|
|
12112
|
-
{
|
|
12113
|
-
"kind": "custom-element-definition",
|
|
12114
|
-
"name": "daikin-icon",
|
|
12115
|
-
"declaration": {
|
|
12116
|
-
"name": "DaikinIcon",
|
|
12117
|
-
"module": "src/components/icon/daikin-icon.ts"
|
|
12118
|
-
}
|
|
12119
|
-
},
|
|
12120
|
-
{
|
|
12121
|
-
"kind": "js",
|
|
12122
|
-
"name": "default",
|
|
12123
|
-
"declaration": {
|
|
12124
|
-
"name": "DaikinIcon",
|
|
12125
|
-
"module": "src/components/icon/daikin-icon.ts"
|
|
12126
|
-
}
|
|
12127
|
-
}
|
|
12128
|
-
]
|
|
12129
|
-
},
|
|
12130
|
-
{
|
|
12131
|
-
"kind": "javascript-module",
|
|
12132
|
-
"path": "dist/es/components/icon/index.js",
|
|
12133
|
-
"declarations": [],
|
|
12134
|
-
"exports": [
|
|
12135
|
-
{
|
|
12136
|
-
"kind": "js",
|
|
12137
|
-
"name": "*",
|
|
12138
|
-
"declaration": {
|
|
12139
|
-
"name": "*",
|
|
12140
|
-
"module": "src/components/icon/daikin-icon"
|
|
12141
|
-
}
|
|
12142
|
-
}
|
|
12143
|
-
]
|
|
12144
|
-
},
|
|
12145
12145
|
{
|
|
12146
12146
|
"kind": "javascript-module",
|
|
12147
12147
|
"path": "dist/es/components/inline-notification/daikin-inline-notification.js",
|