@itwin/core-react 3.3.0-dev.1 → 3.3.0-dev.13
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 +12 -1
- package/lib/cjs/core-react/colorvariables.scss +83 -83
- package/lib/cjs/core-react/icons/IconComponent.js +1 -1
- package/lib/cjs/core-react/icons/IconComponent.js.map +1 -1
- package/lib/cjs/core-react/utils/IconWebComponent.d.ts.map +1 -1
- package/lib/cjs/core-react/utils/IconWebComponent.js +4 -1
- package/lib/cjs/core-react/utils/IconWebComponent.js.map +1 -1
- package/lib/esm/core-react/colorvariables.scss +83 -83
- package/lib/esm/core-react/icons/IconComponent.js +1 -1
- package/lib/esm/core-react/icons/IconComponent.js.map +1 -1
- package/lib/esm/core-react/utils/IconWebComponent.d.ts.map +1 -1
- package/lib/esm/core-react/utils/IconWebComponent.js +4 -1
- package/lib/esm/core-react/utils/IconWebComponent.js.map +1 -1
- package/package.json +10 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,17 @@
|
|
|
1
1
|
# Change Log - @itwin/core-react
|
|
2
2
|
|
|
3
|
-
This log was last generated on Fri,
|
|
3
|
+
This log was last generated on Fri, 20 May 2022 13:10:54 GMT and should not be manually modified.
|
|
4
|
+
|
|
5
|
+
## 3.2.0
|
|
6
|
+
Fri, 20 May 2022 13:10:54 GMT
|
|
7
|
+
|
|
8
|
+
### Updates
|
|
9
|
+
|
|
10
|
+
- Added 'useCrossOriginPopup' and 'useInterval' hooks
|
|
11
|
+
- ListBox component: `onKeyPress` has been deprecated, switch to `onKeyDown`
|
|
12
|
+
- Fix for losing viewport content after clicking PW link
|
|
13
|
+
- Implement svg icons loading as a web component.
|
|
14
|
+
- Allow React icons to be used on Wedget tabs, backstage, and status bar items
|
|
4
15
|
|
|
5
16
|
## 3.1.3
|
|
6
17
|
Fri, 15 Apr 2022 13:49:25 GMT
|
|
@@ -13,104 +13,104 @@
|
|
|
13
13
|
:root {
|
|
14
14
|
|
|
15
15
|
// NEEDSWORK - Need to deprecate these accessory colors
|
|
16
|
-
--buic-accessory-hollow:
|
|
17
|
-
--buic-accessory-primary:
|
|
18
|
-
--buic-accessory-success:
|
|
19
|
-
--buic-accessory-alert:
|
|
20
|
-
--buic-accessory-warning:
|
|
21
|
-
--buic-accessory-primary-tint:
|
|
22
|
-
--buic-accessory-success-tint:
|
|
23
|
-
--buic-accessory-alert-tint:
|
|
24
|
-
--buic-accessory-warning-tint:
|
|
25
|
-
|
|
26
|
-
--buic-background-1-rgb:
|
|
27
|
-
--buic-background-2-rgb:
|
|
28
|
-
--buic-background-3-rgb:
|
|
29
|
-
--buic-background-4-rgb:
|
|
30
|
-
--buic-background-5-rgb:
|
|
31
|
-
|
|
32
|
-
--buic-background-1:
|
|
33
|
-
--buic-background-2:
|
|
34
|
-
--buic-background-3:
|
|
35
|
-
--buic-background-4:
|
|
36
|
-
--buic-background-5:
|
|
37
|
-
--buic-background-primary:
|
|
38
|
-
--buic-background-tooltip:
|
|
39
|
-
--buic-background-scrollbar:
|
|
40
|
-
--buic-background-scrollbar-hover:
|
|
41
|
-
|
|
42
|
-
--buic-foreground-body-rgb:
|
|
43
|
-
--buic-foreground-body:
|
|
44
|
-
--buic-foreground-body-reverse-rgb:
|
|
45
|
-
--buic-foreground-body-reverse:
|
|
46
|
-
--buic-foreground-muted:
|
|
47
|
-
--buic-foreground-disabled:
|
|
48
|
-
--buic-foreground-activehover:
|
|
49
|
-
|
|
50
|
-
--buic-inputs-border:
|
|
51
|
-
--buic-inputs-boxshadow:
|
|
52
|
-
--buic-popup-boxshadow:
|
|
53
|
-
|
|
54
|
-
--buic-foreground-primary:
|
|
55
|
-
--buic-foreground-primary-tone:
|
|
56
|
-
--buic-foreground-focus:
|
|
57
|
-
--buic-foreground-focus-border:
|
|
58
|
-
--buic-focus-boxshadow:
|
|
16
|
+
--buic-accessory-hollow: rgb(255, 255, 255);
|
|
17
|
+
--buic-accessory-primary: rgb(000, 139, 225);
|
|
18
|
+
--buic-accessory-success: rgb(083, 162, 026);
|
|
19
|
+
--buic-accessory-alert: rgb(211, 010, 010);
|
|
20
|
+
--buic-accessory-warning: rgb(241, 139, 018);
|
|
21
|
+
--buic-accessory-primary-tint: rgb(165, 215, 245);
|
|
22
|
+
--buic-accessory-success-tint: rgb(195, 225, 175);
|
|
23
|
+
--buic-accessory-alert-tint: rgb(239, 169, 169);
|
|
24
|
+
--buic-accessory-warning-tint: rgb(249, 215, 171);
|
|
25
|
+
|
|
26
|
+
--buic-background-1-rgb: var(--iui-color-background-1-rgb);
|
|
27
|
+
--buic-background-2-rgb: var(--iui-color-background-2-rgb);
|
|
28
|
+
--buic-background-3-rgb: var(--iui-color-background-3-rgb);
|
|
29
|
+
--buic-background-4-rgb: var(--iui-color-background-4-rgb);
|
|
30
|
+
--buic-background-5-rgb: var(--iui-color-background-5-rgb);
|
|
31
|
+
|
|
32
|
+
--buic-background-1: var(--iui-color-background-1);
|
|
33
|
+
--buic-background-2: var(--iui-color-background-2);
|
|
34
|
+
--buic-background-3: var(--iui-color-background-3);
|
|
35
|
+
--buic-background-4: var(--iui-color-background-4);
|
|
36
|
+
--buic-background-5: var(--iui-color-background-5);
|
|
37
|
+
--buic-background-primary: var(--iui-color-background-primary);
|
|
38
|
+
--buic-background-tooltip: rgba(var(--iui-color-background-5-rgb), 0.90);
|
|
39
|
+
--buic-background-scrollbar: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
|
|
40
|
+
--buic-background-scrollbar-hover: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
|
|
41
|
+
|
|
42
|
+
--buic-foreground-body-rgb: var(--iui-text-color-rgb);
|
|
43
|
+
--buic-foreground-body: var(--iui-text-color);
|
|
44
|
+
--buic-foreground-body-reverse-rgb: var(--iui-color-foreground-body-invert-rgb);
|
|
45
|
+
--buic-foreground-body-reverse: rgba(var(--iui-color-foreground-body-invert-rgb), var(--iui-opacity-2));
|
|
46
|
+
--buic-foreground-muted: var(--iui-text-color-muted);
|
|
47
|
+
--buic-foreground-disabled: var(--iui-text-color-placeholder);
|
|
48
|
+
--buic-foreground-activehover: var(--iui-icons-color-actionable-hover);
|
|
49
|
+
|
|
50
|
+
--buic-inputs-border: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
|
|
51
|
+
--buic-inputs-boxshadow: var(--iui-focus-box-shadow);
|
|
52
|
+
--buic-popup-boxshadow: var(--buic-inputs-boxshadow);
|
|
53
|
+
|
|
54
|
+
--buic-foreground-primary: var(--iui-icons-color-primary);
|
|
55
|
+
--buic-foreground-primary-tone: var(--iui-color-foreground-primary-overlay);
|
|
56
|
+
--buic-foreground-focus: var(--iui-color-foreground-primary-overlay);
|
|
57
|
+
--buic-foreground-focus-border: var(--buic-inputs-border);
|
|
58
|
+
--buic-focus-boxshadow: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
|
|
59
59
|
|
|
60
60
|
// The following two are still in use by DatePicker and there is no itwinui equivalent
|
|
61
61
|
--buic-focus-boxshadow-gradient1: rgba(var(--buic-foreground-primary-tone-rgb), 0);
|
|
62
62
|
--buic-focus-boxshadow-gradient2: rgba(var(--buic-foreground-primary-rgb), 0.65);
|
|
63
63
|
|
|
64
|
-
--buic-foreground-accessory:
|
|
65
|
-
--buic-foreground-success:
|
|
66
|
-
--buic-foreground-positive:
|
|
67
|
-
--buic-foreground-positive-rgb:
|
|
68
|
-
--buic-foreground-alert:
|
|
69
|
-
--buic-foreground-negative:
|
|
70
|
-
--buic-foreground-negative-rgb:
|
|
71
|
-
--buic-foreground-warning:
|
|
72
|
-
--buic-foreground-warning-rgb:
|
|
64
|
+
--buic-foreground-accessory: var(--iui-color-foreground-accessory);
|
|
65
|
+
--buic-foreground-success: var(--iui-color-foreground-positive);
|
|
66
|
+
--buic-foreground-positive: var(--iui-color-foreground-positive);
|
|
67
|
+
--buic-foreground-positive-rgb: var(--iui-color-foreground-positive-rgb);
|
|
68
|
+
--buic-foreground-alert: var(--iui-color-foreground-negative);
|
|
69
|
+
--buic-foreground-negative: var(--iui-color-foreground-negative);
|
|
70
|
+
--buic-foreground-negative-rgb: var(--iui-color-foreground-negative-rgb);
|
|
71
|
+
--buic-foreground-warning: var(--iui-color-foreground-warning);
|
|
72
|
+
--buic-foreground-warning-rgb: var(--iui-color-foreground-warning-rgb);
|
|
73
73
|
|
|
74
|
-
--buic-background-focus-overlay:
|
|
75
|
-
--buic-background-hover-overlay:
|
|
76
|
-
--buic-background-active-overlay:
|
|
77
|
-
--buic-background-pressed-overlay:
|
|
74
|
+
--buic-background-focus-overlay: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
|
|
75
|
+
--buic-background-hover-overlay: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
|
|
76
|
+
--buic-background-active-overlay: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
|
|
77
|
+
--buic-background-pressed-overlay: rgba(var(--iui-color-foreground-primary-rgb), 0.3);
|
|
78
78
|
|
|
79
|
-
--buic-background-card:
|
|
80
|
-
--buic-background-striped_row:
|
|
79
|
+
--buic-background-card: var(--buic-background-tooltip);
|
|
80
|
+
--buic-background-striped_row: rgba(var(--iui-color-foreground-body-rgb), 0.03);
|
|
81
81
|
|
|
82
82
|
/** background.5 */
|
|
83
|
-
--buic-background-titlebar:
|
|
84
|
-
--buic-background-dialog-stroke:
|
|
85
|
-
--buic-background-widget-stroke:
|
|
86
|
-
--buic-background-control-stroke:
|
|
87
|
-
--buic-background-panel-stroke:
|
|
88
|
-
--buic-background-toolbutton-stroke:
|
|
83
|
+
--buic-background-titlebar: var(--buic-background-5);
|
|
84
|
+
--buic-background-dialog-stroke: var(--buic-background-5);
|
|
85
|
+
--buic-background-widget-stroke: var(--buic-background-5);
|
|
86
|
+
--buic-background-control-stroke: var(--buic-background-5);
|
|
87
|
+
--buic-background-panel-stroke: var(--buic-background-5);
|
|
88
|
+
--buic-background-toolbutton-stroke: var(--buic-background-5);
|
|
89
89
|
|
|
90
90
|
/** background.4 */
|
|
91
|
-
--buic-background-titlebar-outoffocus:
|
|
92
|
-
--buic-background-divider:
|
|
93
|
-
--buic-background-widget-element-stroke:
|
|
94
|
-
--buic-background-statusbar:
|
|
95
|
-
--buic-background-table-header:
|
|
96
|
-
--buic-background-control-stroke-disabled:
|
|
91
|
+
--buic-background-titlebar-outoffocus: var(--buic-background-4);
|
|
92
|
+
--buic-background-divider: var(--buic-background-4);
|
|
93
|
+
--buic-background-widget-element-stroke: var(--buic-background-4);
|
|
94
|
+
--buic-background-statusbar: var(--buic-background-4);
|
|
95
|
+
--buic-background-table-header: var(--buic-background-4);
|
|
96
|
+
--buic-background-control-stroke-disabled: var(--buic-background-4);
|
|
97
97
|
|
|
98
98
|
/** background.3 */
|
|
99
|
-
--buic-background-tab-inactive:
|
|
100
|
-
--buic-background-toolbutton-inactive:
|
|
101
|
-
--buic-background-context-menu:
|
|
102
|
-
--buic-background-panel:
|
|
103
|
-
--buic-background-
|
|
104
|
-
--buic-background-
|
|
105
|
-
--buic-background-control-disabled: var(--buic-background-3);
|
|
99
|
+
--buic-background-tab-inactive: var(--buic-background-3);
|
|
100
|
+
--buic-background-toolbutton-inactive: var(--buic-background-3);
|
|
101
|
+
--buic-background-context-menu: var(--buic-background-3);
|
|
102
|
+
--buic-background-widget-panel: var(--buic-background-3);
|
|
103
|
+
--buic-background-placeholder: var(--buic-background-3);
|
|
104
|
+
--buic-background-control-disabled: var(--buic-background-3);
|
|
106
105
|
|
|
107
106
|
/** background.2 */
|
|
108
|
-
--buic-background-tab-active:
|
|
109
|
-
--buic-background-dialog:
|
|
110
|
-
--buic-background-widget:
|
|
111
|
-
--buic-background-window:
|
|
112
|
-
--buic-background-toolbar:
|
|
107
|
+
--buic-background-tab-active: var(--buic-background-2);
|
|
108
|
+
--buic-background-dialog: var(--buic-background-2);
|
|
109
|
+
--buic-background-widget: var(--buic-background-2);
|
|
110
|
+
--buic-background-window: var(--buic-background-2);
|
|
111
|
+
--buic-background-toolbar: var(--buic-background-2);
|
|
112
|
+
--buic-background-panel: var(--buic-background-2);
|
|
113
113
|
|
|
114
114
|
/** background.1 */
|
|
115
|
-
--buic-background-control:
|
|
115
|
+
--buic-background-control: var(--buic-background-1);
|
|
116
116
|
}
|
|
@@ -31,7 +31,7 @@ function Icon(props) {
|
|
|
31
31
|
React.createElement(SvgSprite_1.SvgSprite, { src: svgSource })));
|
|
32
32
|
const webComponentString = appui_abstract_1.IconSpecUtilities.getWebComponentSource(iconString);
|
|
33
33
|
if (webComponentString) {
|
|
34
|
-
const svgLoader = `<svg-loader src=${webComponentString}
|
|
34
|
+
const svgLoader = `<svg-loader src=${webComponentString}></svg-loader>`;
|
|
35
35
|
const svgDiv = `<div>${svgLoader}</div>`;
|
|
36
36
|
// the esm build of dompurify has a default import but the cjs build does not
|
|
37
37
|
// if there is a default export, use it (likely esm), otherwise use the namespace
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconComponent.js","sourceRoot":"","sources":["../../../../src/core-react/icons/IconComponent.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;;;AAEH,gCAA8B;AAC9B,+BAA+B;AAC/B,2CAAoC;AACpC,0DAAkF;AAClF,2CAAwC;AAExC,oEAAoD;AAiBpD;;GAEG;AACH,SAAgB,IAAI,CAAC,KAAgB;IACnC,IAAI,CAAC,KAAK,CAAC,QAAQ;QACjB,OAAO,IAAI,CAAC;IAEd,MAAM,UAAU,GAAG,CAAC,OAAO,KAAK,CAAC,QAAQ,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ,YAAY,uCAAsB,CAAC,CAAC,CAAC;QAC3G,uCAAsB,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9D,IAAI,UAAU,EAAE;QACd,MAAM,SAAS,GAAG,kCAAiB,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QAC7D,kIAAkI;QAClI,IAAI,SAAS,KAAK,SAAS;YACzB,OAAO,CACL,2BAAG,SAAS,EAAE,IAAA,oBAAU,EAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;gBACpF,oBAAC,qBAAS,IAAC,GAAG,EAAE,SAAS,GAAI,CAC3B,CACL,CAAC;QACJ,MAAM,kBAAkB,GAAG,kCAAiB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC;QAC/E,IAAI,kBAAkB,
|
|
1
|
+
{"version":3,"file":"IconComponent.js","sourceRoot":"","sources":["../../../../src/core-react/icons/IconComponent.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;;;AAEH,gCAA8B;AAC9B,+BAA+B;AAC/B,2CAAoC;AACpC,0DAAkF;AAClF,2CAAwC;AAExC,oEAAoD;AAiBpD;;GAEG;AACH,SAAgB,IAAI,CAAC,KAAgB;IACnC,IAAI,CAAC,KAAK,CAAC,QAAQ;QACjB,OAAO,IAAI,CAAC;IAEd,MAAM,UAAU,GAAG,CAAC,OAAO,KAAK,CAAC,QAAQ,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ,YAAY,uCAAsB,CAAC,CAAC,CAAC;QAC3G,uCAAsB,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9D,IAAI,UAAU,EAAE;QACd,MAAM,SAAS,GAAG,kCAAiB,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QAC7D,kIAAkI;QAClI,IAAI,SAAS,KAAK,SAAS;YACzB,OAAO,CACL,2BAAG,SAAS,EAAE,IAAA,oBAAU,EAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;gBACpF,oBAAC,qBAAS,IAAC,GAAG,EAAE,SAAS,GAAI,CAC3B,CACL,CAAC;QACJ,MAAM,kBAAkB,GAAG,kCAAiB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC;QAC/E,IAAI,kBAAkB,EAAE;YACtB,MAAM,SAAS,GAAG,mBAAmB,kBAAkB,gBAAgB,CAAC;YACxE,MAAM,MAAM,GAAG,QAAQ,SAAS,QAAQ,CAAC;YACzC,6EAA6E;YAC7E,iFAAiF;YACjF,uBAAuB;YACvB,MAAM,SAAS,GAAG,mBAAS,aAAT,mBAAS,cAAT,mBAAS,GAAI,WAAW,CAAC;YAC3C,MAAM,mBAAmB,GAAG,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,EAAE,YAAY,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;YACzF,iFAAiF;YACjF,+FAA+F;YAC/F,MAAM,gBAAgB,GAAG,6BAAK,uBAAuB,EAAE,EAAE,MAAM,EAAE,mBAAmB,EAAE,GAAQ,CAAC;YAC/F,OAAO,CACL,2BAAG,SAAS,EAAE,IAAA,oBAAU,EAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,IAC/D,gBAAgB,CACf,CACL,CAAC;SACH;QACD,OAAO,CAAC,2BAAG,SAAS,EAAE,IAAA,oBAAU,EAAC,MAAM,EAAE,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,CAAC,CAAC;KAChG;IAED,OAAO,CACL,2BAAG,SAAS,EAAE,IAAA,oBAAU,EAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IACnF,KAAK,CAAC,QAAQ,CACb,CACL,CAAC;AACJ,CAAC;AA1CD,oBA0CC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/* eslint-disable deprecation/deprecation */\r\n/** @packageDocumentation\r\n * @module Icon\r\n */\r\n\r\nimport \"./IconComponent.scss\";\r\nimport * as React from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { ConditionalStringValue, IconSpecUtilities } from \"@itwin/appui-abstract\";\r\nimport { SvgSprite } from \"./SvgSprite\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport DOMPurify, * as DOMPurifyNS from \"dompurify\";\r\n\r\n/** Prototype for an IconSpec which can be a string, ReactNode or ConditionalStringValue.\r\n * @public\r\n */\r\nexport type IconSpec = string | ConditionalStringValue | React.ReactNode;\r\n\r\n/** Properties for the [[Icon]] React component\r\n * @public\r\n */\r\nexport interface IconProps extends CommonProps {\r\n /** CSS class name or SvgSprite/SvgPath for icon. This is optional because it is improperly\r\n * used to extend other interfaces and changing it would break existing API.\r\n */\r\n iconSpec?: IconSpec;\r\n}\r\n\r\n/** Icon Functional component displays an icon based on an [[IconSpec]].\r\n * @public\r\n */\r\nexport function Icon(props: IconProps) {\r\n if (!props.iconSpec)\r\n return null;\r\n\r\n const iconString = (typeof props.iconSpec === \"string\" || props.iconSpec instanceof ConditionalStringValue) ?\r\n ConditionalStringValue.getValue(props.iconSpec) : undefined;\r\n\r\n if (iconString) {\r\n const svgSource = IconSpecUtilities.getSvgSource(iconString);\r\n // if string begins with \"svg:\" then we assume it was imported (into extension source file) using webpack loader svg-sprite-loader\r\n if (svgSource !== undefined)\r\n return (\r\n <i className={classnames(\"icon\", \"core-svg-icon\", props.className)} style={props.style}>\r\n <SvgSprite src={svgSource} />\r\n </i>\r\n );\r\n const webComponentString = IconSpecUtilities.getWebComponentSource(iconString);\r\n if (webComponentString) {\r\n const svgLoader = `<svg-loader src=${webComponentString}></svg-loader>`;\r\n const svgDiv = `<div>${svgLoader}</div>`;\r\n // the esm build of dompurify has a default import but the cjs build does not\r\n // if there is a default export, use it (likely esm), otherwise use the namespace\r\n // istanbul ignore next\r\n const sanitizer = DOMPurify ?? DOMPurifyNS;\r\n const sanitizedIconString = sanitizer.sanitize(svgDiv, { ALLOWED_TAGS: [\"svg-loader\"] });\r\n // we can safely disable jam3/no-sanitizer-with-danger as we are sanitizing above\r\n // eslint-disable-next-line @typescript-eslint/naming-convention, jam3/no-sanitizer-with-danger\r\n const webComponentNode = <div dangerouslySetInnerHTML={{ __html: sanitizedIconString }}></div>;\r\n return (\r\n <i className={classnames(\"icon\", \"core-svg-icon\", props.className)} >\r\n {webComponentNode}\r\n </i>\r\n );\r\n }\r\n return (<i className={classnames(\"icon\", iconString, props.className)} style={props.style} />);\r\n }\r\n\r\n return (\r\n <i className={classnames(\"icon\", \"core-svg-icon\", props.className)} style={props.style}>\r\n {props.iconSpec}\r\n </i>\r\n );\r\n}\r\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconWebComponent.d.ts","sourceRoot":"","sources":["../../../../src/core-react/utils/IconWebComponent.ts"],"names":[],"mappings":"AAMA;;GAEG;AAMH;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,WAAW;YACjC,iBAAiB;YAKjB,OAAO;
|
|
1
|
+
{"version":3,"file":"IconWebComponent.d.ts","sourceRoot":"","sources":["../../../../src/core-react/utils/IconWebComponent.ts"],"names":[],"mappings":"AAMA;;GAEG;AAMH;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,WAAW;YACjC,iBAAiB;YAKjB,OAAO;CAwBtB"}
|
|
@@ -22,6 +22,9 @@ class IconWebComponent extends HTMLElement {
|
|
|
22
22
|
this.dispatchEvent(new CustomEvent("load"));
|
|
23
23
|
}
|
|
24
24
|
async loadSvg() {
|
|
25
|
+
// if svg was already appended don't request it again
|
|
26
|
+
if (this.childNodes.length)
|
|
27
|
+
return;
|
|
25
28
|
await fetch(this.getAttribute("src") || "")
|
|
26
29
|
.catch((_error) => {
|
|
27
30
|
core_bentley_1.Logger.logError(UiCore_1.UiCore.loggerCategory(this), "Unable to load icon.");
|
|
@@ -42,7 +45,7 @@ class IconWebComponent extends HTMLElement {
|
|
|
42
45
|
throw new appui_abstract_1.UiError(UiCore_1.UiCore.loggerCategory(this), "Unable to load icon.");
|
|
43
46
|
}
|
|
44
47
|
})
|
|
45
|
-
.then((data) => this.append(data.documentElement));
|
|
48
|
+
.then((data) => !this.childNodes.length && this.append(data.documentElement));
|
|
46
49
|
}
|
|
47
50
|
}
|
|
48
51
|
exports.IconWebComponent = IconWebComponent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconWebComponent.js","sourceRoot":"","sources":["../../../../src/core-react/utils/IconWebComponent.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F,uBAAuB;AACvB,+CAA+C;AAC/C;;GAEG;;;AAEH,0DAAgD;AAChD,sDAA6C;AAC7C,sCAAmC;AAEnC;;GAEG;AACH,MAAa,gBAAiB,SAAQ,WAAW;IACvC,KAAK,CAAC,iBAAiB;QAC7B,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC;QACrB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9C,CAAC;IAEO,KAAK,CAAC,OAAO;QACnB,MAAM,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;aACxC,KAAK,CAAC,CAAC,MAAM,EAAE,EAAE;YAChB,qBAAM,CAAC,QAAQ,CAAC,eAAM,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,sBAAsB,CAAC,CAAC;QACvE,CAAC,CAAC;aACD,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE;YACvB,IAAI,QAAQ,IAAI,QAAQ,CAAC,EAAE,EAAE;gBAC3B,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAC;aACxB;iBAAM;gBACL,MAAM,IAAI,wBAAO,CAAE,eAAM,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,sBAAsB,CAAC,CAAC;aACzE;QACH,CAAC,CAAC;aACD,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;YACZ,IAAI,GAAG,KAAK,SAAS,EAAE;gBACrB,OAAO,CAAC,IAAI,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;aAClE;iBAAM;gBACL,MAAM,IAAI,wBAAO,CAAE,eAAM,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,sBAAsB,CAAC,CAAC;aACzE;QACH,CAAC,CAAC;aACD,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"IconWebComponent.js","sourceRoot":"","sources":["../../../../src/core-react/utils/IconWebComponent.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F,uBAAuB;AACvB,+CAA+C;AAC/C;;GAEG;;;AAEH,0DAAgD;AAChD,sDAA6C;AAC7C,sCAAmC;AAEnC;;GAEG;AACH,MAAa,gBAAiB,SAAQ,WAAW;IACvC,KAAK,CAAC,iBAAiB;QAC7B,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC;QACrB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9C,CAAC;IAEO,KAAK,CAAC,OAAO;QACnB,qDAAqD;QACrD,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM;YACxB,OAAO;QACT,MAAM,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;aACxC,KAAK,CAAC,CAAC,MAAM,EAAE,EAAE;YAChB,qBAAM,CAAC,QAAQ,CAAC,eAAM,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,sBAAsB,CAAC,CAAC;QACvE,CAAC,CAAC;aACD,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE;YACvB,IAAI,QAAQ,IAAI,QAAQ,CAAC,EAAE,EAAE;gBAC3B,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAC;aACxB;iBAAM;gBACL,MAAM,IAAI,wBAAO,CAAE,eAAM,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,sBAAsB,CAAC,CAAC;aACzE;QACH,CAAC,CAAC;aACD,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;YACZ,IAAI,GAAG,KAAK,SAAS,EAAE;gBACrB,OAAO,CAAC,IAAI,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;aAClE;iBAAM;gBACL,MAAM,IAAI,wBAAO,CAAE,eAAM,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,sBAAsB,CAAC,CAAC;aACzE;QACH,CAAC,CAAC;aACD,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;IAClF,CAAC;CACF;AA9BD,4CA8BC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n// istanbul ignore file\r\n// IconWebComponent requires in-browser testing\r\n/** @packageDocumentation\r\n * @module Utilities\r\n */\r\n\r\nimport { UiError } from \"@itwin/appui-abstract\";\r\nimport { Logger } from \"@itwin/core-bentley\";\r\nimport { UiCore } from \"../UiCore\";\r\n\r\n/**\r\n * IconWebComponent loads icon from an svg path\r\n */\r\nexport class IconWebComponent extends HTMLElement {\r\n private async connectedCallback() {\r\n await this.loadSvg();\r\n this.dispatchEvent(new CustomEvent(\"load\"));\r\n }\r\n\r\n private async loadSvg() {\r\n // if svg was already appended don't request it again\r\n if (this.childNodes.length)\r\n return;\r\n await fetch(this.getAttribute(\"src\") || \"\")\r\n .catch((_error) => {\r\n Logger.logError(UiCore.loggerCategory(this), \"Unable to load icon.\");\r\n })\r\n .then(async (response) => {\r\n if (response && response.ok) {\r\n return response.text();\r\n } else {\r\n throw new UiError (UiCore.loggerCategory(this), \"Unable to load icon.\");\r\n }\r\n })\r\n .then((str) => {\r\n if (str !== undefined) {\r\n return (new window.DOMParser()).parseFromString(str, \"text/xml\");\r\n } else {\r\n throw new UiError (UiCore.loggerCategory(this), \"Unable to load icon.\");\r\n }\r\n })\r\n .then((data) => !this.childNodes.length && this.append(data.documentElement));\r\n }\r\n}\r\n"]}
|
|
@@ -13,104 +13,104 @@
|
|
|
13
13
|
:root {
|
|
14
14
|
|
|
15
15
|
// NEEDSWORK - Need to deprecate these accessory colors
|
|
16
|
-
--buic-accessory-hollow:
|
|
17
|
-
--buic-accessory-primary:
|
|
18
|
-
--buic-accessory-success:
|
|
19
|
-
--buic-accessory-alert:
|
|
20
|
-
--buic-accessory-warning:
|
|
21
|
-
--buic-accessory-primary-tint:
|
|
22
|
-
--buic-accessory-success-tint:
|
|
23
|
-
--buic-accessory-alert-tint:
|
|
24
|
-
--buic-accessory-warning-tint:
|
|
25
|
-
|
|
26
|
-
--buic-background-1-rgb:
|
|
27
|
-
--buic-background-2-rgb:
|
|
28
|
-
--buic-background-3-rgb:
|
|
29
|
-
--buic-background-4-rgb:
|
|
30
|
-
--buic-background-5-rgb:
|
|
31
|
-
|
|
32
|
-
--buic-background-1:
|
|
33
|
-
--buic-background-2:
|
|
34
|
-
--buic-background-3:
|
|
35
|
-
--buic-background-4:
|
|
36
|
-
--buic-background-5:
|
|
37
|
-
--buic-background-primary:
|
|
38
|
-
--buic-background-tooltip:
|
|
39
|
-
--buic-background-scrollbar:
|
|
40
|
-
--buic-background-scrollbar-hover:
|
|
41
|
-
|
|
42
|
-
--buic-foreground-body-rgb:
|
|
43
|
-
--buic-foreground-body:
|
|
44
|
-
--buic-foreground-body-reverse-rgb:
|
|
45
|
-
--buic-foreground-body-reverse:
|
|
46
|
-
--buic-foreground-muted:
|
|
47
|
-
--buic-foreground-disabled:
|
|
48
|
-
--buic-foreground-activehover:
|
|
49
|
-
|
|
50
|
-
--buic-inputs-border:
|
|
51
|
-
--buic-inputs-boxshadow:
|
|
52
|
-
--buic-popup-boxshadow:
|
|
53
|
-
|
|
54
|
-
--buic-foreground-primary:
|
|
55
|
-
--buic-foreground-primary-tone:
|
|
56
|
-
--buic-foreground-focus:
|
|
57
|
-
--buic-foreground-focus-border:
|
|
58
|
-
--buic-focus-boxshadow:
|
|
16
|
+
--buic-accessory-hollow: rgb(255, 255, 255);
|
|
17
|
+
--buic-accessory-primary: rgb(000, 139, 225);
|
|
18
|
+
--buic-accessory-success: rgb(083, 162, 026);
|
|
19
|
+
--buic-accessory-alert: rgb(211, 010, 010);
|
|
20
|
+
--buic-accessory-warning: rgb(241, 139, 018);
|
|
21
|
+
--buic-accessory-primary-tint: rgb(165, 215, 245);
|
|
22
|
+
--buic-accessory-success-tint: rgb(195, 225, 175);
|
|
23
|
+
--buic-accessory-alert-tint: rgb(239, 169, 169);
|
|
24
|
+
--buic-accessory-warning-tint: rgb(249, 215, 171);
|
|
25
|
+
|
|
26
|
+
--buic-background-1-rgb: var(--iui-color-background-1-rgb);
|
|
27
|
+
--buic-background-2-rgb: var(--iui-color-background-2-rgb);
|
|
28
|
+
--buic-background-3-rgb: var(--iui-color-background-3-rgb);
|
|
29
|
+
--buic-background-4-rgb: var(--iui-color-background-4-rgb);
|
|
30
|
+
--buic-background-5-rgb: var(--iui-color-background-5-rgb);
|
|
31
|
+
|
|
32
|
+
--buic-background-1: var(--iui-color-background-1);
|
|
33
|
+
--buic-background-2: var(--iui-color-background-2);
|
|
34
|
+
--buic-background-3: var(--iui-color-background-3);
|
|
35
|
+
--buic-background-4: var(--iui-color-background-4);
|
|
36
|
+
--buic-background-5: var(--iui-color-background-5);
|
|
37
|
+
--buic-background-primary: var(--iui-color-background-primary);
|
|
38
|
+
--buic-background-tooltip: rgba(var(--iui-color-background-5-rgb), 0.90);
|
|
39
|
+
--buic-background-scrollbar: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
|
|
40
|
+
--buic-background-scrollbar-hover: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
|
|
41
|
+
|
|
42
|
+
--buic-foreground-body-rgb: var(--iui-text-color-rgb);
|
|
43
|
+
--buic-foreground-body: var(--iui-text-color);
|
|
44
|
+
--buic-foreground-body-reverse-rgb: var(--iui-color-foreground-body-invert-rgb);
|
|
45
|
+
--buic-foreground-body-reverse: rgba(var(--iui-color-foreground-body-invert-rgb), var(--iui-opacity-2));
|
|
46
|
+
--buic-foreground-muted: var(--iui-text-color-muted);
|
|
47
|
+
--buic-foreground-disabled: var(--iui-text-color-placeholder);
|
|
48
|
+
--buic-foreground-activehover: var(--iui-icons-color-actionable-hover);
|
|
49
|
+
|
|
50
|
+
--buic-inputs-border: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
|
|
51
|
+
--buic-inputs-boxshadow: var(--iui-focus-box-shadow);
|
|
52
|
+
--buic-popup-boxshadow: var(--buic-inputs-boxshadow);
|
|
53
|
+
|
|
54
|
+
--buic-foreground-primary: var(--iui-icons-color-primary);
|
|
55
|
+
--buic-foreground-primary-tone: var(--iui-color-foreground-primary-overlay);
|
|
56
|
+
--buic-foreground-focus: var(--iui-color-foreground-primary-overlay);
|
|
57
|
+
--buic-foreground-focus-border: var(--buic-inputs-border);
|
|
58
|
+
--buic-focus-boxshadow: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
|
|
59
59
|
|
|
60
60
|
// The following two are still in use by DatePicker and there is no itwinui equivalent
|
|
61
61
|
--buic-focus-boxshadow-gradient1: rgba(var(--buic-foreground-primary-tone-rgb), 0);
|
|
62
62
|
--buic-focus-boxshadow-gradient2: rgba(var(--buic-foreground-primary-rgb), 0.65);
|
|
63
63
|
|
|
64
|
-
--buic-foreground-accessory:
|
|
65
|
-
--buic-foreground-success:
|
|
66
|
-
--buic-foreground-positive:
|
|
67
|
-
--buic-foreground-positive-rgb:
|
|
68
|
-
--buic-foreground-alert:
|
|
69
|
-
--buic-foreground-negative:
|
|
70
|
-
--buic-foreground-negative-rgb:
|
|
71
|
-
--buic-foreground-warning:
|
|
72
|
-
--buic-foreground-warning-rgb:
|
|
64
|
+
--buic-foreground-accessory: var(--iui-color-foreground-accessory);
|
|
65
|
+
--buic-foreground-success: var(--iui-color-foreground-positive);
|
|
66
|
+
--buic-foreground-positive: var(--iui-color-foreground-positive);
|
|
67
|
+
--buic-foreground-positive-rgb: var(--iui-color-foreground-positive-rgb);
|
|
68
|
+
--buic-foreground-alert: var(--iui-color-foreground-negative);
|
|
69
|
+
--buic-foreground-negative: var(--iui-color-foreground-negative);
|
|
70
|
+
--buic-foreground-negative-rgb: var(--iui-color-foreground-negative-rgb);
|
|
71
|
+
--buic-foreground-warning: var(--iui-color-foreground-warning);
|
|
72
|
+
--buic-foreground-warning-rgb: var(--iui-color-foreground-warning-rgb);
|
|
73
73
|
|
|
74
|
-
--buic-background-focus-overlay:
|
|
75
|
-
--buic-background-hover-overlay:
|
|
76
|
-
--buic-background-active-overlay:
|
|
77
|
-
--buic-background-pressed-overlay:
|
|
74
|
+
--buic-background-focus-overlay: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
|
|
75
|
+
--buic-background-hover-overlay: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
|
|
76
|
+
--buic-background-active-overlay: rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
|
|
77
|
+
--buic-background-pressed-overlay: rgba(var(--iui-color-foreground-primary-rgb), 0.3);
|
|
78
78
|
|
|
79
|
-
--buic-background-card:
|
|
80
|
-
--buic-background-striped_row:
|
|
79
|
+
--buic-background-card: var(--buic-background-tooltip);
|
|
80
|
+
--buic-background-striped_row: rgba(var(--iui-color-foreground-body-rgb), 0.03);
|
|
81
81
|
|
|
82
82
|
/** background.5 */
|
|
83
|
-
--buic-background-titlebar:
|
|
84
|
-
--buic-background-dialog-stroke:
|
|
85
|
-
--buic-background-widget-stroke:
|
|
86
|
-
--buic-background-control-stroke:
|
|
87
|
-
--buic-background-panel-stroke:
|
|
88
|
-
--buic-background-toolbutton-stroke:
|
|
83
|
+
--buic-background-titlebar: var(--buic-background-5);
|
|
84
|
+
--buic-background-dialog-stroke: var(--buic-background-5);
|
|
85
|
+
--buic-background-widget-stroke: var(--buic-background-5);
|
|
86
|
+
--buic-background-control-stroke: var(--buic-background-5);
|
|
87
|
+
--buic-background-panel-stroke: var(--buic-background-5);
|
|
88
|
+
--buic-background-toolbutton-stroke: var(--buic-background-5);
|
|
89
89
|
|
|
90
90
|
/** background.4 */
|
|
91
|
-
--buic-background-titlebar-outoffocus:
|
|
92
|
-
--buic-background-divider:
|
|
93
|
-
--buic-background-widget-element-stroke:
|
|
94
|
-
--buic-background-statusbar:
|
|
95
|
-
--buic-background-table-header:
|
|
96
|
-
--buic-background-control-stroke-disabled:
|
|
91
|
+
--buic-background-titlebar-outoffocus: var(--buic-background-4);
|
|
92
|
+
--buic-background-divider: var(--buic-background-4);
|
|
93
|
+
--buic-background-widget-element-stroke: var(--buic-background-4);
|
|
94
|
+
--buic-background-statusbar: var(--buic-background-4);
|
|
95
|
+
--buic-background-table-header: var(--buic-background-4);
|
|
96
|
+
--buic-background-control-stroke-disabled: var(--buic-background-4);
|
|
97
97
|
|
|
98
98
|
/** background.3 */
|
|
99
|
-
--buic-background-tab-inactive:
|
|
100
|
-
--buic-background-toolbutton-inactive:
|
|
101
|
-
--buic-background-context-menu:
|
|
102
|
-
--buic-background-panel:
|
|
103
|
-
--buic-background-
|
|
104
|
-
--buic-background-
|
|
105
|
-
--buic-background-control-disabled: var(--buic-background-3);
|
|
99
|
+
--buic-background-tab-inactive: var(--buic-background-3);
|
|
100
|
+
--buic-background-toolbutton-inactive: var(--buic-background-3);
|
|
101
|
+
--buic-background-context-menu: var(--buic-background-3);
|
|
102
|
+
--buic-background-widget-panel: var(--buic-background-3);
|
|
103
|
+
--buic-background-placeholder: var(--buic-background-3);
|
|
104
|
+
--buic-background-control-disabled: var(--buic-background-3);
|
|
106
105
|
|
|
107
106
|
/** background.2 */
|
|
108
|
-
--buic-background-tab-active:
|
|
109
|
-
--buic-background-dialog:
|
|
110
|
-
--buic-background-widget:
|
|
111
|
-
--buic-background-window:
|
|
112
|
-
--buic-background-toolbar:
|
|
107
|
+
--buic-background-tab-active: var(--buic-background-2);
|
|
108
|
+
--buic-background-dialog: var(--buic-background-2);
|
|
109
|
+
--buic-background-widget: var(--buic-background-2);
|
|
110
|
+
--buic-background-window: var(--buic-background-2);
|
|
111
|
+
--buic-background-toolbar: var(--buic-background-2);
|
|
112
|
+
--buic-background-panel: var(--buic-background-2);
|
|
113
113
|
|
|
114
114
|
/** background.1 */
|
|
115
|
-
--buic-background-control:
|
|
115
|
+
--buic-background-control: var(--buic-background-1);
|
|
116
116
|
}
|
|
@@ -28,7 +28,7 @@ export function Icon(props) {
|
|
|
28
28
|
React.createElement(SvgSprite, { src: svgSource })));
|
|
29
29
|
const webComponentString = IconSpecUtilities.getWebComponentSource(iconString);
|
|
30
30
|
if (webComponentString) {
|
|
31
|
-
const svgLoader = `<svg-loader src=${webComponentString}
|
|
31
|
+
const svgLoader = `<svg-loader src=${webComponentString}></svg-loader>`;
|
|
32
32
|
const svgDiv = `<div>${svgLoader}</div>`;
|
|
33
33
|
// the esm build of dompurify has a default import but the cjs build does not
|
|
34
34
|
// if there is a default export, use it (likely esm), otherwise use the namespace
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconComponent.js","sourceRoot":"","sources":["../../../../src/core-react/icons/IconComponent.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAClF,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,SAAS,EAAE,KAAK,WAAW,MAAM,WAAW,CAAC;AAiBpD;;GAEG;AACH,MAAM,UAAU,IAAI,CAAC,KAAgB;IACnC,IAAI,CAAC,KAAK,CAAC,QAAQ;QACjB,OAAO,IAAI,CAAC;IAEd,MAAM,UAAU,GAAG,CAAC,OAAO,KAAK,CAAC,QAAQ,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ,YAAY,sBAAsB,CAAC,CAAC,CAAC;QAC3G,sBAAsB,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9D,IAAI,UAAU,EAAE;QACd,MAAM,SAAS,GAAG,iBAAiB,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QAC7D,kIAAkI;QAClI,IAAI,SAAS,KAAK,SAAS;YACzB,OAAO,CACL,2BAAG,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;gBACpF,oBAAC,SAAS,IAAC,GAAG,EAAE,SAAS,GAAI,CAC3B,CACL,CAAC;QACJ,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC;QAC/E,IAAI,kBAAkB,
|
|
1
|
+
{"version":3,"file":"IconComponent.js","sourceRoot":"","sources":["../../../../src/core-react/icons/IconComponent.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAClF,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,SAAS,EAAE,KAAK,WAAW,MAAM,WAAW,CAAC;AAiBpD;;GAEG;AACH,MAAM,UAAU,IAAI,CAAC,KAAgB;IACnC,IAAI,CAAC,KAAK,CAAC,QAAQ;QACjB,OAAO,IAAI,CAAC;IAEd,MAAM,UAAU,GAAG,CAAC,OAAO,KAAK,CAAC,QAAQ,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ,YAAY,sBAAsB,CAAC,CAAC,CAAC;QAC3G,sBAAsB,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9D,IAAI,UAAU,EAAE;QACd,MAAM,SAAS,GAAG,iBAAiB,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QAC7D,kIAAkI;QAClI,IAAI,SAAS,KAAK,SAAS;YACzB,OAAO,CACL,2BAAG,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;gBACpF,oBAAC,SAAS,IAAC,GAAG,EAAE,SAAS,GAAI,CAC3B,CACL,CAAC;QACJ,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC;QAC/E,IAAI,kBAAkB,EAAE;YACtB,MAAM,SAAS,GAAG,mBAAmB,kBAAkB,gBAAgB,CAAC;YACxE,MAAM,MAAM,GAAG,QAAQ,SAAS,QAAQ,CAAC;YACzC,6EAA6E;YAC7E,iFAAiF;YACjF,uBAAuB;YACvB,MAAM,SAAS,GAAG,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,WAAW,CAAC;YAC3C,MAAM,mBAAmB,GAAG,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,EAAE,YAAY,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;YACzF,iFAAiF;YACjF,+FAA+F;YAC/F,MAAM,gBAAgB,GAAG,6BAAK,uBAAuB,EAAE,EAAE,MAAM,EAAE,mBAAmB,EAAE,GAAQ,CAAC;YAC/F,OAAO,CACL,2BAAG,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,IAC/D,gBAAgB,CACf,CACL,CAAC;SACH;QACD,OAAO,CAAC,2BAAG,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,CAAC,CAAC;KAChG;IAED,OAAO,CACL,2BAAG,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IACnF,KAAK,CAAC,QAAQ,CACb,CACL,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/* eslint-disable deprecation/deprecation */\r\n/** @packageDocumentation\r\n * @module Icon\r\n */\r\n\r\nimport \"./IconComponent.scss\";\r\nimport * as React from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { ConditionalStringValue, IconSpecUtilities } from \"@itwin/appui-abstract\";\r\nimport { SvgSprite } from \"./SvgSprite\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport DOMPurify, * as DOMPurifyNS from \"dompurify\";\r\n\r\n/** Prototype for an IconSpec which can be a string, ReactNode or ConditionalStringValue.\r\n * @public\r\n */\r\nexport type IconSpec = string | ConditionalStringValue | React.ReactNode;\r\n\r\n/** Properties for the [[Icon]] React component\r\n * @public\r\n */\r\nexport interface IconProps extends CommonProps {\r\n /** CSS class name or SvgSprite/SvgPath for icon. This is optional because it is improperly\r\n * used to extend other interfaces and changing it would break existing API.\r\n */\r\n iconSpec?: IconSpec;\r\n}\r\n\r\n/** Icon Functional component displays an icon based on an [[IconSpec]].\r\n * @public\r\n */\r\nexport function Icon(props: IconProps) {\r\n if (!props.iconSpec)\r\n return null;\r\n\r\n const iconString = (typeof props.iconSpec === \"string\" || props.iconSpec instanceof ConditionalStringValue) ?\r\n ConditionalStringValue.getValue(props.iconSpec) : undefined;\r\n\r\n if (iconString) {\r\n const svgSource = IconSpecUtilities.getSvgSource(iconString);\r\n // if string begins with \"svg:\" then we assume it was imported (into extension source file) using webpack loader svg-sprite-loader\r\n if (svgSource !== undefined)\r\n return (\r\n <i className={classnames(\"icon\", \"core-svg-icon\", props.className)} style={props.style}>\r\n <SvgSprite src={svgSource} />\r\n </i>\r\n );\r\n const webComponentString = IconSpecUtilities.getWebComponentSource(iconString);\r\n if (webComponentString) {\r\n const svgLoader = `<svg-loader src=${webComponentString}></svg-loader>`;\r\n const svgDiv = `<div>${svgLoader}</div>`;\r\n // the esm build of dompurify has a default import but the cjs build does not\r\n // if there is a default export, use it (likely esm), otherwise use the namespace\r\n // istanbul ignore next\r\n const sanitizer = DOMPurify ?? DOMPurifyNS;\r\n const sanitizedIconString = sanitizer.sanitize(svgDiv, { ALLOWED_TAGS: [\"svg-loader\"] });\r\n // we can safely disable jam3/no-sanitizer-with-danger as we are sanitizing above\r\n // eslint-disable-next-line @typescript-eslint/naming-convention, jam3/no-sanitizer-with-danger\r\n const webComponentNode = <div dangerouslySetInnerHTML={{ __html: sanitizedIconString }}></div>;\r\n return (\r\n <i className={classnames(\"icon\", \"core-svg-icon\", props.className)} >\r\n {webComponentNode}\r\n </i>\r\n );\r\n }\r\n return (<i className={classnames(\"icon\", iconString, props.className)} style={props.style} />);\r\n }\r\n\r\n return (\r\n <i className={classnames(\"icon\", \"core-svg-icon\", props.className)} style={props.style}>\r\n {props.iconSpec}\r\n </i>\r\n );\r\n}\r\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconWebComponent.d.ts","sourceRoot":"","sources":["../../../../src/core-react/utils/IconWebComponent.ts"],"names":[],"mappings":"AAMA;;GAEG;AAMH;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,WAAW;YACjC,iBAAiB;YAKjB,OAAO;
|
|
1
|
+
{"version":3,"file":"IconWebComponent.d.ts","sourceRoot":"","sources":["../../../../src/core-react/utils/IconWebComponent.ts"],"names":[],"mappings":"AAMA;;GAEG;AAMH;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,WAAW;YACjC,iBAAiB;YAKjB,OAAO;CAwBtB"}
|
|
@@ -19,6 +19,9 @@ export class IconWebComponent extends HTMLElement {
|
|
|
19
19
|
this.dispatchEvent(new CustomEvent("load"));
|
|
20
20
|
}
|
|
21
21
|
async loadSvg() {
|
|
22
|
+
// if svg was already appended don't request it again
|
|
23
|
+
if (this.childNodes.length)
|
|
24
|
+
return;
|
|
22
25
|
await fetch(this.getAttribute("src") || "")
|
|
23
26
|
.catch((_error) => {
|
|
24
27
|
Logger.logError(UiCore.loggerCategory(this), "Unable to load icon.");
|
|
@@ -39,7 +42,7 @@ export class IconWebComponent extends HTMLElement {
|
|
|
39
42
|
throw new UiError(UiCore.loggerCategory(this), "Unable to load icon.");
|
|
40
43
|
}
|
|
41
44
|
})
|
|
42
|
-
.then((data) => this.append(data.documentElement));
|
|
45
|
+
.then((data) => !this.childNodes.length && this.append(data.documentElement));
|
|
43
46
|
}
|
|
44
47
|
}
|
|
45
48
|
//# sourceMappingURL=IconWebComponent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconWebComponent.js","sourceRoot":"","sources":["../../../../src/core-react/utils/IconWebComponent.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,uBAAuB;AACvB,+CAA+C;AAC/C;;GAEG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,WAAW;IACvC,KAAK,CAAC,iBAAiB;QAC7B,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC;QACrB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9C,CAAC;IAEO,KAAK,CAAC,OAAO;QACnB,MAAM,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;aACxC,KAAK,CAAC,CAAC,MAAM,EAAE,EAAE;YAChB,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,sBAAsB,CAAC,CAAC;QACvE,CAAC,CAAC;aACD,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE;YACvB,IAAI,QAAQ,IAAI,QAAQ,CAAC,EAAE,EAAE;gBAC3B,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAC;aACxB;iBAAM;gBACL,MAAM,IAAI,OAAO,CAAE,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,sBAAsB,CAAC,CAAC;aACzE;QACH,CAAC,CAAC;aACD,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;YACZ,IAAI,GAAG,KAAK,SAAS,EAAE;gBACrB,OAAO,CAAC,IAAI,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;aAClE;iBAAM;gBACL,MAAM,IAAI,OAAO,CAAE,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,sBAAsB,CAAC,CAAC;aACzE;QACH,CAAC,CAAC;aACD,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"IconWebComponent.js","sourceRoot":"","sources":["../../../../src/core-react/utils/IconWebComponent.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,uBAAuB;AACvB,+CAA+C;AAC/C;;GAEG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,WAAW;IACvC,KAAK,CAAC,iBAAiB;QAC7B,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC;QACrB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9C,CAAC;IAEO,KAAK,CAAC,OAAO;QACnB,qDAAqD;QACrD,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM;YACxB,OAAO;QACT,MAAM,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;aACxC,KAAK,CAAC,CAAC,MAAM,EAAE,EAAE;YAChB,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,sBAAsB,CAAC,CAAC;QACvE,CAAC,CAAC;aACD,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE;YACvB,IAAI,QAAQ,IAAI,QAAQ,CAAC,EAAE,EAAE;gBAC3B,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAC;aACxB;iBAAM;gBACL,MAAM,IAAI,OAAO,CAAE,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,sBAAsB,CAAC,CAAC;aACzE;QACH,CAAC,CAAC;aACD,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;YACZ,IAAI,GAAG,KAAK,SAAS,EAAE;gBACrB,OAAO,CAAC,IAAI,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;aAClE;iBAAM;gBACL,MAAM,IAAI,OAAO,CAAE,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,sBAAsB,CAAC,CAAC;aACzE;QACH,CAAC,CAAC;aACD,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;IAClF,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n// istanbul ignore file\r\n// IconWebComponent requires in-browser testing\r\n/** @packageDocumentation\r\n * @module Utilities\r\n */\r\n\r\nimport { UiError } from \"@itwin/appui-abstract\";\r\nimport { Logger } from \"@itwin/core-bentley\";\r\nimport { UiCore } from \"../UiCore\";\r\n\r\n/**\r\n * IconWebComponent loads icon from an svg path\r\n */\r\nexport class IconWebComponent extends HTMLElement {\r\n private async connectedCallback() {\r\n await this.loadSvg();\r\n this.dispatchEvent(new CustomEvent(\"load\"));\r\n }\r\n\r\n private async loadSvg() {\r\n // if svg was already appended don't request it again\r\n if (this.childNodes.length)\r\n return;\r\n await fetch(this.getAttribute(\"src\") || \"\")\r\n .catch((_error) => {\r\n Logger.logError(UiCore.loggerCategory(this), \"Unable to load icon.\");\r\n })\r\n .then(async (response) => {\r\n if (response && response.ok) {\r\n return response.text();\r\n } else {\r\n throw new UiError (UiCore.loggerCategory(this), \"Unable to load icon.\");\r\n }\r\n })\r\n .then((str) => {\r\n if (str !== undefined) {\r\n return (new window.DOMParser()).parseFromString(str, \"text/xml\");\r\n } else {\r\n throw new UiError (UiCore.loggerCategory(this), \"Unable to load icon.\");\r\n }\r\n })\r\n .then((data) => !this.childNodes.length && this.append(data.documentElement));\r\n }\r\n}\r\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itwin/core-react",
|
|
3
|
-
"version": "3.3.0-dev.
|
|
3
|
+
"version": "3.3.0-dev.13",
|
|
4
4
|
"description": "iTwin.js UI core components",
|
|
5
5
|
"main": "lib/cjs/core-react.js",
|
|
6
6
|
"module": "lib/esm/core-react.js",
|
|
@@ -22,8 +22,8 @@
|
|
|
22
22
|
"url": "http://www.bentley.com"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
|
-
"@itwin/appui-abstract": "^3.3.0-dev.
|
|
26
|
-
"@itwin/core-bentley": "^3.3.0-dev.
|
|
25
|
+
"@itwin/appui-abstract": "^3.3.0-dev.13",
|
|
26
|
+
"@itwin/core-bentley": "^3.3.0-dev.13",
|
|
27
27
|
"react": "^17.0.0",
|
|
28
28
|
"react-dom": "^17.0.0"
|
|
29
29
|
},
|
|
@@ -32,12 +32,12 @@
|
|
|
32
32
|
"NOTE: All tools used by scripts in this package must be listed as devDependencies"
|
|
33
33
|
],
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@itwin/appui-abstract": "3.3.0-dev.
|
|
36
|
-
"@itwin/build-tools": "3.3.0-dev.
|
|
37
|
-
"@itwin/core-bentley": "3.3.0-dev.
|
|
38
|
-
"@itwin/core-common": "3.3.0-dev.
|
|
39
|
-
"@itwin/core-i18n": "3.3.0-dev.
|
|
40
|
-
"@itwin/eslint-plugin": "3.3.0-dev.
|
|
35
|
+
"@itwin/appui-abstract": "3.3.0-dev.13",
|
|
36
|
+
"@itwin/build-tools": "3.3.0-dev.13",
|
|
37
|
+
"@itwin/core-bentley": "3.3.0-dev.13",
|
|
38
|
+
"@itwin/core-common": "3.3.0-dev.13",
|
|
39
|
+
"@itwin/core-i18n": "3.3.0-dev.13",
|
|
40
|
+
"@itwin/eslint-plugin": "3.3.0-dev.13",
|
|
41
41
|
"@testing-library/dom": "^8.11.2",
|
|
42
42
|
"@testing-library/react": "^12.0.0",
|
|
43
43
|
"@testing-library/react-hooks": "^7.0.2",
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"ignore-styles": "^5.0.1",
|
|
70
70
|
"jsdom": "^19.0.0",
|
|
71
71
|
"jsdom-global": "3.0.2",
|
|
72
|
-
"mocha": "^
|
|
72
|
+
"mocha": "^10.0.0",
|
|
73
73
|
"nyc": "^15.1.0",
|
|
74
74
|
"raf": "^3.4.0",
|
|
75
75
|
"react": "^17.0.0",
|