@redvars/peacock 3.6.0 → 3.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (105) hide show
  1. package/dist/assets/styles.css +1 -1
  2. package/dist/assets/styles.css.map +1 -1
  3. package/dist/assets/tokens.css +1 -1
  4. package/dist/assets/tokens.css.map +1 -1
  5. package/dist/{button-colors-Ccys3hvS.js → button-colors-AvGh22Zn.js} +18 -18
  6. package/dist/{button-colors-Ccys3hvS.js.map → button-colors-AvGh22Zn.js.map} +1 -1
  7. package/dist/button-group.js +2 -2
  8. package/dist/button.js +2 -3
  9. package/dist/button.js.map +1 -1
  10. package/dist/card.js +1 -1
  11. package/dist/card.js.map +1 -1
  12. package/dist/code-highlighter.js +34 -9
  13. package/dist/code-highlighter.js.map +1 -1
  14. package/dist/custom-elements-jsdocs.json +4973 -3553
  15. package/dist/custom-elements.json +7899 -6346
  16. package/dist/{flow-designer-node-XMe-jlKg.js → flow-designer-node-BWrPuxAR.js} +2 -2
  17. package/dist/flow-designer-node-BWrPuxAR.js.map +1 -0
  18. package/dist/flow-designer-node.js +1 -1
  19. package/dist/flow-designer.js +1402 -8
  20. package/dist/flow-designer.js.map +1 -1
  21. package/dist/html-editor.js +27245 -87
  22. package/dist/html-editor.js.map +1 -1
  23. package/dist/icon-CueRR7wx.js +260 -0
  24. package/dist/icon-CueRR7wx.js.map +1 -0
  25. package/dist/{icon-button-CK1ZuE-2.js → icon-button-ohxHhy4t.js} +2 -2
  26. package/dist/{icon-button-CK1ZuE-2.js.map → icon-button-ohxHhy4t.js.map} +1 -1
  27. package/dist/index.js +10 -9
  28. package/dist/index.js.map +1 -1
  29. package/dist/modal.js +12 -18
  30. package/dist/modal.js.map +1 -1
  31. package/dist/{navigation-rail-DyO0oAZU.js → navigation-rail-CD7IrqbN.js} +952 -279
  32. package/dist/navigation-rail-CD7IrqbN.js.map +1 -0
  33. package/dist/peacock-loader.js +39 -30
  34. package/dist/peacock-loader.js.map +1 -1
  35. package/dist/{popover-NC7b1lTq.js → popover-DUPmMVWS.js} +9 -4
  36. package/dist/{popover-NC7b1lTq.js.map → popover-DUPmMVWS.js.map} +1 -1
  37. package/dist/popover.js +1 -1
  38. package/dist/src/__controllers/floating-controller.d.ts +1 -0
  39. package/dist/src/avatar/avatar.d.ts +1 -1
  40. package/dist/src/breadcrumb/breadcrumb/breadcrumb.d.ts +0 -1
  41. package/dist/src/chip/chip/chip.d.ts +14 -11
  42. package/dist/src/chip/chip-set/chip-set.d.ts +20 -0
  43. package/dist/src/chip/chip-set/index.d.ts +1 -0
  44. package/dist/src/code-highlighter/code-highlighter.d.ts +4 -0
  45. package/dist/src/html-editor/html-editor.d.ts +44 -11
  46. package/dist/src/index.d.ts +3 -0
  47. package/dist/src/list/index.d.ts +2 -0
  48. package/dist/src/list/list-item.d.ts +35 -0
  49. package/dist/src/list/list.d.ts +28 -0
  50. package/dist/src/menu/menu/menu.d.ts +1 -0
  51. package/dist/src/modal/modal.d.ts +2 -8
  52. package/dist/src/navigation-rail/navigation-rail.d.ts +3 -7
  53. package/dist/src/number-field/number-field.d.ts +2 -2
  54. package/dist/src/svg/index.d.ts +1 -0
  55. package/dist/src/svg/svg.d.ts +38 -0
  56. package/dist/src/toolbar/toolbar.d.ts +3 -3
  57. package/dist/test/chip.test.d.ts +1 -0
  58. package/dist/toolbar.js +3 -3
  59. package/dist/toolbar.js.map +1 -1
  60. package/dist/tsconfig.tsbuildinfo +1 -1
  61. package/package.json +7 -1
  62. package/readme.md +3 -3
  63. package/scss/styles.scss +3 -3
  64. package/scss/tokens.css +1 -1
  65. package/src/__controllers/floating-controller.ts +9 -3
  66. package/src/avatar/avatar.scss +4 -4
  67. package/src/avatar/avatar.ts +1 -1
  68. package/src/breadcrumb/breadcrumb/breadcrumb.ts +0 -1
  69. package/src/button/button/button.scss +17 -17
  70. package/src/button/button/button.ts +1 -2
  71. package/src/card/card.ts +1 -1
  72. package/src/chip/chip/chip.scss +119 -45
  73. package/src/chip/chip/chip.ts +97 -38
  74. package/src/chip/chip-set/chip-set.scss +13 -0
  75. package/src/chip/chip-set/chip-set.ts +25 -0
  76. package/src/chip/chip-set/index.ts +1 -0
  77. package/src/code-highlighter/code-highlighter.ts +33 -6
  78. package/src/field/field.scss +1 -1
  79. package/src/flow-designer/flow-designer-node.ts +1 -1
  80. package/src/html-editor/html-editor.scss +44 -2
  81. package/src/html-editor/html-editor.ts +309 -94
  82. package/src/index.ts +3 -1
  83. package/src/list/index.ts +2 -0
  84. package/src/list/list-item.scss +111 -0
  85. package/src/list/list-item.ts +175 -0
  86. package/src/list/list.scss +24 -0
  87. package/src/list/list.ts +51 -0
  88. package/src/menu/menu/menu.ts +11 -0
  89. package/src/modal/modal.scss +10 -10
  90. package/src/modal/modal.ts +2 -8
  91. package/src/navigation-rail/navigation-rail-item.scss +7 -38
  92. package/src/navigation-rail/navigation-rail-item.ts +1 -2
  93. package/src/navigation-rail/navigation-rail.scss +17 -21
  94. package/src/navigation-rail/navigation-rail.ts +6 -9
  95. package/src/number-field/number-field.ts +2 -2
  96. package/src/peacock-loader.ts +36 -22
  97. package/src/svg/index.ts +1 -0
  98. package/src/svg/svg.scss +91 -0
  99. package/src/svg/svg.ts +160 -0
  100. package/src/toolbar/toolbar.ts +3 -3
  101. package/dist/flow-designer-dZnLJOQT.js +0 -1656
  102. package/dist/flow-designer-dZnLJOQT.js.map +0 -1
  103. package/dist/flow-designer-node-XMe-jlKg.js.map +0 -1
  104. package/dist/navigation-rail-DyO0oAZU.js.map +0 -1
  105. package/src/chip/chip/chip-colors.scss +0 -31
