@muziehdesign/components 19.2.8-beta.2559 → 19.2.8-beta.2575
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/assets/icondefinitions.html +11 -1
- package/assets/icondefinitions.svg +1 -1
- package/assets/icons/pencil-outline.svg +1 -0
- package/assets/icons/x-outline.svg +1 -0
- package/fesm2022/muziehdesign-components.mjs +252 -8
- package/fesm2022/muziehdesign-components.mjs.map +1 -1
- package/lib/button/button-appearance.d.ts +1 -0
- package/lib/button/button.component.d.ts +12 -0
- package/lib/dialog/dialog-appearance.d.ts +1 -0
- package/lib/dialog/dialog-config.d.ts +42 -0
- package/lib/dialog/dialog-container/dialog-container.component.d.ts +17 -0
- package/lib/dialog/dialog-content/dialog-content.component.d.ts +5 -0
- package/lib/dialog/dialog-footer/dialog-footer.component.d.ts +5 -0
- package/lib/dialog/dialog-header/dialog-header.component.d.ts +7 -0
- package/lib/dialog/dialog.d.ts +36 -0
- package/lib/dialog/dialog.module.d.ts +13 -0
- package/lib/dialog/message-dialog/message-dialog-data.d.ts +8 -0
- package/lib/dialog/message-dialog/message-dialog.component.d.ts +12 -0
- package/lib/drawer/drawer-config.d.ts +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +9 -0
- package/styles/design/_cdk-overlay.scss +86 -1
- package/styles/design/_dialog.scss +7 -5
- package/styles/design/_utilities.scss +2 -1
- package/styles/mixins/_dialog.scss +5 -15
- package/styles/mixins/_utilities.scss +20 -24
- package/styles/theme.scss +41 -1
- package/styles/design/_modal.scss +0 -287
|
@@ -121,6 +121,7 @@ They might well be outsourced to an external stylesheet of course.
|
|
|
121
121
|
.svg-menu-outline-dims { width: 24px; height: 24px; }
|
|
122
122
|
.svg-pencil-solid-dims { width: 24px; height: 24px; }
|
|
123
123
|
.svg-x-circle-solid-dims { width: 24px; height: 24px; }
|
|
124
|
+
.svg-x-outline-dims { width: 24px; height: 24px; }
|
|
124
125
|
</style>
|
|
125
126
|
|
|
126
127
|
<!--
|
|
@@ -158,6 +159,7 @@ for further details on how to create this embeddable sprite variant.
|
|
|
158
159
|
<symbol fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" id="menu-outline" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/></symbol>
|
|
159
160
|
<symbol viewBox="0 0 24 24" fill="currentColor" id="pencil-solid" xmlns="http://www.w3.org/2000/svg"><path d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712Zm-2.218 5.93-3.712-3.712-8.4 8.4a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32l8.4-8.4Z"/><path d="M5.25 5.25a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3V13.5a.75.75 0 0 0-1.5 0v5.25a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5V8.25a1.5 1.5 0 0 1 1.5-1.5h5.25a.75.75 0 0 0 0-1.5H5.25Z"/></symbol>
|
|
160
161
|
<symbol viewBox="0 0 24 24" fill="currentColor" id="x-circle-solid" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z" clip-rule="evenodd"/></symbol>
|
|
162
|
+
<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="x-outline" xmlns="http://www.w3.org/2000/svg"><path d="M18 6 6 18M6 6l12 12"/></symbol>
|
|
161
163
|
</svg>
|
|
162
164
|
|
|
163
165
|
<!--
|
|
@@ -312,6 +314,14 @@ embedded above. They may be styled via CSS.
|
|
|
312
314
|
</div>
|
|
313
315
|
<h2>x-circle-solid, </h2>
|
|
314
316
|
</li>
|
|
317
|
+
<li title="x-outline">
|
|
318
|
+
<div class="icon-box">
|
|
319
|
+
<svg class="svg-x-outline-dims">
|
|
320
|
+
<use xlink:href="#x-outline"></use>
|
|
321
|
+
</svg>
|
|
322
|
+
</div>
|
|
323
|
+
<h2>x-outline, </h2>
|
|
324
|
+
</li>
|
|
315
325
|
</ul>
|
|
316
326
|
|
|
317
327
|
<!--
|
|
@@ -337,7 +347,7 @@ SVG sprite. They may be styled via CSS.
|
|
|
337
347
|
|
|
338
348
|
</section>
|
|
339
349
|
<footer>
|
|
340
|
-
<p>Generated at
|
|
350
|
+
<p>Generated at Tue, 16 Sep 2025 17:38:46 GMT by <a href="https://github.com/svg-sprite/svg-sprite" target="_blank" rel="noopener noreferrer">svg-sprite</a>.</p>
|
|
341
351
|
</footer>
|
|
342
352
|
</body>
|
|
343
353
|
</html>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg width="0" height="0" style="position:absolute"><symbol viewBox="0 0 20 20" fill="currentColor" id="arrow-long-down-mini" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 2a.75.75 0 0 1 .75.75v12.59l1.95-2.1a.75.75 0 1 1 1.1 1.02l-3.25 3.5a.75.75 0 0 1-1.1 0l-3.25-3.5a.75.75 0 1 1 1.1-1.02l1.95 2.1V2.75A.75.75 0 0 1 10 2Z" clip-rule="evenodd"/></symbol><symbol viewBox="0 0 20 20" fill="currentColor" id="arrow-long-up-mini" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a.75.75 0 0 1-.75-.75V4.66L7.3 6.76a.75.75 0 0 1-1.1-1.02l3.25-3.5a.75.75 0 0 1 1.1 0l3.25 3.5a.75.75 0 1 1-1.1 1.02l-1.95-2.1v12.59A.75.75 0 0 1 10 18Z" clip-rule="evenodd"/></symbol><symbol fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" id="at-symbol-outline" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 1 0-2.636 6.364M16.5 12V8.25"/></symbol><symbol viewBox="0 0 24 24" fill="currentColor" id="check-circle-solid" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd"/></symbol><symbol viewBox="0 0 24 24" fill="currentColor" id="check-solid" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"/></symbol><symbol fill="currentColor" viewBox="0 0 20 20" id="chevron-down-control" xmlns="http://www.w3.org/2000/svg"><path d="M5.21 7.355a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0l-4.25-4.25a.75.75 0 0 1 0-1.06z"/></symbol><symbol fill="currentColor" viewBox="0 0 24 24" id="chevron-down-solid" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06z" clip-rule="evenodd"/></symbol><symbol viewBox="0 0 24 24" fill="currentColor" id="chevron-left-solid" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z" clip-rule="evenodd"/></symbol><symbol viewBox="0 0 24 24" fill="currentColor" id="chevron-right-solid" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z" clip-rule="evenodd"/></symbol><symbol fill="currentColor" viewBox="0 0 24 24" id="chevron-up-solid" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.47 7.72a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 1 1-1.06 1.06L12 9.31l-6.97 6.97a.75.75 0 0 1-1.06-1.06z" clip-rule="evenodd"/></symbol><symbol fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" id="dots-horizontal-outline" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm7 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm7 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></symbol><symbol viewBox="0 0 24 24" fill="currentColor" id="exclamation-triangle-solid" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd"/></symbol><symbol viewBox="0 0 24 24" fill="currentColor" id="information-circle-solid" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd"/></symbol><symbol fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" id="menu-outline" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/></symbol><symbol viewBox="0 0 24 24" fill="currentColor" id="pencil-solid" xmlns="http://www.w3.org/2000/svg"><path d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712Zm-2.218 5.93-3.712-3.712-8.4 8.4a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32l8.4-8.4Z"/><path d="M5.25 5.25a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3V13.5a.75.75 0 0 0-1.5 0v5.25a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5V8.25a1.5 1.5 0 0 1 1.5-1.5h5.25a.75.75 0 0 0 0-1.5H5.25Z"/></symbol><symbol viewBox="0 0 24 24" fill="currentColor" id="x-circle-solid" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z" clip-rule="evenodd"/></symbol></svg>
|
|
1
|
+
<svg width="0" height="0" style="position:absolute"><symbol viewBox="0 0 20 20" fill="currentColor" id="arrow-long-down-mini" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 2a.75.75 0 0 1 .75.75v12.59l1.95-2.1a.75.75 0 1 1 1.1 1.02l-3.25 3.5a.75.75 0 0 1-1.1 0l-3.25-3.5a.75.75 0 1 1 1.1-1.02l1.95 2.1V2.75A.75.75 0 0 1 10 2Z" clip-rule="evenodd"/></symbol><symbol viewBox="0 0 20 20" fill="currentColor" id="arrow-long-up-mini" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a.75.75 0 0 1-.75-.75V4.66L7.3 6.76a.75.75 0 0 1-1.1-1.02l3.25-3.5a.75.75 0 0 1 1.1 0l3.25 3.5a.75.75 0 1 1-1.1 1.02l-1.95-2.1v12.59A.75.75 0 0 1 10 18Z" clip-rule="evenodd"/></symbol><symbol fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" id="at-symbol-outline" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 1 0-2.636 6.364M16.5 12V8.25"/></symbol><symbol viewBox="0 0 24 24" fill="currentColor" id="check-circle-solid" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd"/></symbol><symbol viewBox="0 0 24 24" fill="currentColor" id="check-solid" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"/></symbol><symbol fill="currentColor" viewBox="0 0 20 20" id="chevron-down-control" xmlns="http://www.w3.org/2000/svg"><path d="M5.21 7.355a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0l-4.25-4.25a.75.75 0 0 1 0-1.06z"/></symbol><symbol fill="currentColor" viewBox="0 0 24 24" id="chevron-down-solid" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06z" clip-rule="evenodd"/></symbol><symbol viewBox="0 0 24 24" fill="currentColor" id="chevron-left-solid" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z" clip-rule="evenodd"/></symbol><symbol viewBox="0 0 24 24" fill="currentColor" id="chevron-right-solid" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z" clip-rule="evenodd"/></symbol><symbol fill="currentColor" viewBox="0 0 24 24" id="chevron-up-solid" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.47 7.72a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 1 1-1.06 1.06L12 9.31l-6.97 6.97a.75.75 0 0 1-1.06-1.06z" clip-rule="evenodd"/></symbol><symbol fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" id="dots-horizontal-outline" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm7 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm7 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></symbol><symbol viewBox="0 0 24 24" fill="currentColor" id="exclamation-triangle-solid" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd"/></symbol><symbol viewBox="0 0 24 24" fill="currentColor" id="information-circle-solid" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd"/></symbol><symbol fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" id="menu-outline" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/></symbol><symbol viewBox="0 0 24 24" fill="currentColor" id="pencil-solid" xmlns="http://www.w3.org/2000/svg"><path d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712Zm-2.218 5.93-3.712-3.712-8.4 8.4a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32l8.4-8.4Z"/><path d="M5.25 5.25a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3V13.5a.75.75 0 0 0-1.5 0v5.25a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5V8.25a1.5 1.5 0 0 1 1.5-1.5h5.25a.75.75 0 0 0 0-1.5H5.25Z"/></symbol><symbol viewBox="0 0 24 24" fill="currentColor" id="x-circle-solid" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z" clip-rule="evenodd"/></symbol><symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="x-outline" xmlns="http://www.w3.org/2000/svg"><path d="M18 6 6 18M6 6l12 12"/></symbol></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, HostBinding, Input, Inject, Component, Pipe, EventEmitter, Output, Optional, ContentChild, Directive, NgModule, LOCALE_ID, ElementRef, HostListener, ViewEncapsulation, Injectable,
|
|
2
|
+
import { InjectionToken, HostBinding, Input, Inject, Component, Pipe, EventEmitter, Output, Optional, ContentChild, Directive, NgModule, LOCALE_ID, ElementRef, input, booleanAttribute, HostListener, ViewEncapsulation, Injectable, ViewChild, ViewContainerRef, ContentChildren } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, DatePipe, DOCUMENT } from '@angular/common';
|
|
5
5
|
import * as i1$1 from '@angular/router';
|
|
6
6
|
import { NavigationEnd, NavigationCancel, NavigationError, NavigationStart } from '@angular/router';
|
|
7
|
-
import { race, BehaviorSubject, Subscription, fromEvent, merge, filter as filter$1, take as take$1 } from 'rxjs';
|
|
7
|
+
import { race, BehaviorSubject, Subscription, fromEvent, merge, filter as filter$1, take as take$1, firstValueFrom } from 'rxjs';
|
|
8
8
|
import { filter, delay, take, repeat } from 'rxjs/operators';
|
|
9
9
|
import * as i1$2 from '@angular/platform-browser';
|
|
10
10
|
import { By } from '@angular/platform-browser';
|
|
11
11
|
import * as i1$3 from '@angular/forms';
|
|
12
12
|
import { FormsModule, NgModel, NgForm } from '@angular/forms';
|
|
13
|
-
import
|
|
13
|
+
import * as i1$5 from '@angular/cdk/dialog';
|
|
14
|
+
import { CdkDialogContainer, Dialog, DialogConfig, DialogModule, DIALOG_DATA } from '@angular/cdk/dialog';
|
|
14
15
|
import * as i3 from '@angular/cdk/overlay';
|
|
15
16
|
import { OverlayModule, CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
|
|
16
17
|
import { CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
|
|
@@ -50,14 +51,14 @@ class SvgIconComponent {
|
|
|
50
51
|
return `icon icon-${this.size}`;
|
|
51
52
|
}
|
|
52
53
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SvgIconComponent, deps: [{ token: SVG_ICON_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
53
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: SvgIconComponent, isStandalone: true, selector: "mz-svg-icon", inputs: { key: "key", type: "type", size: "size" }, host: { attributes: { "role": "img" }, properties: { "attr.data-icon-name": "key", "class": "this.classes" } }, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <use [attr.href]=\"url\" />\n</svg>", styles: [":host.icon-medium{width:1.25rem;height:1.25rem}:host.icon{display:inline-block}svg{height:100%;width:100
|
|
54
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: SvgIconComponent, isStandalone: true, selector: "mz-svg-icon", inputs: { key: "key", type: "type", size: "size" }, host: { attributes: { "role": "img" }, properties: { "attr.data-icon-name": "key", "class": "this.classes" } }, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <use [attr.href]=\"url\" />\n</svg>", styles: [":host.icon-medium{width:1.25rem;height:1.25rem}:host.icon{display:inline-block}svg{height:100%;width:100%;display:inline}\n"] }); }
|
|
54
55
|
}
|
|
55
56
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SvgIconComponent, decorators: [{
|
|
56
57
|
type: Component,
|
|
57
58
|
args: [{ selector: 'mz-svg-icon', host: {
|
|
58
59
|
'role': 'img',
|
|
59
60
|
'[attr.data-icon-name]': 'key',
|
|
60
|
-
}, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <use [attr.href]=\"url\" />\n</svg>", styles: [":host.icon-medium{width:1.25rem;height:1.25rem}:host.icon{display:inline-block}svg{height:100%;width:100
|
|
61
|
+
}, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <use [attr.href]=\"url\" />\n</svg>", styles: [":host.icon-medium{width:1.25rem;height:1.25rem}:host.icon{display:inline-block}svg{height:100%;width:100%;display:inline}\n"] }]
|
|
61
62
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
62
63
|
type: Inject,
|
|
63
64
|
args: [SVG_ICON_DEFAULT_OPTIONS]
|
|
@@ -205,11 +206,11 @@ class PaginationComponent {
|
|
|
205
206
|
this.pages = pageNumbers;
|
|
206
207
|
}
|
|
207
208
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PaginationComponent, deps: [{ token: PAGINATION_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
208
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: PaginationComponent, isStandalone: true, selector: "mz-pagination", inputs: { length: "length", page: "page", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { changePage: "changePage" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-wrapper\">\n <nav class=\"pagination-nav\" aria-label=\"pagination\">\n <button class=\"page-link page-icon-link\" [class.disabled]=\"page === 1\" (click)=\"changePageNumber(page - 1)\">\n <span class=\"sr-only\">Previous page</span>\n <mz-svg-icon key=\"chevron-left-solid\"></mz-svg-icon>\n </button>\n @for(p of pages; track p) {\n @if(isEllipsis(p)) {\n <span class=\"page-ellipsis page-link disabled\">...</span>\n } @else {\n <button class=\"page-link\" [class.active]=\"p === page\" (click)=\"changePageNumber(p)\">{{ p }}</button>\n }\n }\n\n <button class=\"page-link page-icon-link\" [class.disabled]=\"page === pageCount\" (click)=\"changePageNumber(page + 1)\">\n <span class=\"sr-only\">Next page</span>\n <mz-svg-icon key=\"chevron-right-solid\"></mz-svg-icon>\n </button>\n </nav>\n <div class=\"pagination-size\">\n Show\n <select #c (change)=\"changePageSize(c.value)\" name=\"pageSizeControl\" class=\"page-size-control\">\n @for(size of pageSizeOptions; track size) {\n <option [attr.selected]=\"pageSize == size ? true : null\" [value]=\"size\">{{ size }}</option>\n }\n </select>\n per page\n </div>\n</div>\n", styles: [":root{--color-primary: #1d4ed8;--color-secondary: #374151;--color-success: #15803d;--color-danger: #b91c1c;--color-warning: #a16207;--color-neutral-50: #f9fafb;--color-neutral-100: #f3f4f6;--color-neutral-200: #e5e7eb;--color-neutral-300: #d1d5db;--color-neutral-400: #9ca3af;--color-neutral-500: #6b7280;--color-neutral-600: #4b5563;--color-neutral-700: #374151;--color-neutral-800: #1f2937;--color-neutral-900: #111827;--color-neutral-950: #030712;--color-brand-50: #eff6ff;--color-brand-100: #dbeafe;--color-brand-200: #bfdbfe;--color-brand-300: #93c5fd;--color-brand-400: #60a5fa;--color-brand-500: #3b82f6;--color-brand-600: #2563eb;--color-brand-700: #1d4ed8;--color-brand-800: #1e40af;--color-brand-900: #1e3a8a;--color-brand-950: #172554;--color-green-50: #f0fdf4;--color-green-100: #dcfce7;--color-green-200: #bbf7d0;--color-green-300: #86efac;--color-green-400: #4ade80;--color-green-500: #22c55e;--color-green-600: #16a34a;--color-green-700: #15803d;--color-green-800: #166534;--color-green-900: #14532d;--color-green-950: #052e16;--
|
|
209
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: PaginationComponent, isStandalone: true, selector: "mz-pagination", inputs: { length: "length", page: "page", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { changePage: "changePage" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-wrapper\">\n <nav class=\"pagination-nav\" aria-label=\"pagination\">\n <button class=\"page-link page-icon-link\" [class.disabled]=\"page === 1\" (click)=\"changePageNumber(page - 1)\">\n <span class=\"sr-only\">Previous page</span>\n <mz-svg-icon key=\"chevron-left-solid\"></mz-svg-icon>\n </button>\n @for(p of pages; track p) {\n @if(isEllipsis(p)) {\n <span class=\"page-ellipsis page-link disabled\">...</span>\n } @else {\n <button class=\"page-link\" [class.active]=\"p === page\" (click)=\"changePageNumber(p)\">{{ p }}</button>\n }\n }\n\n <button class=\"page-link page-icon-link\" [class.disabled]=\"page === pageCount\" (click)=\"changePageNumber(page + 1)\">\n <span class=\"sr-only\">Next page</span>\n <mz-svg-icon key=\"chevron-right-solid\"></mz-svg-icon>\n </button>\n </nav>\n <div class=\"pagination-size\">\n Show\n <select #c (change)=\"changePageSize(c.value)\" name=\"pageSizeControl\" class=\"page-size-control\">\n @for(size of pageSizeOptions; track size) {\n <option [attr.selected]=\"pageSize == size ? true : null\" [value]=\"size\">{{ size }}</option>\n }\n </select>\n per page\n </div>\n</div>\n", styles: [":root{--color-primary: #1d4ed8;--color-secondary: #374151;--color-success: #15803d;--color-danger: #b91c1c;--color-warning: #a16207;--color-neutral-50: #f9fafb;--color-neutral-100: #f3f4f6;--color-neutral-200: #e5e7eb;--color-neutral-300: #d1d5db;--color-neutral-400: #9ca3af;--color-neutral-500: #6b7280;--color-neutral-600: #4b5563;--color-neutral-700: #374151;--color-neutral-800: #1f2937;--color-neutral-900: #111827;--color-neutral-950: #030712;--color-brand-50: #eff6ff;--color-brand-100: #dbeafe;--color-brand-200: #bfdbfe;--color-brand-300: #93c5fd;--color-brand-400: #60a5fa;--color-brand-500: #3b82f6;--color-brand-600: #2563eb;--color-brand-700: #1d4ed8;--color-brand-800: #1e40af;--color-brand-900: #1e3a8a;--color-brand-950: #172554;--color-green-50: #f0fdf4;--color-green-100: #dcfce7;--color-green-200: #bbf7d0;--color-green-300: #86efac;--color-green-400: #4ade80;--color-green-500: #22c55e;--color-green-600: #16a34a;--color-green-700: #15803d;--color-green-800: #166534;--color-green-900: #14532d;--color-green-950: #052e16;--color-red-50: #fef2f2;--color-red-100: #fee2e2;--color-red-200: #fecaca;--color-red-300: #fca5a5;--color-red-400: #f87171;--color-red-500: #ef4444;--color-red-600: #dc2626;--color-red-700: #b91c1c;--color-red-800: #991b1b;--color-red-900: #7f1d1d;--color-red-950: #450a0a;--color-yellow-50: #fefce8;--color-yellow-100: #fef9c3;--color-yellow-200: #fef08a;--color-yellow-300: #fde047;--color-yellow-400: #facc15;--color-yellow-500: #eab308;--color-yellow-600: #ca8a04;--color-yellow-700: #a16207;--color-yellow-800: #854d0e;--color-yellow-900: #713f12;--color-yellow-950: #422006;--border-radius: 0px;--surface-bg: #fff;--surface-border-radius: 0rem;--button-border-radius: 0rem}.pagination-wrapper{display:flex;justify-content:center;color:var(--text-subtlest);gap:1.25rem}.pagination-nav{display:flex;justify-content:center;flex-grow:1;padding-left:1rem;padding-right:1rem}.page-link{display:flex;cursor:pointer;padding:1rem;font-weight:500;color:var(--color-neutral-600)}.page-link:hover{color:var(--color-primary)}.page-link.active{color:var(--color-primary);font-weight:bolder;cursor:default}.page-link.disabled{color:var(--color-neutral-400);cursor:default;text-decoration:none}.pagination-size{color:var(--color-neutral-500);padding:1rem;font-size:.875rem;line-height:1.4285714286;margin-left:auto;display:none;flex-grow:0}@media (min-width: 1024px){.pagination-size{display:inline-block}}.page-size-control{padding:0rem 1.75rem 0rem .125rem;margin-left:.25rem;margin-right:.25rem}\n"], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "mz-svg-icon", inputs: ["key", "type", "size"] }] }); }
|
|
209
210
|
}
|
|
210
211
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
211
212
|
type: Component,
|
|
212
|
-
args: [{ selector: 'mz-pagination', imports: [SvgIconComponent], template: "<div class=\"pagination-wrapper\">\n <nav class=\"pagination-nav\" aria-label=\"pagination\">\n <button class=\"page-link page-icon-link\" [class.disabled]=\"page === 1\" (click)=\"changePageNumber(page - 1)\">\n <span class=\"sr-only\">Previous page</span>\n <mz-svg-icon key=\"chevron-left-solid\"></mz-svg-icon>\n </button>\n @for(p of pages; track p) {\n @if(isEllipsis(p)) {\n <span class=\"page-ellipsis page-link disabled\">...</span>\n } @else {\n <button class=\"page-link\" [class.active]=\"p === page\" (click)=\"changePageNumber(p)\">{{ p }}</button>\n }\n }\n\n <button class=\"page-link page-icon-link\" [class.disabled]=\"page === pageCount\" (click)=\"changePageNumber(page + 1)\">\n <span class=\"sr-only\">Next page</span>\n <mz-svg-icon key=\"chevron-right-solid\"></mz-svg-icon>\n </button>\n </nav>\n <div class=\"pagination-size\">\n Show\n <select #c (change)=\"changePageSize(c.value)\" name=\"pageSizeControl\" class=\"page-size-control\">\n @for(size of pageSizeOptions; track size) {\n <option [attr.selected]=\"pageSize == size ? true : null\" [value]=\"size\">{{ size }}</option>\n }\n </select>\n per page\n </div>\n</div>\n", styles: [":root{--color-primary: #1d4ed8;--color-secondary: #374151;--color-success: #15803d;--color-danger: #b91c1c;--color-warning: #a16207;--color-neutral-50: #f9fafb;--color-neutral-100: #f3f4f6;--color-neutral-200: #e5e7eb;--color-neutral-300: #d1d5db;--color-neutral-400: #9ca3af;--color-neutral-500: #6b7280;--color-neutral-600: #4b5563;--color-neutral-700: #374151;--color-neutral-800: #1f2937;--color-neutral-900: #111827;--color-neutral-950: #030712;--color-brand-50: #eff6ff;--color-brand-100: #dbeafe;--color-brand-200: #bfdbfe;--color-brand-300: #93c5fd;--color-brand-400: #60a5fa;--color-brand-500: #3b82f6;--color-brand-600: #2563eb;--color-brand-700: #1d4ed8;--color-brand-800: #1e40af;--color-brand-900: #1e3a8a;--color-brand-950: #172554;--color-green-50: #f0fdf4;--color-green-100: #dcfce7;--color-green-200: #bbf7d0;--color-green-300: #86efac;--color-green-400: #4ade80;--color-green-500: #22c55e;--color-green-600: #16a34a;--color-green-700: #15803d;--color-green-800: #166534;--color-green-900: #14532d;--color-green-950: #052e16;--
|
|
213
|
+
args: [{ selector: 'mz-pagination', imports: [SvgIconComponent], template: "<div class=\"pagination-wrapper\">\n <nav class=\"pagination-nav\" aria-label=\"pagination\">\n <button class=\"page-link page-icon-link\" [class.disabled]=\"page === 1\" (click)=\"changePageNumber(page - 1)\">\n <span class=\"sr-only\">Previous page</span>\n <mz-svg-icon key=\"chevron-left-solid\"></mz-svg-icon>\n </button>\n @for(p of pages; track p) {\n @if(isEllipsis(p)) {\n <span class=\"page-ellipsis page-link disabled\">...</span>\n } @else {\n <button class=\"page-link\" [class.active]=\"p === page\" (click)=\"changePageNumber(p)\">{{ p }}</button>\n }\n }\n\n <button class=\"page-link page-icon-link\" [class.disabled]=\"page === pageCount\" (click)=\"changePageNumber(page + 1)\">\n <span class=\"sr-only\">Next page</span>\n <mz-svg-icon key=\"chevron-right-solid\"></mz-svg-icon>\n </button>\n </nav>\n <div class=\"pagination-size\">\n Show\n <select #c (change)=\"changePageSize(c.value)\" name=\"pageSizeControl\" class=\"page-size-control\">\n @for(size of pageSizeOptions; track size) {\n <option [attr.selected]=\"pageSize == size ? true : null\" [value]=\"size\">{{ size }}</option>\n }\n </select>\n per page\n </div>\n</div>\n", styles: [":root{--color-primary: #1d4ed8;--color-secondary: #374151;--color-success: #15803d;--color-danger: #b91c1c;--color-warning: #a16207;--color-neutral-50: #f9fafb;--color-neutral-100: #f3f4f6;--color-neutral-200: #e5e7eb;--color-neutral-300: #d1d5db;--color-neutral-400: #9ca3af;--color-neutral-500: #6b7280;--color-neutral-600: #4b5563;--color-neutral-700: #374151;--color-neutral-800: #1f2937;--color-neutral-900: #111827;--color-neutral-950: #030712;--color-brand-50: #eff6ff;--color-brand-100: #dbeafe;--color-brand-200: #bfdbfe;--color-brand-300: #93c5fd;--color-brand-400: #60a5fa;--color-brand-500: #3b82f6;--color-brand-600: #2563eb;--color-brand-700: #1d4ed8;--color-brand-800: #1e40af;--color-brand-900: #1e3a8a;--color-brand-950: #172554;--color-green-50: #f0fdf4;--color-green-100: #dcfce7;--color-green-200: #bbf7d0;--color-green-300: #86efac;--color-green-400: #4ade80;--color-green-500: #22c55e;--color-green-600: #16a34a;--color-green-700: #15803d;--color-green-800: #166534;--color-green-900: #14532d;--color-green-950: #052e16;--color-red-50: #fef2f2;--color-red-100: #fee2e2;--color-red-200: #fecaca;--color-red-300: #fca5a5;--color-red-400: #f87171;--color-red-500: #ef4444;--color-red-600: #dc2626;--color-red-700: #b91c1c;--color-red-800: #991b1b;--color-red-900: #7f1d1d;--color-red-950: #450a0a;--color-yellow-50: #fefce8;--color-yellow-100: #fef9c3;--color-yellow-200: #fef08a;--color-yellow-300: #fde047;--color-yellow-400: #facc15;--color-yellow-500: #eab308;--color-yellow-600: #ca8a04;--color-yellow-700: #a16207;--color-yellow-800: #854d0e;--color-yellow-900: #713f12;--color-yellow-950: #422006;--border-radius: 0px;--surface-bg: #fff;--surface-border-radius: 0rem;--button-border-radius: 0rem}.pagination-wrapper{display:flex;justify-content:center;color:var(--text-subtlest);gap:1.25rem}.pagination-nav{display:flex;justify-content:center;flex-grow:1;padding-left:1rem;padding-right:1rem}.page-link{display:flex;cursor:pointer;padding:1rem;font-weight:500;color:var(--color-neutral-600)}.page-link:hover{color:var(--color-primary)}.page-link.active{color:var(--color-primary);font-weight:bolder;cursor:default}.page-link.disabled{color:var(--color-neutral-400);cursor:default;text-decoration:none}.pagination-size{color:var(--color-neutral-500);padding:1rem;font-size:.875rem;line-height:1.4285714286;margin-left:auto;display:none;flex-grow:0}@media (min-width: 1024px){.pagination-size{display:inline-block}}.page-size-control{padding:0rem 1.75rem 0rem .125rem;margin-left:.25rem;margin-right:.25rem}\n"] }]
|
|
213
214
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
214
215
|
type: Optional
|
|
215
216
|
}, {
|
|
@@ -978,6 +979,34 @@ class ResultTableHarness extends MuziehComponentHarness {
|
|
|
978
979
|
}
|
|
979
980
|
}
|
|
980
981
|
|
|
982
|
+
class MzButton {
|
|
983
|
+
get elementClass() {
|
|
984
|
+
return ['button', `button-${this.appearance()}`, this.busy() ? 'busy' : ''].join(' ');
|
|
985
|
+
}
|
|
986
|
+
constructor(elementRef) {
|
|
987
|
+
this.appearance = input('secondary');
|
|
988
|
+
this.busy = input(false);
|
|
989
|
+
this.disabled = input(false, { transform: booleanAttribute });
|
|
990
|
+
elementRef.nativeElement.addEventListener('click', (event) => {
|
|
991
|
+
if (this.busy() || this.disabled()) {
|
|
992
|
+
event.preventDefault();
|
|
993
|
+
event.stopPropagation();
|
|
994
|
+
event.stopImmediatePropagation();
|
|
995
|
+
return;
|
|
996
|
+
}
|
|
997
|
+
});
|
|
998
|
+
}
|
|
999
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzButton, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1000
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: MzButton, isStandalone: true, selector: "button[mz-button], a[mz-button], button[mzButton], a[mzButton]", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.elementClass" } }, ngImport: i0, template: "@if(busy()) {\n<span class=\"button--loading\">\n <svg class=\"button--loading-spinner\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n</span>\n}\n<span class=\"button--label\">\n <ng-content></ng-content>\n</span>\n", styles: [":root{--color-primary: #1d4ed8;--color-secondary: #374151;--color-success: #15803d;--color-danger: #b91c1c;--color-warning: #a16207;--color-neutral-50: #f9fafb;--color-neutral-100: #f3f4f6;--color-neutral-200: #e5e7eb;--color-neutral-300: #d1d5db;--color-neutral-400: #9ca3af;--color-neutral-500: #6b7280;--color-neutral-600: #4b5563;--color-neutral-700: #374151;--color-neutral-800: #1f2937;--color-neutral-900: #111827;--color-neutral-950: #030712;--color-brand-50: #eff6ff;--color-brand-100: #dbeafe;--color-brand-200: #bfdbfe;--color-brand-300: #93c5fd;--color-brand-400: #60a5fa;--color-brand-500: #3b82f6;--color-brand-600: #2563eb;--color-brand-700: #1d4ed8;--color-brand-800: #1e40af;--color-brand-900: #1e3a8a;--color-brand-950: #172554;--color-green-50: #f0fdf4;--color-green-100: #dcfce7;--color-green-200: #bbf7d0;--color-green-300: #86efac;--color-green-400: #4ade80;--color-green-500: #22c55e;--color-green-600: #16a34a;--color-green-700: #15803d;--color-green-800: #166534;--color-green-900: #14532d;--color-green-950: #052e16;--color-red-50: #fef2f2;--color-red-100: #fee2e2;--color-red-200: #fecaca;--color-red-300: #fca5a5;--color-red-400: #f87171;--color-red-500: #ef4444;--color-red-600: #dc2626;--color-red-700: #b91c1c;--color-red-800: #991b1b;--color-red-900: #7f1d1d;--color-red-950: #450a0a;--color-yellow-50: #fefce8;--color-yellow-100: #fef9c3;--color-yellow-200: #fef08a;--color-yellow-300: #fde047;--color-yellow-400: #facc15;--color-yellow-500: #eab308;--color-yellow-600: #ca8a04;--color-yellow-700: #a16207;--color-yellow-800: #854d0e;--color-yellow-900: #713f12;--color-yellow-950: #422006;--border-radius: 0px;--surface-bg: #fff;--surface-border-radius: 0rem;--button-border-radius: 0rem}:host{position:relative;padding:.625rem 1rem;font-weight:500;font-size:.875rem;line-height:1.4285714286}:host:focus{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--color-primary)}:host(.button-primary){background-color:var(--color-primary);color:#fff}:host(.button-primary):hover{background-color:var(--color-brand-600)}:host(.button-primary):active{background-color:var(--color-brand-800)}:host(.button-danger){background-color:var(--color-red-500);color:#fff}:host(.button-danger):hover{background-color:var(--color-red-600)}:host(.button-danger):focus{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--color-red-500)}:host(.button-danger):active{background-color:var(--color-red-700)}:host(.button-warning){background-color:var(--color-yellow-500);color:#fff}:host(.button-warning):hover{background-color:var(--color-yellow-600)}:host(.button-warning):focus{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--color-yellow-500)}:host(.button-warning):active{background-color:var(--color-yellow-700)}:host(.button-secondary){background-color:var(--color-neutral-100);color:var(--color-neutral-700)}:host(.button-secondary):hover{background-color:var(--color-neutral-200)}:host(.button-secondary):active{background-color:var(--color-neutral-300)}:host(.button-tertiary){color:var(--color-neutral-700)}:host.busy{cursor:wait}:host.busy .button--label{color:transparent}.button--label{display:inline-flex;align-items:center;gap:.25rem}.button--loading{position:absolute;z-index:0;inset:0;display:flex;justify-content:center}.opacity-25{opacity:.25}.opacity-75{opacity:.75}.button--loading-spinner{height:1.25rem;width:1.25rem;margin:auto;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }); }
|
|
1001
|
+
}
|
|
1002
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzButton, decorators: [{
|
|
1003
|
+
type: Component,
|
|
1004
|
+
args: [{ selector: 'button[mz-button], a[mz-button], button[mzButton], a[mzButton]', imports: [], template: "@if(busy()) {\n<span class=\"button--loading\">\n <svg class=\"button--loading-spinner\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n</span>\n}\n<span class=\"button--label\">\n <ng-content></ng-content>\n</span>\n", styles: [":root{--color-primary: #1d4ed8;--color-secondary: #374151;--color-success: #15803d;--color-danger: #b91c1c;--color-warning: #a16207;--color-neutral-50: #f9fafb;--color-neutral-100: #f3f4f6;--color-neutral-200: #e5e7eb;--color-neutral-300: #d1d5db;--color-neutral-400: #9ca3af;--color-neutral-500: #6b7280;--color-neutral-600: #4b5563;--color-neutral-700: #374151;--color-neutral-800: #1f2937;--color-neutral-900: #111827;--color-neutral-950: #030712;--color-brand-50: #eff6ff;--color-brand-100: #dbeafe;--color-brand-200: #bfdbfe;--color-brand-300: #93c5fd;--color-brand-400: #60a5fa;--color-brand-500: #3b82f6;--color-brand-600: #2563eb;--color-brand-700: #1d4ed8;--color-brand-800: #1e40af;--color-brand-900: #1e3a8a;--color-brand-950: #172554;--color-green-50: #f0fdf4;--color-green-100: #dcfce7;--color-green-200: #bbf7d0;--color-green-300: #86efac;--color-green-400: #4ade80;--color-green-500: #22c55e;--color-green-600: #16a34a;--color-green-700: #15803d;--color-green-800: #166534;--color-green-900: #14532d;--color-green-950: #052e16;--color-red-50: #fef2f2;--color-red-100: #fee2e2;--color-red-200: #fecaca;--color-red-300: #fca5a5;--color-red-400: #f87171;--color-red-500: #ef4444;--color-red-600: #dc2626;--color-red-700: #b91c1c;--color-red-800: #991b1b;--color-red-900: #7f1d1d;--color-red-950: #450a0a;--color-yellow-50: #fefce8;--color-yellow-100: #fef9c3;--color-yellow-200: #fef08a;--color-yellow-300: #fde047;--color-yellow-400: #facc15;--color-yellow-500: #eab308;--color-yellow-600: #ca8a04;--color-yellow-700: #a16207;--color-yellow-800: #854d0e;--color-yellow-900: #713f12;--color-yellow-950: #422006;--border-radius: 0px;--surface-bg: #fff;--surface-border-radius: 0rem;--button-border-radius: 0rem}:host{position:relative;padding:.625rem 1rem;font-weight:500;font-size:.875rem;line-height:1.4285714286}:host:focus{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--color-primary)}:host(.button-primary){background-color:var(--color-primary);color:#fff}:host(.button-primary):hover{background-color:var(--color-brand-600)}:host(.button-primary):active{background-color:var(--color-brand-800)}:host(.button-danger){background-color:var(--color-red-500);color:#fff}:host(.button-danger):hover{background-color:var(--color-red-600)}:host(.button-danger):focus{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--color-red-500)}:host(.button-danger):active{background-color:var(--color-red-700)}:host(.button-warning){background-color:var(--color-yellow-500);color:#fff}:host(.button-warning):hover{background-color:var(--color-yellow-600)}:host(.button-warning):focus{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--color-yellow-500)}:host(.button-warning):active{background-color:var(--color-yellow-700)}:host(.button-secondary){background-color:var(--color-neutral-100);color:var(--color-neutral-700)}:host(.button-secondary):hover{background-color:var(--color-neutral-200)}:host(.button-secondary):active{background-color:var(--color-neutral-300)}:host(.button-tertiary){color:var(--color-neutral-700)}:host.busy{cursor:wait}:host.busy .button--label{color:transparent}.button--label{display:inline-flex;align-items:center;gap:.25rem}.button--loading{position:absolute;z-index:0;inset:0;display:flex;justify-content:center}.opacity-25{opacity:.25}.opacity-75{opacity:.75}.button--loading-spinner{height:1.25rem;width:1.25rem;margin:auto;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
1005
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { elementClass: [{
|
|
1006
|
+
type: HostBinding,
|
|
1007
|
+
args: ['class']
|
|
1008
|
+
}] } });
|
|
1009
|
+
|
|
981
1010
|
/** Injection token that can be used to provide default options for the dialog module. */
|
|
982
1011
|
const DEFAULT_MZ_DRAWER_CONFIG = new InjectionToken('DefaultMzDrawerConfig');
|
|
983
1012
|
const MZ_DRAWER_DATA = new InjectionToken('MzDrawerData');
|
|
@@ -1308,6 +1337,221 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
|
|
|
1308
1337
|
}]
|
|
1309
1338
|
}] });
|
|
1310
1339
|
|
|
1340
|
+
class MzDialogContainer extends CdkDialogContainer {
|
|
1341
|
+
constructor(elementRef, focusTrapFactory, dialogConfig, interactivityChecker, ngZone, overlayRef, _document) {
|
|
1342
|
+
super(elementRef, focusTrapFactory, _document, dialogConfig, interactivityChecker, ngZone, overlayRef);
|
|
1343
|
+
this.elementRef = elementRef;
|
|
1344
|
+
this.dialogConfig = dialogConfig;
|
|
1345
|
+
this.interactivityChecker = interactivityChecker;
|
|
1346
|
+
this.ngZone = ngZone;
|
|
1347
|
+
this.overlayRef = overlayRef;
|
|
1348
|
+
}
|
|
1349
|
+
_contentAttached() {
|
|
1350
|
+
super._contentAttached();
|
|
1351
|
+
this.enter();
|
|
1352
|
+
}
|
|
1353
|
+
enter() {
|
|
1354
|
+
const html = this.elementRef.nativeElement;
|
|
1355
|
+
html.classList.add('open');
|
|
1356
|
+
}
|
|
1357
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDialogContainer, deps: [{ token: i0.ElementRef }, { token: i1$4.FocusTrapFactory }, { token: i1$5.DialogConfig }, { token: i1$4.InteractivityChecker }, { token: i0.NgZone }, { token: i3.OverlayRef }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1358
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: MzDialogContainer, isStandalone: true, selector: "mz-dialog-container", host: { classAttribute: "mz-dialog-container" }, usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>", styles: [".mz-dialog-container{background-color:var(--surface-bg);padding:1rem;width:100%;height:100%;opacity:0;transition:opacity linear .2s}.mz-dialog-container.open{opacity:1}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1359
|
+
}
|
|
1360
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDialogContainer, decorators: [{
|
|
1361
|
+
type: Component,
|
|
1362
|
+
args: [{ selector: 'mz-dialog-container', imports: [CdkPortalOutlet], encapsulation: ViewEncapsulation.None, host: {
|
|
1363
|
+
class: 'mz-dialog-container',
|
|
1364
|
+
}, template: "<ng-template cdkPortalOutlet></ng-template>", styles: [".mz-dialog-container{background-color:var(--surface-bg);padding:1rem;width:100%;height:100%;opacity:0;transition:opacity linear .2s}.mz-dialog-container.open{opacity:1}\n"] }]
|
|
1365
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$4.FocusTrapFactory }, { type: i1$5.DialogConfig }, { type: i1$4.InteractivityChecker }, { type: i0.NgZone }, { type: i3.OverlayRef }, { type: undefined, decorators: [{
|
|
1366
|
+
type: Optional
|
|
1367
|
+
}, {
|
|
1368
|
+
type: Inject,
|
|
1369
|
+
args: [DOCUMENT]
|
|
1370
|
+
}] }] });
|
|
1371
|
+
|
|
1372
|
+
class MzDialogHeader {
|
|
1373
|
+
constructor() {
|
|
1374
|
+
this.title = input('');
|
|
1375
|
+
}
|
|
1376
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1377
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", type: MzDialogHeader, isStandalone: true, selector: "mz-dialog-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<h2>{{ title() }}</h2>\n", styles: [":root{--color-primary: #1d4ed8;--color-secondary: #374151;--color-success: #15803d;--color-danger: #b91c1c;--color-warning: #a16207;--color-neutral-50: #f9fafb;--color-neutral-100: #f3f4f6;--color-neutral-200: #e5e7eb;--color-neutral-300: #d1d5db;--color-neutral-400: #9ca3af;--color-neutral-500: #6b7280;--color-neutral-600: #4b5563;--color-neutral-700: #374151;--color-neutral-800: #1f2937;--color-neutral-900: #111827;--color-neutral-950: #030712;--color-brand-50: #eff6ff;--color-brand-100: #dbeafe;--color-brand-200: #bfdbfe;--color-brand-300: #93c5fd;--color-brand-400: #60a5fa;--color-brand-500: #3b82f6;--color-brand-600: #2563eb;--color-brand-700: #1d4ed8;--color-brand-800: #1e40af;--color-brand-900: #1e3a8a;--color-brand-950: #172554;--color-green-50: #f0fdf4;--color-green-100: #dcfce7;--color-green-200: #bbf7d0;--color-green-300: #86efac;--color-green-400: #4ade80;--color-green-500: #22c55e;--color-green-600: #16a34a;--color-green-700: #15803d;--color-green-800: #166534;--color-green-900: #14532d;--color-green-950: #052e16;--color-red-50: #fef2f2;--color-red-100: #fee2e2;--color-red-200: #fecaca;--color-red-300: #fca5a5;--color-red-400: #f87171;--color-red-500: #ef4444;--color-red-600: #dc2626;--color-red-700: #b91c1c;--color-red-800: #991b1b;--color-red-900: #7f1d1d;--color-red-950: #450a0a;--color-yellow-50: #fefce8;--color-yellow-100: #fef9c3;--color-yellow-200: #fef08a;--color-yellow-300: #fde047;--color-yellow-400: #facc15;--color-yellow-500: #eab308;--color-yellow-600: #ca8a04;--color-yellow-700: #a16207;--color-yellow-800: #854d0e;--color-yellow-900: #713f12;--color-yellow-950: #422006;--border-radius: 0px;--surface-bg: #fff;--surface-border-radius: 0rem;--button-border-radius: 0rem}:host{display:flex;padding:.5rem;gap:.5rem}h2{flex:1}\n"] }); }
|
|
1378
|
+
}
|
|
1379
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDialogHeader, decorators: [{
|
|
1380
|
+
type: Component,
|
|
1381
|
+
args: [{ selector: 'mz-dialog-header', template: "<h2>{{ title() }}</h2>\n", styles: [":root{--color-primary: #1d4ed8;--color-secondary: #374151;--color-success: #15803d;--color-danger: #b91c1c;--color-warning: #a16207;--color-neutral-50: #f9fafb;--color-neutral-100: #f3f4f6;--color-neutral-200: #e5e7eb;--color-neutral-300: #d1d5db;--color-neutral-400: #9ca3af;--color-neutral-500: #6b7280;--color-neutral-600: #4b5563;--color-neutral-700: #374151;--color-neutral-800: #1f2937;--color-neutral-900: #111827;--color-neutral-950: #030712;--color-brand-50: #eff6ff;--color-brand-100: #dbeafe;--color-brand-200: #bfdbfe;--color-brand-300: #93c5fd;--color-brand-400: #60a5fa;--color-brand-500: #3b82f6;--color-brand-600: #2563eb;--color-brand-700: #1d4ed8;--color-brand-800: #1e40af;--color-brand-900: #1e3a8a;--color-brand-950: #172554;--color-green-50: #f0fdf4;--color-green-100: #dcfce7;--color-green-200: #bbf7d0;--color-green-300: #86efac;--color-green-400: #4ade80;--color-green-500: #22c55e;--color-green-600: #16a34a;--color-green-700: #15803d;--color-green-800: #166534;--color-green-900: #14532d;--color-green-950: #052e16;--color-red-50: #fef2f2;--color-red-100: #fee2e2;--color-red-200: #fecaca;--color-red-300: #fca5a5;--color-red-400: #f87171;--color-red-500: #ef4444;--color-red-600: #dc2626;--color-red-700: #b91c1c;--color-red-800: #991b1b;--color-red-900: #7f1d1d;--color-red-950: #450a0a;--color-yellow-50: #fefce8;--color-yellow-100: #fef9c3;--color-yellow-200: #fef08a;--color-yellow-300: #fde047;--color-yellow-400: #facc15;--color-yellow-500: #eab308;--color-yellow-600: #ca8a04;--color-yellow-700: #a16207;--color-yellow-800: #854d0e;--color-yellow-900: #713f12;--color-yellow-950: #422006;--border-radius: 0px;--surface-bg: #fff;--surface-border-radius: 0rem;--button-border-radius: 0rem}:host{display:flex;padding:.5rem;gap:.5rem}h2{flex:1}\n"] }]
|
|
1382
|
+
}], ctorParameters: () => [] });
|
|
1383
|
+
|
|
1384
|
+
class MzDialogFooter {
|
|
1385
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDialogFooter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1386
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: MzDialogFooter, isStandalone: true, selector: "mz-dialog-footer", ngImport: i0, template: "<ng-content></ng-content>", styles: [":root{--color-primary: #1d4ed8;--color-secondary: #374151;--color-success: #15803d;--color-danger: #b91c1c;--color-warning: #a16207;--color-neutral-50: #f9fafb;--color-neutral-100: #f3f4f6;--color-neutral-200: #e5e7eb;--color-neutral-300: #d1d5db;--color-neutral-400: #9ca3af;--color-neutral-500: #6b7280;--color-neutral-600: #4b5563;--color-neutral-700: #374151;--color-neutral-800: #1f2937;--color-neutral-900: #111827;--color-neutral-950: #030712;--color-brand-50: #eff6ff;--color-brand-100: #dbeafe;--color-brand-200: #bfdbfe;--color-brand-300: #93c5fd;--color-brand-400: #60a5fa;--color-brand-500: #3b82f6;--color-brand-600: #2563eb;--color-brand-700: #1d4ed8;--color-brand-800: #1e40af;--color-brand-900: #1e3a8a;--color-brand-950: #172554;--color-green-50: #f0fdf4;--color-green-100: #dcfce7;--color-green-200: #bbf7d0;--color-green-300: #86efac;--color-green-400: #4ade80;--color-green-500: #22c55e;--color-green-600: #16a34a;--color-green-700: #15803d;--color-green-800: #166534;--color-green-900: #14532d;--color-green-950: #052e16;--color-red-50: #fef2f2;--color-red-100: #fee2e2;--color-red-200: #fecaca;--color-red-300: #fca5a5;--color-red-400: #f87171;--color-red-500: #ef4444;--color-red-600: #dc2626;--color-red-700: #b91c1c;--color-red-800: #991b1b;--color-red-900: #7f1d1d;--color-red-950: #450a0a;--color-yellow-50: #fefce8;--color-yellow-100: #fef9c3;--color-yellow-200: #fef08a;--color-yellow-300: #fde047;--color-yellow-400: #facc15;--color-yellow-500: #eab308;--color-yellow-600: #ca8a04;--color-yellow-700: #a16207;--color-yellow-800: #854d0e;--color-yellow-900: #713f12;--color-yellow-950: #422006;--border-radius: 0px;--surface-bg: #fff;--surface-border-radius: 0rem;--button-border-radius: 0rem}:host{padding:1rem .5rem .5rem;display:flex;justify-content:flex-end;gap:.5rem}\n"] }); }
|
|
1387
|
+
}
|
|
1388
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDialogFooter, decorators: [{
|
|
1389
|
+
type: Component,
|
|
1390
|
+
args: [{ selector: 'mz-dialog-footer', imports: [], template: "<ng-content></ng-content>", styles: [":root{--color-primary: #1d4ed8;--color-secondary: #374151;--color-success: #15803d;--color-danger: #b91c1c;--color-warning: #a16207;--color-neutral-50: #f9fafb;--color-neutral-100: #f3f4f6;--color-neutral-200: #e5e7eb;--color-neutral-300: #d1d5db;--color-neutral-400: #9ca3af;--color-neutral-500: #6b7280;--color-neutral-600: #4b5563;--color-neutral-700: #374151;--color-neutral-800: #1f2937;--color-neutral-900: #111827;--color-neutral-950: #030712;--color-brand-50: #eff6ff;--color-brand-100: #dbeafe;--color-brand-200: #bfdbfe;--color-brand-300: #93c5fd;--color-brand-400: #60a5fa;--color-brand-500: #3b82f6;--color-brand-600: #2563eb;--color-brand-700: #1d4ed8;--color-brand-800: #1e40af;--color-brand-900: #1e3a8a;--color-brand-950: #172554;--color-green-50: #f0fdf4;--color-green-100: #dcfce7;--color-green-200: #bbf7d0;--color-green-300: #86efac;--color-green-400: #4ade80;--color-green-500: #22c55e;--color-green-600: #16a34a;--color-green-700: #15803d;--color-green-800: #166534;--color-green-900: #14532d;--color-green-950: #052e16;--color-red-50: #fef2f2;--color-red-100: #fee2e2;--color-red-200: #fecaca;--color-red-300: #fca5a5;--color-red-400: #f87171;--color-red-500: #ef4444;--color-red-600: #dc2626;--color-red-700: #b91c1c;--color-red-800: #991b1b;--color-red-900: #7f1d1d;--color-red-950: #450a0a;--color-yellow-50: #fefce8;--color-yellow-100: #fef9c3;--color-yellow-200: #fef08a;--color-yellow-300: #fde047;--color-yellow-400: #facc15;--color-yellow-500: #eab308;--color-yellow-600: #ca8a04;--color-yellow-700: #a16207;--color-yellow-800: #854d0e;--color-yellow-900: #713f12;--color-yellow-950: #422006;--border-radius: 0px;--surface-bg: #fff;--surface-border-radius: 0rem;--button-border-radius: 0rem}:host{padding:1rem .5rem .5rem;display:flex;justify-content:flex-end;gap:.5rem}\n"] }]
|
|
1391
|
+
}] });
|
|
1392
|
+
|
|
1393
|
+
class MzDialogContent {
|
|
1394
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDialogContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1395
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: MzDialogContent, isStandalone: true, selector: "mz-dialog-content", ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{max-height:80vh;max-width:80vh;min-width:24rem;display:block;overflow:auto;padding:1rem .5rem 2rem}\n"] }); }
|
|
1396
|
+
}
|
|
1397
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDialogContent, decorators: [{
|
|
1398
|
+
type: Component,
|
|
1399
|
+
args: [{ selector: 'mz-dialog-content', imports: [], template: "<ng-content></ng-content>", styles: [":host{max-height:80vh;max-width:80vh;min-width:24rem;display:block;overflow:auto;padding:1rem .5rem 2rem}\n"] }]
|
|
1400
|
+
}] });
|
|
1401
|
+
|
|
1402
|
+
class MzMessageDialog {
|
|
1403
|
+
constructor(dialogRef, data) {
|
|
1404
|
+
this.dialogRef = dialogRef;
|
|
1405
|
+
this.data = data;
|
|
1406
|
+
}
|
|
1407
|
+
ok() {
|
|
1408
|
+
this.dialogRef.close(true);
|
|
1409
|
+
}
|
|
1410
|
+
close() {
|
|
1411
|
+
this.dialogRef.close(false);
|
|
1412
|
+
}
|
|
1413
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzMessageDialog, deps: [{ token: i1$5.DialogRef }, { token: DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1414
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: MzMessageDialog, isStandalone: true, selector: "mz-message-dialog", ngImport: i0, template: "<mz-dialog-header [title]=\"data.title\"></mz-dialog-header>\n<mz-dialog-content>\n {{ data.message }}\n</mz-dialog-content>\n<mz-dialog-footer>\n @if(data.cancelAction.length > 0 ) {\n <button (click)=\"close()\" mzButton variant=\"tertiary\">{{ data.cancelAction }}</button>\n } @if(data.action.length > 0) {\n <button (click)=\"ok()\" cdkFocusInitial mzButton [variant]=\"data.appearance || 'primary'\">{{ data.action }}</button>\n }\n</mz-dialog-footer>\n", styles: [""], dependencies: [{ kind: "component", type: MzDialogHeader, selector: "mz-dialog-header", inputs: ["title"] }, { kind: "component", type: MzDialogFooter, selector: "mz-dialog-footer" }, { kind: "directive", type: ButtonDirective, selector: "[mzButton]", inputs: ["variant", "busy"] }, { kind: "component", type: MzDialogContent, selector: "mz-dialog-content" }] }); }
|
|
1415
|
+
}
|
|
1416
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzMessageDialog, decorators: [{
|
|
1417
|
+
type: Component,
|
|
1418
|
+
args: [{ selector: 'mz-message-dialog', imports: [MzDialogHeader, MzDialogFooter, ButtonDirective, MzDialogContent], template: "<mz-dialog-header [title]=\"data.title\"></mz-dialog-header>\n<mz-dialog-content>\n {{ data.message }}\n</mz-dialog-content>\n<mz-dialog-footer>\n @if(data.cancelAction.length > 0 ) {\n <button (click)=\"close()\" mzButton variant=\"tertiary\">{{ data.cancelAction }}</button>\n } @if(data.action.length > 0) {\n <button (click)=\"ok()\" cdkFocusInitial mzButton [variant]=\"data.appearance || 'primary'\">{{ data.action }}</button>\n }\n</mz-dialog-footer>\n" }]
|
|
1419
|
+
}], ctorParameters: () => [{ type: i1$5.DialogRef }, { type: undefined, decorators: [{
|
|
1420
|
+
type: Inject,
|
|
1421
|
+
args: [DIALOG_DATA]
|
|
1422
|
+
}] }] });
|
|
1423
|
+
|
|
1424
|
+
const MZ_DIALOG_DEFAULT_OPTIONS = new InjectionToken('MZ_DIALOG_DEFAULT_OPTIONS');
|
|
1425
|
+
class MzDialogConfig {
|
|
1426
|
+
constructor() {
|
|
1427
|
+
/** Optional CSS class or classes applied to the overlay panel. */
|
|
1428
|
+
this.panelClass = '';
|
|
1429
|
+
/** Whether the dialog has a backdrop. */
|
|
1430
|
+
this.hasBackdrop = true;
|
|
1431
|
+
/** Optional CSS class or classes applied to the overlay backdrop. */
|
|
1432
|
+
this.backdropClass = '';
|
|
1433
|
+
/** Whether the dialog closes with the escape key or pointer events outside the panel element. */
|
|
1434
|
+
this.disableClose = false;
|
|
1435
|
+
/** Width of the dialog. */
|
|
1436
|
+
this.width = '';
|
|
1437
|
+
/** Height of the dialog. */
|
|
1438
|
+
this.height = '';
|
|
1439
|
+
/** Data being injected into the child component. */
|
|
1440
|
+
this.data = null;
|
|
1441
|
+
/**
|
|
1442
|
+
* Where the dialog should focus on open.
|
|
1443
|
+
* @breaking-change 14.0.0 Remove boolean option from autoFocus. Use string or
|
|
1444
|
+
* AutoFocusTarget instead.
|
|
1445
|
+
*/
|
|
1446
|
+
this.autoFocus = 'first-tabbable';
|
|
1447
|
+
/**
|
|
1448
|
+
* Whether the dialog should restore focus to the previously-focused element upon closing.
|
|
1449
|
+
* Has the following behavior based on the type that is passed in:
|
|
1450
|
+
* - `boolean` - when true, will return focus to the element that was focused before the dialog
|
|
1451
|
+
* was opened, otherwise won't restore focus at all.
|
|
1452
|
+
* - `string` - focus will be restored to the first element that matches the CSS selector.
|
|
1453
|
+
* - `HTMLElement` - focus will be restored to the specific element.
|
|
1454
|
+
*/
|
|
1455
|
+
this.restoreFocus = true;
|
|
1456
|
+
}
|
|
1457
|
+
}
|
|
1458
|
+
|
|
1459
|
+
class MzDialog {
|
|
1460
|
+
constructor(injector, defaultOptions) {
|
|
1461
|
+
this.defaultOptions = defaultOptions;
|
|
1462
|
+
this.cdkDialog = injector.get(Dialog);
|
|
1463
|
+
}
|
|
1464
|
+
/**
|
|
1465
|
+
* Displays a message modal dialog.
|
|
1466
|
+
* @param title The title of the dialog.
|
|
1467
|
+
* @param message The message to display.
|
|
1468
|
+
* @param action The text for the action button. Not displayed if empty.
|
|
1469
|
+
* @param cancelAction The text for the cancel button. Not displayed if empty.
|
|
1470
|
+
* @param appearance The appearance of the dialog.
|
|
1471
|
+
* @returns A reference to the opened dialog.
|
|
1472
|
+
*/
|
|
1473
|
+
display(title, message, action = 'OK', cancelAction = '', appearance) {
|
|
1474
|
+
return this.open(MzMessageDialog, { data: { title: title, message: message, appearance: appearance, action: action, cancelAction: cancelAction }, hasBackdrop: true });
|
|
1475
|
+
}
|
|
1476
|
+
/**
|
|
1477
|
+
* Opens a confirmation modal dialog.
|
|
1478
|
+
* @param title The title of the dialog.
|
|
1479
|
+
* @param message The message to display in the dialog.
|
|
1480
|
+
* @param action The text for the OK button.
|
|
1481
|
+
* @param cancelAction The text for the Cancel button. Not displayed if empty.
|
|
1482
|
+
* @param appearance The appearance of the dialog.
|
|
1483
|
+
* @returns A promise that resolves to true if the user confirmed, false if canceled, undefined if dismissed.
|
|
1484
|
+
*/
|
|
1485
|
+
confirm(title, message, action = 'OK', cancelAction = 'Cancel', appearance) {
|
|
1486
|
+
const ref = this.open(MzMessageDialog, { data: { title: title, message: message, appearance: appearance, action: action, cancelAction: cancelAction }, hasBackdrop: true });
|
|
1487
|
+
return firstValueFrom(ref.closed);
|
|
1488
|
+
}
|
|
1489
|
+
open(templateOrComponent, config) {
|
|
1490
|
+
const defaults = this.defaultOptions || new MzDialogConfig();
|
|
1491
|
+
const options = { ...defaults, ...config };
|
|
1492
|
+
const dialogConfig = {
|
|
1493
|
+
panelClass: options.panelClass,
|
|
1494
|
+
hasBackdrop: options.hasBackdrop,
|
|
1495
|
+
backdropClass: options.backdropClass,
|
|
1496
|
+
disableClose: options.disableClose,
|
|
1497
|
+
width: options.width,
|
|
1498
|
+
height: options.height,
|
|
1499
|
+
minWidth: options.minWidth,
|
|
1500
|
+
minHeight: options.minHeight,
|
|
1501
|
+
maxWidth: options.maxWidth,
|
|
1502
|
+
maxHeight: options.maxHeight,
|
|
1503
|
+
data: options.data,
|
|
1504
|
+
autoFocus: options.autoFocus,
|
|
1505
|
+
restoreFocus: options.restoreFocus,
|
|
1506
|
+
closeOnNavigation: true,
|
|
1507
|
+
closeOnDestroy: true,
|
|
1508
|
+
closeOnOverlayDetachments: true,
|
|
1509
|
+
container: MzDialogContainer,
|
|
1510
|
+
};
|
|
1511
|
+
const ref = this.cdkDialog.open(templateOrComponent, dialogConfig);
|
|
1512
|
+
return ref;
|
|
1513
|
+
}
|
|
1514
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDialog, deps: [{ token: i0.Injector }, { token: MZ_DIALOG_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1515
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDialog, providedIn: 'root' }); }
|
|
1516
|
+
}
|
|
1517
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDialog, decorators: [{
|
|
1518
|
+
type: Injectable,
|
|
1519
|
+
args: [{
|
|
1520
|
+
providedIn: 'root',
|
|
1521
|
+
}]
|
|
1522
|
+
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1$5.DialogConfig, decorators: [{
|
|
1523
|
+
type: Optional
|
|
1524
|
+
}, {
|
|
1525
|
+
type: Inject,
|
|
1526
|
+
args: [MZ_DIALOG_DEFAULT_OPTIONS]
|
|
1527
|
+
}] }] });
|
|
1528
|
+
|
|
1529
|
+
class MzDialogModule {
|
|
1530
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1531
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: MzDialogModule, imports: [DialogModule, OverlayModule, MzDialogContainer, MzDialogHeader, MzDialogContent, MzDialogFooter, MzMessageDialog], exports: [DialogModule,
|
|
1532
|
+
MzDialogHeader,
|
|
1533
|
+
MzDialogContent,
|
|
1534
|
+
MzDialogFooter,
|
|
1535
|
+
MzDialogContainer,
|
|
1536
|
+
MzMessageDialog] }); }
|
|
1537
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDialogModule, providers: [MzDialog], imports: [DialogModule, OverlayModule, DialogModule] }); }
|
|
1538
|
+
}
|
|
1539
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDialogModule, decorators: [{
|
|
1540
|
+
type: NgModule,
|
|
1541
|
+
args: [{
|
|
1542
|
+
imports: [DialogModule, OverlayModule, MzDialogContainer, MzDialogHeader, MzDialogContent, MzDialogFooter, MzMessageDialog],
|
|
1543
|
+
exports: [
|
|
1544
|
+
DialogModule,
|
|
1545
|
+
MzDialogHeader,
|
|
1546
|
+
MzDialogContent,
|
|
1547
|
+
MzDialogFooter,
|
|
1548
|
+
MzDialogContainer,
|
|
1549
|
+
MzMessageDialog
|
|
1550
|
+
],
|
|
1551
|
+
providers: [MzDialog]
|
|
1552
|
+
}]
|
|
1553
|
+
}] });
|
|
1554
|
+
|
|
1311
1555
|
class FilterComponent {
|
|
1312
1556
|
constructor() {
|
|
1313
1557
|
this.label = 'Filter';
|
|
@@ -1475,5 +1719,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
|
|
|
1475
1719
|
* Generated bundle index. Do not edit.
|
|
1476
1720
|
*/
|
|
1477
1721
|
|
|
1478
|
-
export { AlertComponent, ButtonDirective, DateDisplayPipe, EnumDisplayPipe, FilterComponent, FilterMenuComponent, InfiniteScrollComponent, MZ_DATE_PIPE_DEFAULT_OPTIONS, MuziehComponentHarness, MuziehComponentsModule, MzDatePipe, MzDrawer, MzDrawerConfig, MzDrawerContainer, MzDrawerContent, MzDrawerFooter, MzDrawerHeader, MzDrawerModule, MzDrawerRef, MzInlineEditComponent, MzSpinner, OptionsFilterComponent, PageHeaderComponent, PageLoadingIndicatorComponent, PaginationComponent, PhoneNumberPipe, ResultTableComponent, ResultTableHarness, SVG_ICON_DEFAULT_OPTIONS, SortDirective, SortKeyDirective, SubjectDisplayPipe, SvgIconComponent, WizardProgressTrackerComponent, hasImplementation };
|
|
1722
|
+
export { AlertComponent, ButtonDirective, DateDisplayPipe, EnumDisplayPipe, FilterComponent, FilterMenuComponent, InfiniteScrollComponent, MZ_DATE_PIPE_DEFAULT_OPTIONS, MuziehComponentHarness, MuziehComponentsModule, MzButton, MzDatePipe, MzDialog, MzDialogContainer, MzDialogContent, MzDialogFooter, MzDialogHeader, MzDialogModule, MzDrawer, MzDrawerConfig, MzDrawerContainer, MzDrawerContent, MzDrawerFooter, MzDrawerHeader, MzDrawerModule, MzDrawerRef, MzInlineEditComponent, MzMessageDialog as MzMessageModal, MzSpinner, OptionsFilterComponent, PageHeaderComponent, PageLoadingIndicatorComponent, PaginationComponent, PhoneNumberPipe, ResultTableComponent, ResultTableHarness, SVG_ICON_DEFAULT_OPTIONS, SortDirective, SortKeyDirective, SubjectDisplayPipe, SvgIconComponent, WizardProgressTrackerComponent, hasImplementation };
|
|
1479
1723
|
//# sourceMappingURL=muziehdesign-components.mjs.map
|