@@ -0,0 +1,260 @@
1
+ import { a as i, _ as __decorate, i as i$1, b } from './IndividualComponent-DUINtMGK.js';
2
+ import { n } from './property-1psGvXOq.js';
3
+ import { r } from './state-DwbEjqVk.js';
4
+ import { e } from './directive-ZPhl09Yt.js';
5
+ import { e as e$1 } from './unsafe-html-BsGUjx94.js';
6
+
7
+ /**
8
+ * @license
9
+ * Copyright 2017 Google LLC
10
+ * SPDX-License-Identifier: BSD-3-Clause
11
+ */class t extends e$1{}t.directiveName="unsafeSVG",t.resultType=2;const o=e(t);
12
+
13
+ // Basic sanitization: remove <script>, <foreignObject>, event handler attributes (on*), and iframes
14
+ function sanitizeSvg(rawSvg) {
15
+ try {
16
+ const parser = new DOMParser();
17
+ const doc = parser.parseFromString(rawSvg, 'image/svg+xml');
18
+ const scripts = Array.from(doc.querySelectorAll('script'));
19
+ scripts.forEach(n => n.remove());
20
+ const foreigns = Array.from(doc.querySelectorAll('foreignObject, iframe'));
21
+ foreigns.forEach(n => n.remove());
22
+ const all = Array.from(doc.querySelectorAll('*'));
23
+ all.forEach(el => {
24
+ const attrs = Array.from(el.attributes).filter(a => /^on/i.test(a.name));
25
+ attrs.forEach(a => el.removeAttribute(a.name));
26
+ });
27
+ const el = doc.documentElement;
28
+ if (!el)
29
+ return '';
30
+ const serializer = new XMLSerializer();
31
+ return serializer.serializeToString(el);
32
+ }
33
+ catch (e) {
34
+ return '';
35
+ }
36
+ }
37
+
38
+ async function createCacheFetch(name) {
39
+ let cache = null;
40
+ // This map tracks requests currently being processed
41
+ const inFlightRequests = new Map();
42
+ try {
43
+ cache = await window.caches.open(name);
44
+ }
45
+ catch (e) {
46
+ console.warn('window.caches access not allowed');
47
+ }
48
+ return async (url) => {
49
+ if (inFlightRequests.has(url)) {
50
+ return inFlightRequests.get(url);
51
+ }
52
+ const fetchPromise = (async () => {
53
+ const request = new Request(url);
54
+ if (cache) {
55
+ const cachedResponse = await cache.match(request);
56
+ if (cachedResponse) {
57
+ return cachedResponse.text();
58
+ }
59
+ }
60
+ const urlObj = new URL(request.url);
61
+ const isSameOrigin = urlObj.origin === window.location.origin;
62
+ const response = await fetch(request.url, {
63
+ method: 'GET',
64
+ mode: isSameOrigin ? 'no-cors' : 'cors',
65
+ credentials: isSameOrigin ? 'same-origin' : 'omit',
66
+ });
67
+ if (response.status === 404) {
68
+ console.error(`[Fetch Error] Resource not found (404): ${url}`);
69
+ return '';
70
+ }
71
+ const result = await response.text();
72
+ if (cache && response.status === 200) {
73
+ await cache.put(request, new Response(result, {
74
+ status: response.status,
75
+ statusText: response.statusText,
76
+ headers: response.headers,
77
+ }));
78
+ }
79
+ return result;
80
+ })();
81
+ inFlightRequests.set(url, fetchPromise);
82
+ try {
83
+ return await fetchPromise;
84
+ }
85
+ finally {
86
+ inFlightRequests.delete(url);
87
+ }
88
+ };
89
+ }
90
+
91
+ const PROVIDERS = {
92
+ 'material-symbols': (name) => `https://cdn.jsdelivr.net/npm/@material-symbols/svg-500@0.40.1/outlined/${name}.svg`,
93
+ carbon: (name) => `https://cdn.jsdelivr.net/npm/@carbon/icons@11.41.0/svg/32/${name}.svg`,
94
+ };
95
+ const cacheFetch = await createCacheFetch('svg-cache');
96
+ async function fetchSVG(url) {
97
+ if (!url)
98
+ return '';
99
+ return cacheFetch(url);
100
+ }
101
+ async function fetchIcon(name, provider = 'material-symbols') {
102
+ if (!name)
103
+ return '';
104
+ if (!PROVIDERS[provider]) {
105
+ throw new Error(`Provider '${provider}' not found`);
106
+ }
107
+ return fetchSVG(PROVIDERS[provider](name));
108
+ }
109
+
110
+ var css_248z = i`* {
111
+ box-sizing: border-box;
112
+ }
113
+
114
+ .screen-reader-only {
115
+ display: none !important;
116
+ }
117
+
118
+ :host {
119
+ display: inline-flex;
120
+ vertical-align: middle;
121
+ --icon-size: inherit;
122
+ --icon-color: inherit;
123
+ }
124
+
125
+ .icon {
126
+ height: var(--icon-size, 1rem);
127
+ width: var(--icon-size, 1rem);
128
+ display: inline-flex;
129
+ align-items: center;
130
+ justify-content: center;
131
+ }
132
+ .icon svg {
133
+ fill: var(--icon-color);
134
+ height: 100%;
135
+ width: 100%;
136
+ }`;
137
+
138
+ /**
139
+ * @label Icon
140
+ * @tag wc-icon
141
+ * @rawTag icon
142
+ * @summary Icons are visual symbols used to represent ideas, objects, or actions.
143
+ * @overview Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.
144
+ *
145
+ * @cssprop --icon-color - Controls the color of the icon.
146
+ * @cssprop [--icon-size=1rem] - Controls the size of the icon. Defaults to "1rem"
147
+ *
148
+ * @example
149
+ * ```html
150
+ * <wc-icon name="home" style="--icon-size: 2rem;"></wc-icon>
151
+ * ```
152
+ *
153
+ */
154
+ class Icon extends i$1 {
155
+ constructor() {
156
+ super(...arguments);
157
+ this.provider = 'material-symbols';
158
+ this.svgContent = '';
159
+ // loading + error states for consumers/tests
160
+ this.loading = false;
161
+ this.error = null;
162
+ // token to avoid race conditions when multiple fetches overlap
163
+ this._fetchId = 0;
164
+ }
165
+ firstUpdated() {
166
+ // perform initial fetch once component is connected and rendered
167
+ this.__scheduleUpdate();
168
+ }
169
+ updated(changedProperties) {
170
+ // only refetch when name or src changed
171
+ if (changedProperties.has('name') || changedProperties.has('src')) {
172
+ this.__scheduleUpdate();
173
+ }
174
+ }
175
+ render() {
176
+ // accessible wrapper; consumers can provide a fallback via <slot name="fallback">.
177
+ return b ` <div class="icon">
178
+ ${this.svgContent
179
+ ? o(this.svgContent)
180
+ : b `<slot name="fallback"></slot>`}
181
+ </div>`;
182
+ }
183
+ // small debounce to coalesce rapid changes (50ms)
184
+ __scheduleUpdate() {
185
+ if (this._debounceTimer) {
186
+ clearTimeout(this._debounceTimer);
187
+ }
188
+ // @ts-ignore - setTimeout in DOM returns number
189
+ this._debounceTimer = window.setTimeout(() => this.__updateSvg(), 50);
190
+ }
191
+ /**
192
+ * @internal
193
+ */
194
+ async __updateSvg() {
195
+ this._fetchId += 1;
196
+ const currentId = this._fetchId;
197
+ this.loading = true;
198
+ this.error = null;
199
+ try {
200
+ let raw;
201
+ if (this.name) {
202
+ raw = await fetchIcon(this.name, this.provider);
203
+ }
204
+ else if (this.src) {
205
+ raw = await fetchSVG(this.src);
206
+ }
207
+ else {
208
+ raw = '';
209
+ }
210
+ // If another fetch started after this one, ignore this result
211
+ if (currentId !== this._fetchId)
212
+ return;
213
+ if (raw) {
214
+ this.svgContent = sanitizeSvg(raw);
215
+ }
216
+ else {
217
+ this.svgContent = '';
218
+ }
219
+ }
220
+ catch (err) {
221
+ // capture and surface error, but avoid throwing
222
+ this.error = err instanceof Error ? err : new Error(String(err));
223
+ this.svgContent = '';
224
+ // bubble an event so consumers can react
225
+ this.dispatchEvent(new CustomEvent('icon-error', {
226
+ detail: { name: this.name, src: this.src, error: this.error },
227
+ bubbles: true,
228
+ composed: true,
229
+ }));
230
+ }
231
+ finally {
232
+ // ensure loading is cleared unless another fetch started
233
+ if (currentId === this._fetchId) {
234
+ this.loading = false;
235
+ }
236
+ }
237
+ }
238
+ }
239
+ Icon.styles = [css_248z];
240
+ __decorate([
241
+ n({ type: String, reflect: true })
242
+ ], Icon.prototype, "name", void 0);
243
+ __decorate([
244
+ n({ type: String, reflect: true })
245
+ ], Icon.prototype, "src", void 0);
246
+ __decorate([
247
+ n({ type: String })
248
+ ], Icon.prototype, "provider", void 0);
249
+ __decorate([
250
+ r()
251
+ ], Icon.prototype, "svgContent", void 0);
252
+ __decorate([
253
+ r() // @ts-ignore
254
+ ], Icon.prototype, "loading", void 0);
255
+ __decorate([
256
+ r()
257
+ ], Icon.prototype, "error", void 0);
258
+
259
+ export { Icon as I, fetchSVG as f, o, sanitizeSvg as s };
260
+ //# sourceMappingURL=icon-CueRR7wx.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icon-CueRR7wx.js","sources":["../node_modules/lit-html/directives/unsafe-svg.js","../../src/__utils/sanitize-svg.ts","../../src/__utils/cache-fetch.ts","../../src/icon/datasource.ts","../../src/icon/icon.ts"],"sourcesContent":["import{directive as s}from\"../directive.js\";import{UnsafeHTMLDirective as e}from\"./unsafe-html.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class t extends e{}t.directiveName=\"unsafeSVG\",t.resultType=2;const o=s(t);export{o as unsafeSVG};\n//# sourceMappingURL=unsafe-svg.js.map\n","// Basic sanitization: remove <script>, <foreignObject>, event handler attributes (on*), and iframes\nexport function sanitizeSvg(rawSvg: string) {\n try {\n const parser = new DOMParser();\n const doc = parser.parseFromString(rawSvg, 'image/svg+xml');\n\n const scripts = Array.from(doc.querySelectorAll('script'));\n scripts.forEach(n => n.remove());\n\n const foreigns = Array.from(doc.querySelectorAll('foreignObject, iframe'));\n foreigns.forEach(n => n.remove());\n\n const all = Array.from(doc.querySelectorAll('*'));\n all.forEach(el => {\n const attrs = Array.from(el.attributes).filter(a => /^on/i.test(a.name));\n attrs.forEach(a => el.removeAttribute(a.name));\n });\n\n const el = doc.documentElement;\n if (!el) return '';\n\n const serializer = new XMLSerializer();\n return serializer.serializeToString(el);\n } catch (e) {\n return '';\n }\n}","export async function createCacheFetch(name: string) {\n let cache: Cache | null = null;\n // This map tracks requests currently being processed\n const inFlightRequests = new Map<string, Promise<string>>();\n\n try {\n cache = await window.caches.open(name);\n } catch (e) {\n console.warn('window.caches access not allowed');\n }\n\n return async (url: string): Promise<string> => {\n if (inFlightRequests.has(url)) {\n return inFlightRequests.get(url)!;\n }\n\n const fetchPromise = (async () => {\n const request = new Request(url);\n\n if (cache) {\n const cachedResponse = await cache.match(request);\n if (cachedResponse) {\n return cachedResponse.text();\n }\n }\n\n const urlObj = new URL(request.url);\n const isSameOrigin = urlObj.origin === window.location.origin;\n\n const response = await fetch(request.url, {\n method: 'GET',\n mode: isSameOrigin ? 'no-cors' : 'cors',\n credentials: isSameOrigin ? 'same-origin' : 'omit',\n });\n\n if (response.status === 404) {\n console.error(`[Fetch Error] Resource not found (404): ${url}`);\n return '';\n }\n\n const result = await response.text();\n\n if (cache && response.status === 200) {\n await cache.put(\n request,\n new Response(result, {\n status: response.status,\n statusText: response.statusText,\n headers: response.headers,\n }),\n );\n }\n\n return result;\n })();\n\n inFlightRequests.set(url, fetchPromise);\n\n try {\n return await fetchPromise;\n } finally {\n inFlightRequests.delete(url);\n }\n };\n}","import { createCacheFetch } from '@/__utils/cache-fetch.js';\n\nconst PROVIDERS: Record<string, (name: string) => string> = {\n 'material-symbols': (name: string) =>\n `https://cdn.jsdelivr.net/npm/@material-symbols/svg-500@0.40.1/outlined/${name}.svg`,\n carbon: (name: string) =>\n `https://cdn.jsdelivr.net/npm/@carbon/icons@11.41.0/svg/32/${name}.svg`,\n};\n\nconst cacheFetch = await createCacheFetch('svg-cache');\n\nexport async function fetchSVG(url: string) {\n if (!url) return '';\n return cacheFetch(url);\n}\n\nexport async function fetchIcon(\n name: string,\n provider: string = 'material-symbols',\n) {\n if (!name) return '';\n\n if (!PROVIDERS[provider]) {\n throw new Error(`Provider '${provider}' not found`);\n }\n\n return fetchSVG(PROVIDERS[provider](name));\n}\n","import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\n\nimport { sanitizeSvg } from '@/__utils/sanitize-svg.js';\n\nimport { fetchIcon, fetchSVG } from './datasource.js';\nimport styles from './icon.scss';\n\nexport type IconProvider = 'material-symbols' | 'material-icons';\n/**\n * @label Icon\n * @tag wc-icon\n * @rawTag icon\n * @summary Icons are visual symbols used to represent ideas, objects, or actions.\n * @overview Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.\n *\n * @cssprop --icon-color - Controls the color of the icon.\n * @cssprop [--icon-size=1rem] - Controls the size of the icon. Defaults to \"1rem\"\n *\n * @example\n * ```html\n * <wc-icon name=\"home\" style=\"--icon-size: 2rem;\"></wc-icon>\n * ```\n *\n */\nexport class Icon extends LitElement {\n static styles = [styles];\n\n /**\n * The identifier for the icon.\n * This name corresponds to a specific SVG asset in the icon set.\n */\n @property({ type: String, reflect: true }) name?: string;\n\n @property({ type: String, reflect: true }) src?: string;\n\n @property({ type: String }) provider: IconProvider = 'material-symbols';\n\n @state()\n private svgContent: string = '';\n\n // loading + error states for consumers/tests\n @state() // @ts-ignore\n private loading: boolean = false;\n\n @state()\n private error: Error | null = null;\n\n // token to avoid race conditions when multiple fetches overlap\n private _fetchId = 0;\n\n // optional debounce for rapid property changes\n private _debounceTimer: number | undefined;\n\n firstUpdated() {\n // perform initial fetch once component is connected and rendered\n this.__scheduleUpdate();\n }\n\n updated(changedProperties: any) {\n // only refetch when name or src changed\n if (changedProperties.has('name') || changedProperties.has('src')) {\n this.__scheduleUpdate();\n }\n }\n\n render() {\n // accessible wrapper; consumers can provide a fallback via <slot name=\"fallback\">.\n return html` <div class=\"icon\">\n ${this.svgContent\n ? unsafeSVG(this.svgContent)\n : html`<slot name=\"fallback\"></slot>`}\n </div>`;\n }\n\n // small debounce to coalesce rapid changes (50ms)\n private __scheduleUpdate() {\n if (this._debounceTimer) {\n clearTimeout(this._debounceTimer as any);\n }\n // @ts-ignore - setTimeout in DOM returns number\n this._debounceTimer = window.setTimeout(() => this.__updateSvg(), 50);\n }\n\n /**\n * @internal\n */\n private async __updateSvg() {\n this._fetchId += 1;\n const currentId = this._fetchId;\n this.loading = true;\n this.error = null;\n\n try {\n let raw: string | undefined;\n\n if (this.name) {\n raw = await fetchIcon(this.name, this.provider);\n } else if (this.src) {\n raw = await fetchSVG(this.src);\n } else {\n raw = '';\n }\n\n // If another fetch started after this one, ignore this result\n if (currentId !== this._fetchId) return;\n\n if (raw) {\n this.svgContent = sanitizeSvg(raw);\n } else {\n this.svgContent = '';\n }\n } catch (err: any) {\n // capture and surface error, but avoid throwing\n this.error = err instanceof Error ? err : new Error(String(err));\n this.svgContent = '';\n // bubble an event so consumers can react\n this.dispatchEvent(\n new CustomEvent('icon-error', {\n detail: { name: this.name, src: this.src, error: this.error },\n bubbles: true,\n composed: true,\n }),\n );\n } finally {\n // ensure loading is cleared unless another fetch started\n if (currentId === this._fetchId) {\n this.loading = false;\n }\n }\n }\n}\n"],"names":["e","s","LitElement","html","unsafeSVG","styles","property","state"],"mappings":"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","x_google_ignoreList":[0]}
@@ -2,7 +2,7 @@ import { a as i, _ as __decorate, b } from './IndividualComponent-DUINtMGK.js';
2
2
  import { n } from './property-1psGvXOq.js';
3
3
  import { e } from './class-map-YU7g0o3B.js';
4
4
  import { B as BaseButton, o, s as spread } from './BaseButton-BNFAYn-S.js';
5
- import { c as css_248z$1, a as css_248z$2 } from './button-colors-Ccys3hvS.js';
5
+ import { c as css_248z$1, a as css_248z$2 } from './button-colors-AvGh22Zn.js';
6
6
  import { t as throttle } from './BaseHyperlinkMixin-BNuwbiEf.js';
7
7
 
8
8
  var css_248z = i`.button {
@@ -244,4 +244,4 @@ __decorate([
244
244
  ], IconButton.prototype, "configAria", void 0);
245
245
 
246
246
  export { IconButton as I };
247
- //# sourceMappingURL=icon-button-CK1ZuE-2.js.map
247
+ //# sourceMappingURL=icon-button-ohxHhy4t.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"icon-button-CK1ZuE-2.js","sources":["../../src/button/icon-button/icon-button.ts"],"sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport styles from '../button/button.scss';\nimport colorStyles from '../button/button-colors.scss';\nimport sizeStyles from './icon-button-sizes.scss';\nimport { spread } from '@/__directive/spread.js';\nimport { throttle } from '@/__utils/throttle.js';\nimport { BaseButton } from '../BaseButton.js';\n\n/**\n * @label Icon Button\n * @tag wc-icon-button\n * @rawTag icon-button\n *\n * @summary Icon buttons allow users to take actions, and make choices, with a single tap.\n *\n * @overview\n * <p>Icon buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. IconButton labels express what action will occur when the user interacts with it.</p>\n *\n * @cssprop --button-container-shape: Defines the border radius of the button container shape.\n *\n * @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.\n * @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.\n *\n *\n * @cssprop --filled-button-container-color: Color of the filled button container.\n * @cssprop --filled-button-label-text-color: Text color of the filled button label.\n *\n * @cssprop --outlined-button-container-color: Color of the outlined button container.\n * @cssprop --outlined-button-label-text-color: Text color of the outlined button label.\n *\n * @cssprop --text-button-label-text-color: Text color of the text button label.\n *\n * @cssprop --tonal-button-container-color: Color of the tonal button container.\n * @cssprop --tonal-button-label-text-color: Text color of the tonal button label.\n *\n * @cssprop --elevated-button-container-color: Color of the elevated button container.\n * @cssprop --elevated-button-label-text-color: Text color of the elevated button label.\n *\n * @cssprop --neo-button-container-color: Color of the neo button container.\n * @cssprop --neo-button-label-text-color: Text color of the neo button label.\n *\n * @fires {CustomEvent} button:click - Dispatched when the button is clicked.\n *\n * @example\n * ```html\n * <wc-icon-button><wc-icon name=\"home\"></wc-icon></wc-icon-button>\n * ```\n * @tags display\n */\nexport class IconButton extends BaseButton {\n static override styles = [styles, colorStyles, sizeStyles];\n\n /**\n * Button size.\n * Possible values are `\"xs\"`, `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`. Defaults to `\"sm\"`.\n */\n @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n /**\n * Type is preset of color and variant. Type will be only applied.\n *\n */\n @property({ type: String }) type?: 'primary' | 'secondary' | 'tertiary';\n \n /**\n * The visual style of the button.\n *\n * Possible variant values:\n * `\"filled\"` is a filled button.\n * `\"outlined\"` is an outlined button.\n * `\"text\"` is a transparent button.\n * `\"tonal\"` is a light color button.\n * `\"elevated\"` is elevated button\n */\n @property() variant:\n | 'elevated'\n | 'filled'\n | 'tonal'\n | 'outlined'\n | 'text'\n | 'neo' = 'filled';\n \n /**\n * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.\n */\n @property({ reflect: true }) color:\n | 'primary'\n | 'success'\n | 'danger'\n | 'warning'\n | 'surface'\n | 'on-surface' = 'primary';\n\n /**\n * Additional ARIA attributes to pass to the inner button/anchor element.\n */\n @property({ reflect: true })\n configAria?: { [key: string]: any };\n\n override focus() {\n this.buttonElement?.focus();\n }\n\n override blur() {\n this.buttonElement?.blur();\n }\n \n override firstUpdated() {\n this.__dispatchClickWithThrottle = throttle(\n this.__dispatchClick,\n this.throttleDelay,\n );\n this.__convertTypeToVariantAndColor();\n }\n\n __convertTypeToVariantAndColor() {\n if (this.type === 'primary') {\n this.color = 'primary';\n this.variant = 'filled';\n } else if (this.type === 'secondary') {\n this.color = 'surface';\n this.variant = 'filled';\n } else if (this.type === 'tertiary') {\n this.color = 'primary';\n this.variant = 'text';\n } else if (this.type === 'danger') {\n this.color = 'danger';\n this.variant = 'filled';\n }\n }\n\n override render() {\n const isLink = this.__isLink();\n\n const cssClasses = {\n button: true,\n 'button-element': true,\n [`size-${this.size}`]: true,\n [`variant-${this.variant}`]: true,\n [`color-${this.color}`]: true,\n disabled: this.disabled || this.softDisabled,\n pressed: this.isPressed,\n skeleton: this.skeleton,\n };\n\n if (!isLink) {\n return html`<button\n class=${classMap(cssClasses)}\n id=\"button\"\n type=${this.htmlType}\n @click=${this.__dispatchClickWithThrottle}\n @mousedown=${this.__handlePress}\n @keydown=${this.__handlePress}\n @keyup=${this.__handlePress}\n \n aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}\n ?aria-disabled=${this.softDisabled}\n\n ?disabled=${this.disabled}\n ${spread(this.configAria)}\n >\n ${this.renderButtonContent()}\n </button>\n ${this.__renderTooltip()}`;\n }\n return html`<a\n class=${classMap(cssClasses)}\n id=\"button\"\n href=${this.href}\n target=${this.target}\n tabindex=${this.disabled ? '-1' : '0'}\n @click=${this.__dispatchClick}\n @mousedown=${this.__handlePress}\n @keydown=${this.__handlePress}\n @keyup=${this.__handlePress}\n role=\"button\"\n \n aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}\n ?aria-disabled=${this.softDisabled}\n\n ${spread(this.configAria)}\n >\n ${this.renderButtonContent()}\n </a>\n ${this.__renderTooltip()}`;\n }\n\n renderButtonContent() {\n return html`\n <wc-focus-ring class=\"focus-ring\" for='button'></wc-focus-ring>\n <wc-elevation class=\"elevation\"></wc-elevation>\n <div class=\"neo-background\"></div>\n <div class=\"background\"></div>\n <div class=\"outline\"></div>\n <wc-ripple class=\"ripple\"></wc-ripple>\n <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n <div class=\"button-content\">\n <slot></slot>\n </div>\n\n ${this.__renderDisabledReason(this.softDisabled)}\n `;\n }\n}\n"],"names":["html","classMap","ifDefined","styles","colorStyles","sizeStyles","property"],"mappings":"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"}
1
+ {"version":3,"file":"icon-button-ohxHhy4t.js","sources":["../../src/button/icon-button/icon-button.ts"],"sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport styles from '../button/button.scss';\nimport colorStyles from '../button/button-colors.scss';\nimport sizeStyles from './icon-button-sizes.scss';\nimport { spread } from '@/__directive/spread.js';\nimport { throttle } from '@/__utils/throttle.js';\nimport { BaseButton } from '../BaseButton.js';\n\n/**\n * @label Icon Button\n * @tag wc-icon-button\n * @rawTag icon-button\n *\n * @summary Icon buttons allow users to take actions, and make choices, with a single tap.\n *\n * @overview\n * <p>Icon buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. IconButton labels express what action will occur when the user interacts with it.</p>\n *\n * @cssprop --button-container-shape: Defines the border radius of the button container shape.\n *\n * @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.\n * @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.\n *\n *\n * @cssprop --filled-button-container-color: Color of the filled button container.\n * @cssprop --filled-button-label-text-color: Text color of the filled button label.\n *\n * @cssprop --outlined-button-container-color: Color of the outlined button container.\n * @cssprop --outlined-button-label-text-color: Text color of the outlined button label.\n *\n * @cssprop --text-button-label-text-color: Text color of the text button label.\n *\n * @cssprop --tonal-button-container-color: Color of the tonal button container.\n * @cssprop --tonal-button-label-text-color: Text color of the tonal button label.\n *\n * @cssprop --elevated-button-container-color: Color of the elevated button container.\n * @cssprop --elevated-button-label-text-color: Text color of the elevated button label.\n *\n * @cssprop --neo-button-container-color: Color of the neo button container.\n * @cssprop --neo-button-label-text-color: Text color of the neo button label.\n *\n * @fires {CustomEvent} button:click - Dispatched when the button is clicked.\n *\n * @example\n * ```html\n * <wc-icon-button><wc-icon name=\"home\"></wc-icon></wc-icon-button>\n * ```\n * @tags display\n */\nexport class IconButton extends BaseButton {\n static override styles = [styles, colorStyles, sizeStyles];\n\n /**\n * Button size.\n * Possible values are `\"xs\"`, `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`. Defaults to `\"sm\"`.\n */\n @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n /**\n * Type is preset of color and variant. Type will be only applied.\n *\n */\n @property({ type: String }) type?: 'primary' | 'secondary' | 'tertiary';\n \n /**\n * The visual style of the button.\n *\n * Possible variant values:\n * `\"filled\"` is a filled button.\n * `\"outlined\"` is an outlined button.\n * `\"text\"` is a transparent button.\n * `\"tonal\"` is a light color button.\n * `\"elevated\"` is elevated button\n */\n @property() variant:\n | 'elevated'\n | 'filled'\n | 'tonal'\n | 'outlined'\n | 'text'\n | 'neo' = 'filled';\n \n /**\n * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.\n */\n @property({ reflect: true }) color:\n | 'primary'\n | 'success'\n | 'danger'\n | 'warning'\n | 'surface'\n | 'on-surface' = 'primary';\n\n /**\n * Additional ARIA attributes to pass to the inner button/anchor element.\n */\n @property({ reflect: true })\n configAria?: { [key: string]: any };\n\n override focus() {\n this.buttonElement?.focus();\n }\n\n override blur() {\n this.buttonElement?.blur();\n }\n \n override firstUpdated() {\n this.__dispatchClickWithThrottle = throttle(\n this.__dispatchClick,\n this.throttleDelay,\n );\n this.__convertTypeToVariantAndColor();\n }\n\n __convertTypeToVariantAndColor() {\n if (this.type === 'primary') {\n this.color = 'primary';\n this.variant = 'filled';\n } else if (this.type === 'secondary') {\n this.color = 'surface';\n this.variant = 'filled';\n } else if (this.type === 'tertiary') {\n this.color = 'primary';\n this.variant = 'text';\n } else if (this.type === 'danger') {\n this.color = 'danger';\n this.variant = 'filled';\n }\n }\n\n override render() {\n const isLink = this.__isLink();\n\n const cssClasses = {\n button: true,\n 'button-element': true,\n [`size-${this.size}`]: true,\n [`variant-${this.variant}`]: true,\n [`color-${this.color}`]: true,\n disabled: this.disabled || this.softDisabled,\n pressed: this.isPressed,\n skeleton: this.skeleton,\n };\n\n if (!isLink) {\n return html`<button\n class=${classMap(cssClasses)}\n id=\"button\"\n type=${this.htmlType}\n @click=${this.__dispatchClickWithThrottle}\n @mousedown=${this.__handlePress}\n @keydown=${this.__handlePress}\n @keyup=${this.__handlePress}\n \n aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}\n ?aria-disabled=${this.softDisabled}\n\n ?disabled=${this.disabled}\n ${spread(this.configAria)}\n >\n ${this.renderButtonContent()}\n </button>\n ${this.__renderTooltip()}`;\n }\n return html`<a\n class=${classMap(cssClasses)}\n id=\"button\"\n href=${this.href}\n target=${this.target}\n tabindex=${this.disabled ? '-1' : '0'}\n @click=${this.__dispatchClick}\n @mousedown=${this.__handlePress}\n @keydown=${this.__handlePress}\n @keyup=${this.__handlePress}\n role=\"button\"\n \n aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}\n ?aria-disabled=${this.softDisabled}\n\n ${spread(this.configAria)}\n >\n ${this.renderButtonContent()}\n </a>\n ${this.__renderTooltip()}`;\n }\n\n renderButtonContent() {\n return html`\n <wc-focus-ring class=\"focus-ring\" for='button'></wc-focus-ring>\n <wc-elevation class=\"elevation\"></wc-elevation>\n <div class=\"neo-background\"></div>\n <div class=\"background\"></div>\n <div class=\"outline\"></div>\n <wc-ripple class=\"ripple\"></wc-ripple>\n <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n <div class=\"button-content\">\n <slot></slot>\n </div>\n\n ${this.__renderDisabledReason(this.softDisabled)}\n `;\n }\n}\n"],"names":["html","classMap","ifDefined","styles","colorStyles","sizeStyles","property"],"mappings":"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"}
package/dist/index.js CHANGED
@@ -1,14 +1,14 @@
1
- export { F as FlowDesigner, I as Icon } from './flow-designer-dZnLJOQT.js';
2
- export { A as Accordion, a as Avatar, B as Badge, b as Breadcrumb, c as BreadcrumbItem, C as Checkbox, d as Chip, e as CircularProgress, f as Container, D as DatePicker, g as Divider, E as Elevation, h as EmptyState, F as Field, i as FocusRing, I as Image, j as Input, L as LinearProgress, k as Link, M as Menu, l as MenuItem, N as NavigationRail, m as NavigationRailItem, n as NumberField, P as Pagination, R as Radio, o as Ripple, S as SegmentedButton, p as SegmentedButtonGroup, q as Select, r as SelectOptionElement, s as SidebarMenu, t as SidebarMenuItem, u as SidebarSubMenu, v as Skeleton, w as Slider, x as Snackbar, y as Spinner, z as SubMenu, G as Switch, T as Tab, H as TabGroup, J as TabPanel, K as Table, O as Tabs, Q as Tag, U as Textarea, V as TimePicker, W as Tooltip, X as UrlField } from './navigation-rail-DyO0oAZU.js';
1
+ export { I as Icon } from './icon-CueRR7wx.js';
2
+ export { A as Accordion, a as Avatar, B as Badge, b as Breadcrumb, c as BreadcrumbItem, C as Checkbox, d as Chip, e as ChipSet, f as CircularProgress, g as Container, D as DatePicker, h as Divider, E as Elevation, i as EmptyState, F as Field, j as FocusRing, I as Image, k as Input, L as LinearProgress, l as Link, m as List, n as ListItem, M as Menu, o as MenuItem, N as NavigationRail, p as NavigationRailItem, q as NumberField, P as Pagination, R as Radio, r as Ripple, S as SegmentedButton, s as SegmentedButtonGroup, t as Select, u as SelectOptionElement, v as SidebarMenu, w as SidebarMenuItem, x as SidebarSubMenu, y as Skeleton, z as Slider, G as Snackbar, H as Spinner, J as SubMenu, K as Svg, O as Switch, T as Tab, Q as TabGroup, U as TabPanel, V as Table, W as Tabs, X as Tag, Y as Textarea, Z as TimePicker, _ as Tooltip, $ as UrlField } from './navigation-rail-CD7IrqbN.js';
3
3
  export { Clock } from './clock.js';
4
4
  export { Button } from './button.js';
5
5
  export { ButtonGroup } from './button-group.js';
6
- export { I as IconButton } from './icon-button-CK1ZuE-2.js';
6
+ export { I as IconButton } from './icon-button-ohxHhy4t.js';
7
7
  export { Fab } from './fab.js';
8
8
  export { SplitButton } from './split-button.js';
9
9
  export { DropdownButton } from './dropdown-button.js';
10
10
  export { NumberCounter } from './number-counter.js';
11
- export { P as Popover } from './popover-NC7b1lTq.js';
11
+ export { P as Popover } from './popover-DUPmMVWS.js';
12
12
  export { PopoverContent } from './popover-content.js';
13
13
  export { CodeHighlighter } from './code-highlighter.js';
14
14
  export { default as CodeEditor } from './code-editor.js';
@@ -31,7 +31,8 @@ export { Calendar } from './calendar.js';
31
31
  export { CalendarColumnView } from './calendar-column-view.js';
32
32
  export { CalendarMonthView } from './calendar-month-view.js';
33
33
  export { Canvas } from './canvas.js';
34
- export { F as FlowDesignerNode } from './flow-designer-node-XMe-jlKg.js';
34
+ export { FlowDesigner } from './flow-designer.js';
35
+ export { F as FlowDesignerNode } from './flow-designer-node-BWrPuxAR.js';
35
36
  export { ConditionBuilder } from './condition-builder.js';
36
37
  export { CbPredicate } from './cb-predicate.js';
37
38
  export { CbCompoundExpression } from './cb-compound-expression.js';
@@ -40,18 +41,18 @@ export { CbDivider } from './cb-divider.js';
40
41
  import './IndividualComponent-DUINtMGK.js';
41
42
  import './property-1psGvXOq.js';
42
43
  import './state-DwbEjqVk.js';
43
- import './query-QBcUV-L_.js';
44
44
  import './directive-ZPhl09Yt.js';
45
45
  import './unsafe-html-BsGUjx94.js';
46
46
  import './class-map-YU7g0o3B.js';
47
47
  import './observe-slot-change-BGJfgg2E.js';
48
+ import './query-QBcUV-L_.js';
48
49
  import './BaseHyperlinkMixin-BNuwbiEf.js';
49
- import './style-map-DVmWOuYy.js';
50
- import './dispatch-event-utils-CuEqjlPT.js';
51
50
  import './BaseButton-BNFAYn-S.js';
51
+ import './dispatch-event-utils-CuEqjlPT.js';
52
+ import './style-map-DVmWOuYy.js';
52
53
  import './BaseInput-14YmcfK7.js';
53
54
  import './is-dark-mode-DOcaw4Yq.js';
54
- import './button-colors-Ccys3hvS.js';
55
+ import './button-colors-AvGh22Zn.js';
55
56
  import './transform-DSwFSqzD.js';
56
57
  import './pie-Dz0IDiPt.js';
57
58
  import './array-D5vjT2Xm.js';
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/modal.js CHANGED
@@ -15,19 +15,19 @@ var css_248z = i`@charset "UTF-8";
15
15
 
16
16
  :host {
17
17
  display: contents;
18
- --modal-container-color: var(--color-surface-container-high, #ece6f0);
19
- --modal-scrim-color: rgba(0, 0, 0, 0.32);
20
- --modal-shape: var(--shape-corner-extra-large, 28px);
18
+ --modal-container-color: var(--color-surface-container-high);
19
+ --modal-scrim-color: color-mix(in srgb, var(--color-scrim), transparent 32%);
20
+ --modal-shape: var(--shape-corner-extra-large);
21
21
  --modal-min-width: 280px;
22
22
  --modal-max-width: 560px;
23
23
  --modal-max-height: 90dvh;
24
- --modal-transition-duration: var(--duration-medium2, 300ms);
25
- --modal-transition-easing: var(--easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
26
- --modal-heading-color: var(--color-on-surface, #1c1b1f);
27
- --modal-subheading-color: var(--color-on-surface-variant, #49454f);
28
- --modal-content-color: var(--color-on-surface-variant, #49454f);
29
- --modal-divider-color: var(--color-outline-variant, #cac4d0);
30
- --modal-elevation: var(--elevation-level3, 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3));
24
+ --modal-transition-duration: var(--duration-medium2);
25
+ --modal-transition-easing: var(--easing-emphasized);
26
+ --modal-heading-color: var(--color-on-surface);
27
+ --modal-subheading-color: var(--color-on-surface-variant);
28
+ --modal-content-color: var(--color-on-surface-variant);
29
+ --modal-divider-color: var(--color-outline-variant);
30
+ --modal-elevation: var(--elevation-level3);
31
31
  }
32
32
 
33
33
  /* Scrim backdrop */
@@ -215,7 +215,7 @@ var css_248z = i`@charset "UTF-8";
215
215
  /**
216
216
  * @label Modal
217
217
  * @tag wc-modal
218
- * @rawTag modal-wc
218
+ * @rawTag modal
219
219
  * @summary A Material Design 3 dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.
220
220
  *
221
221
  * @cssprop --modal-container-color - Background color of the dialog container.
@@ -227,13 +227,7 @@ var css_248z = i`@charset "UTF-8";
227
227
  *
228
228
  * @example
229
229
  * ```html
230
- * <wc-modal open heading="Confirm Action">
231
- * <p>Are you sure you want to continue?</p>
232
- * <div slot="footer">
233
- * <wc-button variant="text">Cancel</wc-button>
234
- * <wc-button>Confirm</wc-button>
235
- * </div>
236
- * </wc-modal>
230
+ * MODAL
237
231
  * ```
238
232
  * @tags overlay, dialog, feedback
239
233
  */
package/dist/modal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"modal.js","sources":["../../src/modal/modal.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '../IndividualComponent.js';\nimport styles from './modal.scss';\n\ntype ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'fullscreen';\n\n/**\n * @label Modal\n * @tag wc-modal\n * @rawTag modal-wc\n * @summary A Material Design 3 dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.\n *\n * @cssprop --modal-container-color - Background color of the dialog container.\n * @cssprop --modal-scrim-color - Color of the scrim backdrop.\n * @cssprop --modal-shape - Corner radius of the dialog container.\n * @cssprop --modal-min-width - Minimum width of the dialog.\n * @cssprop --modal-max-width - Maximum width of the dialog.\n * @cssprop --modal-max-height - Maximum height of the dialog.\n *\n * @example\n * ```html\n * <wc-modal open heading=\"Confirm Action\">\n * <p>Are you sure you want to continue?</p>\n * <div slot=\"footer\">\n * <wc-button variant=\"text\">Cancel</wc-button>\n * <wc-button>Confirm</wc-button>\n * </div>\n * </wc-modal>\n * ```\n * @tags overlay, dialog, feedback\n */\n@IndividualComponent\nexport class Modal extends LitElement {\n static styles = [styles];\n\n /** Whether the modal is open. */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /** Heading text shown in the modal header. */\n @property({ type: String, reflect: true }) heading = '';\n\n /** Optional subheading / label text shown above the heading. */\n @property({ type: String, reflect: true }) subheading = '';\n\n /**\n * Size of the modal dialog.\n * - `\"xs\"`: Extra-small.\n * - `\"sm\"`: Small.\n * - `\"md\"`: Medium (default).\n * - `\"lg\"`: Large.\n * - `\"fullscreen\"`: Full-screen dialog.\n */\n @property({ type: String, reflect: true }) size: ModalSize = 'md';\n\n /** When true, hides the close button in the header. */\n @property({ type: Boolean, reflect: true, attribute: 'hide-close' })\n hideClose = false;\n\n /** When true, renders a loading overlay inside the modal. */\n @property({ type: Boolean, reflect: true, attribute: 'show-loader' })\n showLoader = false;\n\n /** When true, clicking the scrim will not close the modal. */\n @property({ type: Boolean, attribute: 'no-scrim-close' }) noScrimClose = false;\n\n @state() private _visible = false;\n\n show() {\n this.open = true;\n }\n\n hide() {\n this._close('programmatic');\n }\n\n private _close(reason: string) {\n if (!this.open) return;\n this.open = false;\n this.dispatchEvent(\n new CustomEvent('modal-close', {\n detail: { reason },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _handleScrimClick() {\n if (!this.noScrimClose) {\n this._close('scrim');\n }\n }\n\n private _handleCloseClick() {\n this._close('close-button');\n }\n\n private readonly _handleKeydown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n this._close('escape');\n }\n };\n\n protected updated(changedProperties: Map<string, unknown>) {\n if (changedProperties.has('open')) {\n if (this.open) {\n this._visible = true;\n document.body.style.overflow = 'hidden';\n document.addEventListener('keydown', this._handleKeydown);\n } else {\n document.body.style.overflow = '';\n document.removeEventListener('keydown', this._handleKeydown);\n }\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.body.style.overflow = '';\n document.removeEventListener('keydown', this._handleKeydown);\n }\n\n private _handleAnimationEnd(e: AnimationEvent) {\n if (e.animationName === 'modal-exit') {\n this._visible = false;\n }\n }\n\n render() {\n if (!this.open && !this._visible) return nothing;\n\n const hasHeader = this.heading || this.subheading || !this.hideClose;\n\n return html`\n <div\n class=${classMap({ scrim: true, visible: this.open })}\n @click=${this._handleScrimClick}\n aria-hidden=\"true\"\n ></div>\n\n <div class=\"dialog-wrapper\" role=\"presentation\">\n <div\n class=${classMap({\n dialog: true,\n open: this.open,\n [`size-${this.size}`]: true,\n 'show-loader': this.showLoader,\n })}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=${this.heading ? 'modal-heading' : nothing}\n @animationend=${this._handleAnimationEnd}\n >\n ${hasHeader\n ? html`\n <div class=\"dialog-header\">\n <div class=\"dialog-heading-section\">\n ${this.subheading\n ? html`<p class=\"dialog-subheading\">${this.subheading}</p>`\n : nothing}\n ${this.heading\n ? html`<h2 id=\"modal-heading\" class=\"dialog-heading\">\n ${this.heading}\n </h2>`\n : nothing}\n </div>\n ${!this.hideClose\n ? html`<wc-icon-button\n class=\"dialog-close\"\n variant=\"text\"\n aria-label=\"Close dialog\"\n @click=${this._handleCloseClick}\n >\n <wc-icon name=\"close\"></wc-icon>\n </wc-icon-button>`\n : nothing}\n </div>\n `\n : nothing}\n\n <div class=\"dialog-content\">\n <slot></slot>\n </div>\n\n <div class=\"dialog-footer\">\n <slot name=\"footer\"></slot>\n </div>\n\n ${this.showLoader\n ? html`<div class=\"dialog-loader\" aria-hidden=\"true\">\n <div class=\"dialog-loader-scrim\"></div>\n <wc-spinner></wc-spinner>\n </div>`\n : nothing}\n </div>\n </div>\n `;\n }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property","state"],"mappings":"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"}
1
+ {"version":3,"file":"modal.js","sources":["../../src/modal/modal.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '../IndividualComponent.js';\nimport styles from './modal.scss';\n\ntype ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'fullscreen';\n\n/**\n * @label Modal\n * @tag wc-modal\n * @rawTag modal\n * @summary A Material Design 3 dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.\n *\n * @cssprop --modal-container-color - Background color of the dialog container.\n * @cssprop --modal-scrim-color - Color of the scrim backdrop.\n * @cssprop --modal-shape - Corner radius of the dialog container.\n * @cssprop --modal-min-width - Minimum width of the dialog.\n * @cssprop --modal-max-width - Maximum width of the dialog.\n * @cssprop --modal-max-height - Maximum height of the dialog.\n *\n * @example\n * ```html\n * MODAL\n * ```\n * @tags overlay, dialog, feedback\n */\n@IndividualComponent\nexport class Modal extends LitElement {\n static styles = [styles];\n\n /** Whether the modal is open. */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /** Heading text shown in the modal header. */\n @property({ type: String, reflect: true }) heading = '';\n\n /** Optional subheading / label text shown above the heading. */\n @property({ type: String, reflect: true }) subheading = '';\n\n /**\n * Size of the modal dialog.\n * - `\"xs\"`: Extra-small.\n * - `\"sm\"`: Small.\n * - `\"md\"`: Medium (default).\n * - `\"lg\"`: Large.\n * - `\"fullscreen\"`: Full-screen dialog.\n */\n @property({ type: String, reflect: true }) size: ModalSize = 'md';\n\n /** When true, hides the close button in the header. */\n @property({ type: Boolean, reflect: true, attribute: 'hide-close' })\n hideClose = false;\n\n /** When true, renders a loading overlay inside the modal. */\n @property({ type: Boolean, reflect: true, attribute: 'show-loader' })\n showLoader = false;\n\n /** When true, clicking the scrim will not close the modal. */\n @property({ type: Boolean, attribute: 'no-scrim-close' }) noScrimClose = false;\n\n @state() private _visible = false;\n\n show() {\n this.open = true;\n }\n\n hide() {\n this._close('programmatic');\n }\n\n private _close(reason: string) {\n if (!this.open) return;\n this.open = false;\n this.dispatchEvent(\n new CustomEvent('modal-close', {\n detail: { reason },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _handleScrimClick() {\n if (!this.noScrimClose) {\n this._close('scrim');\n }\n }\n\n private _handleCloseClick() {\n this._close('close-button');\n }\n\n private readonly _handleKeydown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n this._close('escape');\n }\n };\n\n protected updated(changedProperties: Map<string, unknown>) {\n if (changedProperties.has('open')) {\n if (this.open) {\n this._visible = true;\n document.body.style.overflow = 'hidden';\n document.addEventListener('keydown', this._handleKeydown);\n } else {\n document.body.style.overflow = '';\n document.removeEventListener('keydown', this._handleKeydown);\n }\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.body.style.overflow = '';\n document.removeEventListener('keydown', this._handleKeydown);\n }\n\n private _handleAnimationEnd(e: AnimationEvent) {\n if (e.animationName === 'modal-exit') {\n this._visible = false;\n }\n }\n\n render() {\n if (!this.open && !this._visible) return nothing;\n\n const hasHeader = this.heading || this.subheading || !this.hideClose;\n\n return html`\n <div\n class=${classMap({ scrim: true, visible: this.open })}\n @click=${this._handleScrimClick}\n aria-hidden=\"true\"\n ></div>\n\n <div class=\"dialog-wrapper\" role=\"presentation\">\n <div\n class=${classMap({\n dialog: true,\n open: this.open,\n [`size-${this.size}`]: true,\n 'show-loader': this.showLoader,\n })}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=${this.heading ? 'modal-heading' : nothing}\n @animationend=${this._handleAnimationEnd}\n >\n ${hasHeader\n ? html`\n <div class=\"dialog-header\">\n <div class=\"dialog-heading-section\">\n ${this.subheading\n ? html`<p class=\"dialog-subheading\">${this.subheading}</p>`\n : nothing}\n ${this.heading\n ? html`<h2 id=\"modal-heading\" class=\"dialog-heading\">\n ${this.heading}\n </h2>`\n : nothing}\n </div>\n ${!this.hideClose\n ? html`<wc-icon-button\n class=\"dialog-close\"\n variant=\"text\"\n aria-label=\"Close dialog\"\n @click=${this._handleCloseClick}\n >\n <wc-icon name=\"close\"></wc-icon>\n </wc-icon-button>`\n : nothing}\n </div>\n `\n : nothing}\n\n <div class=\"dialog-content\">\n <slot></slot>\n </div>\n\n <div class=\"dialog-footer\">\n <slot name=\"footer\"></slot>\n </div>\n\n ${this.showLoader\n ? html`<div class=\"dialog-loader\" aria-hidden=\"true\">\n <div class=\"dialog-loader-scrim\"></div>\n <wc-spinner></wc-spinner>\n </div>`\n : nothing}\n </div>\n </div>\n `;\n }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property","state"],"mappings":"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"}