@public-ui/components 1.1.13 → 1.1.14-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cheat-sheet.html +106 -104
- package/custom-elements.json +1 -1
- package/dist/cjs/{app-globals-0f6ccf65.js → app-globals-76ae34a9.js} +1 -1
- package/dist/cjs/{button-link-f68ce33a.js → button-link-47a047fc.js} +1 -1
- package/dist/cjs/{controller-c4dc4409.js → controller-250c33b0.js} +1 -1
- package/dist/cjs/{controller-add71662.js → controller-2a3bb69b.js} +1 -1
- package/dist/cjs/{controller-a351b42d.js → controller-71eb89c9.js} +1 -1
- package/dist/cjs/{controller-52f62e64.js → controller-99ca8214.js} +1 -1
- package/dist/cjs/{controller-21337531.js → controller-f9878fc6.js} +1 -1
- package/dist/cjs/{controller-e30426f7.js → controller-ff2c7079.js} +1 -1
- package/dist/cjs/{devtools-e98db728.js → devtools-34604ecc.js} +1 -1
- package/dist/cjs/{icon-6c067cd6.js → icon-797460dc.js} +1 -1
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/kol-abbr.cjs.entry.js +1 -1
- package/dist/cjs/kol-accordion.cjs.entry.js +1 -1
- package/dist/cjs/kol-alert.cjs.entry.js +1 -1
- package/dist/cjs/kol-badge.cjs.entry.js +1 -1
- package/dist/cjs/kol-breadcrumb.cjs.entry.js +1 -1
- package/dist/cjs/kol-button-link.cjs.entry.js +1 -1
- package/dist/cjs/kol-button-wc_3.cjs.entry.js +1 -1
- package/dist/cjs/kol-card.cjs.entry.js +1 -1
- package/dist/cjs/kol-details.cjs.entry.js +1 -1
- package/dist/cjs/kol-form.cjs.entry.js +1 -1
- package/dist/cjs/kol-icon.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-color.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-date.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-email.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-file.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-number.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-password.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-radio.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-range.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-text.cjs.entry.js +1 -1
- package/dist/cjs/kol-kolibri.cjs.entry.js +1 -1
- package/dist/cjs/kol-link-button.cjs.entry.js +1 -1
- package/dist/cjs/kol-link-group.cjs.entry.js +1 -1
- package/dist/cjs/kol-link-wc.cjs.entry.js +1 -1
- package/dist/cjs/kol-logo.cjs.entry.js +1 -1
- package/dist/cjs/kol-modal.cjs.entry.js +1 -1
- package/dist/cjs/kol-nav.cjs.entry.js +1 -1
- package/dist/cjs/kol-pagination.cjs.entry.js +1 -1
- package/dist/cjs/kol-progress.cjs.entry.js +1 -1
- package/dist/cjs/kol-select.cjs.entry.js +1 -1
- package/dist/cjs/kol-skip-nav.cjs.entry.js +1 -1
- package/dist/cjs/kol-span-wc.cjs.entry.js +1 -1
- package/dist/cjs/kol-spin.cjs.entry.js +1 -1
- package/dist/cjs/kol-symbol.cjs.entry.js +1 -1
- package/dist/cjs/kol-table.cjs.entry.js +1 -1
- package/dist/cjs/kol-tabs.cjs.entry.js +1 -1
- package/dist/cjs/kol-textarea.cjs.entry.js +1 -1
- package/dist/cjs/kol-toast.cjs.entry.js +1 -1
- package/dist/cjs/kol-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/kol-version.cjs.entry.js +1 -1
- package/dist/cjs/kolibri.cjs.js +1 -1
- package/dist/cjs/{label-1fb9fcd4.js → label-4275ff0e.js} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{prop.validators-4da58261.js → prop.validators-0257b98f.js} +1 -1
- package/dist/cjs/{tab-index-52d91e46.js → tab-index-a05fe504.js} +1 -1
- package/dist/cjs/validation-00b4c7b9.js +4 -0
- package/dist/cjs/{validation-88bbd833.js → validation-e37d4d60.js} +1 -1
- package/dist/components/prop.validators.js +1 -1
- package/dist/custom-elements/index.js +1 -1
- package/dist/esm/{app-globals-cf179254.js → app-globals-e2f7e846.js} +1 -1
- package/dist/esm/{button-link-5fecb7f7.js → button-link-037f13ca.js} +1 -1
- package/dist/esm/{controller-c04d8df8.js → controller-05a2f9b7.js} +1 -1
- package/dist/esm/{controller-ace59adb.js → controller-077364ce.js} +1 -1
- package/dist/esm/{controller-ae0107c8.js → controller-5f71a728.js} +1 -1
- package/dist/esm/{controller-f5524b9e.js → controller-650bbefa.js} +1 -1
- package/dist/esm/{controller-c8c56e3a.js → controller-8f43642b.js} +1 -1
- package/dist/esm/{controller-71a4e84b.js → controller-cb9b3214.js} +1 -1
- package/dist/esm/{devtools-4fcb886f.js → devtools-a9590957.js} +1 -1
- package/dist/esm/{icon-471e29ae.js → icon-63fac1a4.js} +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/kol-abbr.entry.js +1 -1
- package/dist/esm/kol-accordion.entry.js +1 -1
- package/dist/esm/kol-alert.entry.js +1 -1
- package/dist/esm/kol-badge.entry.js +1 -1
- package/dist/esm/kol-breadcrumb.entry.js +1 -1
- package/dist/esm/kol-button-link.entry.js +1 -1
- package/dist/esm/kol-button-wc_3.entry.js +1 -1
- package/dist/esm/kol-card.entry.js +1 -1
- package/dist/esm/kol-details.entry.js +1 -1
- package/dist/esm/kol-form.entry.js +1 -1
- package/dist/esm/kol-icon.entry.js +1 -1
- package/dist/esm/kol-input-checkbox.entry.js +1 -1
- package/dist/esm/kol-input-color.entry.js +1 -1
- package/dist/esm/kol-input-date.entry.js +1 -1
- package/dist/esm/kol-input-email.entry.js +1 -1
- package/dist/esm/kol-input-file.entry.js +1 -1
- package/dist/esm/kol-input-number.entry.js +1 -1
- package/dist/esm/kol-input-password.entry.js +1 -1
- package/dist/esm/kol-input-radio.entry.js +1 -1
- package/dist/esm/kol-input-range.entry.js +1 -1
- package/dist/esm/kol-input-text.entry.js +1 -1
- package/dist/esm/kol-kolibri.entry.js +1 -1
- package/dist/esm/kol-link-button.entry.js +1 -1
- package/dist/esm/kol-link-group.entry.js +1 -1
- package/dist/esm/kol-link-wc.entry.js +1 -1
- package/dist/esm/kol-logo.entry.js +1 -1
- package/dist/esm/kol-modal.entry.js +1 -1
- package/dist/esm/kol-nav.entry.js +1 -1
- package/dist/esm/kol-pagination.entry.js +1 -1
- package/dist/esm/kol-progress.entry.js +1 -1
- package/dist/esm/kol-select.entry.js +1 -1
- package/dist/esm/kol-skip-nav.entry.js +1 -1
- package/dist/esm/kol-span-wc.entry.js +1 -1
- package/dist/esm/kol-spin.entry.js +1 -1
- package/dist/esm/kol-symbol.entry.js +1 -1
- package/dist/esm/kol-table.entry.js +1 -1
- package/dist/esm/kol-tabs.entry.js +1 -1
- package/dist/esm/kol-textarea.entry.js +1 -1
- package/dist/esm/kol-toast.entry.js +1 -1
- package/dist/esm/kol-tooltip.entry.js +1 -1
- package/dist/esm/kol-version.entry.js +1 -1
- package/dist/esm/kolibri.js +1 -1
- package/dist/esm/{label-a11dc427.js → label-9d29cae2.js} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{prop.validators-be22b6b6.js → prop.validators-13dda64d.js} +1 -1
- package/dist/esm/{tab-index-07ad8cf8.js → tab-index-92fe8657.js} +1 -1
- package/dist/esm/validation-20917649.js +4 -0
- package/dist/esm/{validation-74ad7ccd.js → validation-33c8ce6d.js} +1 -1
- package/dist/kolibri/{app-globals-cf179254.js → app-globals-e2f7e846.js} +1 -1
- package/dist/kolibri/button-link-037f13ca.js +4 -0
- package/dist/kolibri/controller-05a2f9b7.js +4 -0
- package/dist/kolibri/{controller-ace59adb.js → controller-077364ce.js} +1 -1
- package/dist/kolibri/{controller-ae0107c8.js → controller-5f71a728.js} +1 -1
- package/dist/kolibri/{controller-f5524b9e.js → controller-650bbefa.js} +1 -1
- package/dist/kolibri/{controller-c8c56e3a.js → controller-8f43642b.js} +1 -1
- package/dist/kolibri/{controller-71a4e84b.js → controller-cb9b3214.js} +1 -1
- package/dist/kolibri/{devtools-4fcb886f.js → devtools-a9590957.js} +1 -1
- package/dist/kolibri/{icon-471e29ae.js → icon-63fac1a4.js} +1 -1
- package/dist/kolibri/index.esm.js +1 -1
- package/dist/kolibri/kol-abbr.entry.js +1 -1
- package/dist/kolibri/kol-accordion.entry.js +1 -1
- package/dist/kolibri/kol-alert.entry.js +1 -1
- package/dist/kolibri/kol-badge.entry.js +1 -1
- package/dist/kolibri/kol-breadcrumb.entry.js +1 -1
- package/dist/kolibri/kol-button-link.entry.js +1 -1
- package/dist/kolibri/kol-button-wc_3.entry.js +1 -1
- package/dist/kolibri/kol-card.entry.js +1 -1
- package/dist/kolibri/kol-details.entry.js +1 -1
- package/dist/kolibri/kol-form.entry.js +1 -1
- package/dist/kolibri/kol-icon.entry.js +1 -1
- package/dist/kolibri/kol-input-checkbox.entry.js +1 -1
- package/dist/kolibri/kol-input-color.entry.js +1 -1
- package/dist/kolibri/kol-input-date.entry.js +1 -1
- package/dist/kolibri/kol-input-email.entry.js +1 -1
- package/dist/kolibri/kol-input-file.entry.js +1 -1
- package/dist/kolibri/kol-input-number.entry.js +1 -1
- package/dist/kolibri/kol-input-password.entry.js +1 -1
- package/dist/kolibri/kol-input-radio.entry.js +1 -1
- package/dist/kolibri/kol-input-range.entry.js +1 -1
- package/dist/kolibri/kol-input-text.entry.js +1 -1
- package/dist/kolibri/kol-kolibri.entry.js +1 -1
- package/dist/kolibri/kol-link-button.entry.js +1 -1
- package/dist/kolibri/kol-link-group.entry.js +1 -1
- package/dist/kolibri/kol-link-wc.entry.js +1 -1
- package/dist/kolibri/kol-logo.entry.js +1 -1
- package/dist/kolibri/kol-modal.entry.js +1 -1
- package/dist/kolibri/kol-nav.entry.js +1 -1
- package/dist/kolibri/kol-pagination.entry.js +1 -1
- package/dist/kolibri/kol-progress.entry.js +1 -1
- package/dist/kolibri/kol-select.entry.js +1 -1
- package/dist/kolibri/kol-skip-nav.entry.js +1 -1
- package/dist/kolibri/kol-span-wc.entry.js +1 -1
- package/dist/kolibri/kol-spin.entry.js +1 -1
- package/dist/kolibri/kol-symbol.entry.js +1 -1
- package/dist/kolibri/kol-table.entry.js +1 -1
- package/dist/kolibri/kol-tabs.entry.js +1 -1
- package/dist/kolibri/kol-textarea.entry.js +1 -1
- package/dist/kolibri/kol-toast.entry.js +1 -1
- package/dist/kolibri/kol-tooltip.entry.js +1 -1
- package/dist/kolibri/kol-version.entry.js +1 -1
- package/dist/kolibri/kolibri.esm.js +1 -1
- package/dist/kolibri/{label-a11dc427.js → label-9d29cae2.js} +1 -1
- package/dist/kolibri/{prop.validators-be22b6b6.js → prop.validators-13dda64d.js} +1 -1
- package/dist/kolibri/{tab-index-07ad8cf8.js → tab-index-92fe8657.js} +1 -1
- package/dist/kolibri/{validation-a7aaf90a.js → validation-20917649.js} +1 -1
- package/dist/kolibri/validation-33c8ce6d.js +4 -0
- package/jest-test-results.json +1 -1
- package/package.json +1 -1
- package/dist/cjs/validation-38f45f90.js +0 -4
- package/dist/esm/validation-a7aaf90a.js +0 -4
- package/dist/kolibri/button-link-5fecb7f7.js +0 -4
- package/dist/kolibri/controller-c04d8df8.js +0 -4
- package/dist/kolibri/validation-74ad7ccd.js +0 -4
package/cheat-sheet.html
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
.then(() => {})
|
|
17
17
|
.catch(console.warn);
|
|
18
18
|
</script>
|
|
19
|
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/
|
|
19
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/a11y-light.min.css">
|
|
20
20
|
<style>
|
|
21
21
|
:root {
|
|
22
22
|
font-size: 10px;
|
|
@@ -55,43 +55,44 @@
|
|
|
55
55
|
}
|
|
56
56
|
</style>
|
|
57
57
|
</head>
|
|
58
|
-
<body
|
|
59
|
-
<
|
|
60
|
-
<kol-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
<
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
<
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
<
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
</
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
<
|
|
93
|
-
|
|
94
|
-
|
|
58
|
+
<body>
|
|
59
|
+
<main class="mapz" data-theme="mapz">
|
|
60
|
+
<kol-link _href="https://public-ui.github.io" _target="github">
|
|
61
|
+
<kol-kolibri _labelled="false"></kol-kolibri>
|
|
62
|
+
</kol-link>
|
|
63
|
+
<kol-heading>Cheat Sheet</kol-heading>
|
|
64
|
+
<p><strong><kol-abbr _title="Komponenten-Bibliothek für die Barrierefreiheit" _tooltip-align="right">KoliBri</kol-abbr></strong> ist eine <strong>barrierefreie Komponenten-Bibliothek</strong> die sich durch separate Themes an unterschiedliche <strong>Styleguides</strong> und <strong>Design Systeme</strong> anpassen lässt.</p>
|
|
65
|
+
<p><kol-icon _aria-label="" _icon="fa-solid fa-arrow-right"></kol-icon> Link zur ausführliche <kol-link _href="https://public-ui.github.io" _target="github">Dokumentation</kol-link></p>
|
|
66
|
+
<kol-heading _level="2">Integration</kol-heading>
|
|
67
|
+
<p>Für eine hohe Flexibilität werden alle Teile (HTML, CSS, Fonts usw.) per Komposition-Prinzip beliebig mit einander kombiniert. Damit alles korrekt funktioniert, müssen alle Teile einer spezifischen Komposition eingebunden bzw. konfiguriert werden. In den folgenden Unterabschnitten wird die Integration am Beispiel des MAPZ-Themes gezeigt.</p>
|
|
68
|
+
<kol-heading _level="3">Assets</kol-heading>
|
|
69
|
+
<p><strong>Fonts</strong> und <strong>Icon-Fonts</strong> müssen im <code class="language-html" style="background-color: #f3f3f3; padding: .25rem !important;"><head></code> der HTML-Seite eingebunden werden.</p>
|
|
70
|
+
<pre>
|
|
71
|
+
<code class="language-html"><head>
|
|
72
|
+
<link href="https://fonts.cdnfonts.com/css/roboto" rel="stylesheet" />
|
|
73
|
+
<link href="https://use.fontawesome.com/releases/v6.2.1/css/all.css" rel="stylesheet">
|
|
74
|
+
</head></code>
|
|
75
|
+
</pre>
|
|
76
|
+
<kol-heading _level="3">Loader</kol-heading>
|
|
77
|
+
<p>Mit <strong>KoliBri</strong> ist es möglich unterschiedliche Themes mit den Komponenten zu kombinieren. Die Verknüpfung erfolgt über die <strong>Register</strong>-Methode. Ihr können eine oder mehrere Loader für die Custom-Elements und Themes übergeben werden.</p>
|
|
78
|
+
<pre>
|
|
79
|
+
<code class="language-html"><head>
|
|
80
|
+
<script type="module">
|
|
81
|
+
import { register } from 'https://esm.sh/@public-ui/core';
|
|
82
|
+
import { defineCustomElements } from 'https://esm.sh/@public-ui/components/dist/loader';
|
|
83
|
+
import { MAPZ } from 'https://esm.sh/@public-ui/themes';
|
|
84
|
+
register([MAPZ], [defineCustomElements])
|
|
85
|
+
.then(() => {})
|
|
86
|
+
.catch(console.warn);
|
|
87
|
+
</script>
|
|
88
|
+
</head></code>
|
|
89
|
+
</pre>
|
|
90
|
+
<kol-heading _level="3">Config</kol-heading>
|
|
91
|
+
<p>Wenn ein Theme registriert wird, werden alle darin enthaltenen <strong>CSS-Properties</strong> unter dem Theme-Namen als CSS-Klasse im <code class="language-html" style="background-color: #f3f3f3; padding: .25rem !important;"><head></code> der HTML-Seite hinzugefügt. So wird es ermöglicht, dass diese CSS-Properties in eigenem CSS für das "umrahmende" HTML wiederverwendet werden können. Damit das funktioniert, muss die CSS-Klasse mit dem Theme-Namen z.B. am <code class="language-html" style="background-color: #f3f3f3; padding: .25rem !important;"><body></code> gesetzt werden.</p>
|
|
92
|
+
<pre>
|
|
93
|
+
<code class="language-html"><body class="mapz" data-theme="mapz">
|
|
94
|
+
...
|
|
95
|
+
</body></code>
|
|
95
96
|
</pre>
|
|
96
97
|
<kol-heading _level="3">VSCode</kol-heading>
|
|
97
98
|
<p>Im VSCode können die Meta-Informationen der Komponenten und deren Eigenschaften für die Autovervollständigung von HTML aktiviert werden.</p>
|
|
@@ -113,31 +114,31 @@
|
|
|
113
114
|
<code class="language-html"><kol-input-text _id="surname" _required _value="Mustermann">Surname</kol-input-text>
|
|
114
115
|
<kol-spin _show></kol-spin></code>
|
|
115
116
|
</pre>
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
117
|
+
<kol-heading _level="2">Components</kol-heading>
|
|
118
|
+
<p>In der folgenden Tabelle werden alle Komponenten erläutert und deren jeweiligen Eigenschaften aufgelistet.</p>
|
|
119
|
+
<kol-table id="components" _caption="Available components"></kol-table>
|
|
120
|
+
<script>
|
|
121
|
+
const componentTable = document.querySelector('kol-table#components');
|
|
122
|
+
componentTable._headers = {
|
|
123
|
+
horizontal: [[
|
|
124
|
+
{
|
|
125
|
+
label: 'Component',
|
|
126
|
+
key: 'name',
|
|
127
|
+
width: '10%'
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
label: 'Description',
|
|
131
|
+
key: 'desc',
|
|
132
|
+
width: '60%'
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
label: 'Related properties',
|
|
136
|
+
key: 'props',
|
|
137
|
+
width: '30%'
|
|
138
|
+
}
|
|
139
|
+
]]
|
|
140
|
+
};
|
|
141
|
+
componentTable._data = [{
|
|
141
142
|
name: `abbr`,
|
|
142
143
|
desc: `Die **Abbr**-Komponente implementiert den HTML-Tag 'abbr', wobei hier jedoch der Tooltip barrierefrei ist.
|
|
143
144
|
Der Tooltip für die Beschreibung wird bei Focus oder Hover der **Abbr**-Komponente angezeigt und vorgelesen.`,
|
|
@@ -370,38 +371,38 @@ Ein geöffneter Tooltip lässt sich mit der 'Escape'-Taste schließen, um ggf.
|
|
|
370
371
|
**Hinweis:** Damit der Tooltip korrekt ausgerichtet wird, muss für das vorrangehende Referenz-Element 'inline-block' gesetzt werden.`,
|
|
371
372
|
props: `_align, _id, _label`
|
|
372
373
|
},
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
374
|
+
];
|
|
375
|
+
</script>
|
|
376
|
+
<kol-heading _level="2">Properties</kol-heading>
|
|
377
|
+
<p>In der folgenden Tabelle werden alle Eigenschaften der Häufigkeit nach erläutert und jeweils die Komponenten aufgelistet, wo sie verwendet werden..</p>
|
|
378
|
+
<kol-table id="properties" _caption="Available properties"></kol-table>
|
|
379
|
+
<script>
|
|
380
|
+
const propertyTable = document.querySelector('kol-table#properties');
|
|
381
|
+
propertyTable._headers = {
|
|
382
|
+
horizontal: [[
|
|
383
|
+
{
|
|
384
|
+
label: 'Property',
|
|
385
|
+
key: 'name',
|
|
386
|
+
width: '10%'
|
|
387
|
+
},
|
|
388
|
+
{
|
|
389
|
+
label: 'Description',
|
|
390
|
+
key: 'desc',
|
|
391
|
+
width: '30%'
|
|
392
|
+
},
|
|
393
|
+
{
|
|
394
|
+
label: 'Type(s)',
|
|
395
|
+
key: 'types',
|
|
396
|
+
width: '30%'
|
|
397
|
+
},
|
|
398
|
+
{
|
|
399
|
+
label: 'Related component(s)',
|
|
400
|
+
key: 'comps',
|
|
401
|
+
width: '30%'
|
|
402
|
+
}
|
|
403
|
+
]]
|
|
404
|
+
};
|
|
405
|
+
propertyTable._data = [{
|
|
405
406
|
name: `_tab-index`,
|
|
406
407
|
desc: `Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)`,
|
|
407
408
|
types: `number`,
|
|
@@ -852,14 +853,15 @@ Ein geöffneter Tooltip lässt sich mit der 'Escape'-Taste schließen, um ggf.
|
|
|
852
853
|
types: `string`,
|
|
853
854
|
comps: `input-file`
|
|
854
855
|
},
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
856
|
+
];
|
|
857
|
+
</script>
|
|
858
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
|
859
|
+
<script>
|
|
860
|
+
document.querySelectorAll('pre > code').forEach(el => {
|
|
861
|
+
hljs.highlightElement(el);
|
|
862
|
+
});
|
|
863
|
+
</script>
|
|
864
|
+
<p style="text-align: center; margin:1rem 2rem 0 2rem;><strong><kol-abbr _title="Komponenten-Bibliothek für die Barrierefreiheit" _tooltip-align="right">KoliBri</kol-abbr></strong> ist unter der Lizenz <kol-link _href="https://github.com/public-ui/kolibri/blob/main/LICENSE" _target="eu"><strong>EUPL v1.2</strong></kol-link> lizenziert.</p>
|
|
865
|
+
</main>
|
|
864
866
|
</body>
|
|
865
867
|
</html>
|
package/custom-elements.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
"use strict";const index=require("./index-06f1dad8.js"),dev_utils=require("./dev.utils-a119191e.js"),index$1=require("./index-adbf25b5.js"),appGlobalScript=()=>{dev_utils.Log.info("\n,--. ,--. ,--. ,--. ,-----. ,--.\n| .' / ,---. | | `--' | |) /_ ,--.--. `--'\n| . ' | .-. | | | ,--. | .-. \\ | .--' ,--.\n| |\\ \\ | '-' | | | | | | '--' / | | | |\n`--' `--´ `---´ `--' `--' `------´ `--' `--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io\n",{forceLog:!0}),index.setMode((e=>(e.shadowRoot instanceof ShadowRoot&&index$1.setThemeStyle(e,index$1.getThemeDetails(e)),"default"))),Promise.resolve().then((function(){return require("./devtools-
|
|
4
|
+
"use strict";const index=require("./index-06f1dad8.js"),dev_utils=require("./dev.utils-a119191e.js"),index$1=require("./index-adbf25b5.js"),appGlobalScript=()=>{dev_utils.Log.info("\n,--. ,--. ,--. ,--. ,-----. ,--.\n| .' / ,---. | | `--' | |) /_ ,--.--. `--'\n| . ' | .-. | | | ,--. | .-. \\ | .--' ,--.\n| |\\ \\ | '-' | | | | | | '--' / | | | |\n`--' `--´ `---´ `--' `--' `------´ `--' `--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io\n",{forceLog:!0}),index.setMode((e=>(e.shadowRoot instanceof ShadowRoot&&index$1.setThemeStyle(e,index$1.getThemeDetails(e)),"default"))),Promise.resolve().then((function(){return require("./devtools-34604ecc.js")})).then((e=>{"object"==typeof e&&null!==e&&"function"==typeof e.initialize&&e.initialize()})).catch((e=>{dev_utils.Log.error(e)}))},globalScripts=appGlobalScript;exports.globalScripts=globalScripts;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
"use strict";const prop_validators=require("./prop.validators-
|
|
4
|
+
"use strict";const prop_validators=require("./prop.validators-0257b98f.js"),watchTooltipAlignment=(t,o,i)=>{prop_validators.watchValidator(t,o,(t=>"top"===t||"right"===t||"bottom"===t||"left"===t),new Set(["TooltipAlignment {top, right, buttom, left}"]),i,{defaultValue:"top"})};exports.watchTooltipAlignment=watchTooltipAlignment;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
"use strict";const prop_validators=require("./prop.validators-
|
|
4
|
+
"use strict";const prop_validators=require("./prop.validators-0257b98f.js"),validator=require("./validator-3162f24c.js"),controller=require("./controller-71eb89c9.js"),fillKeyOptionMap=(t,o,e="")=>{o.forEach(((o,i)=>{const a=`${e}-${i}`;"object"==typeof o&&null!==o&&"string"==typeof o.label&&o.label.length>0&&(Array.isArray(o.options)?fillKeyOptionMap(t,o.options,a):t.set(a,o))}))};class InputCheckboxRadioController extends controller.InputController{constructor(t,o){super(t,o),this.component=t}validateRequired(t){prop_validators.watchBoolean(this.component,"_required",t)}componentWillLoad(){super.componentWillLoad(),this.validateRequired(this.component._required)}}class InputRadioController extends InputCheckboxRadioController{constructor(t,o){super(t,o),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,o)=>void 0!==o.find((o=>"string"==typeof o.value&&o.value===t)),this.beforePatchListValue=(t,o)=>{const e=o.has("_list")?o.get("_list"):this.component.state._list;if(Array.isArray(e)&&e.length>0){this.keyOptionMap.clear(),fillKeyOptionMap(this.keyOptionMap,e);const t=o.has("_value")?o.get("_value"):this.component.state._value;if(!1===this.isValueInOptions(t,e)){const t=e[0].value;o.set("_value",t),this.onStateChange()}}},this.component=t}validateOrientation(t){prop_validators.watchValidator(this.component,"_orientation",(t=>"horizontal"===t||"vertical"===t),new Set(["Orientation {horizontal, vertical}"]),t,{defaultValue:"vertical"})}validateList(t){prop_validators.watchJsonArrayString(this.component,"_list",(t=>"object"==typeof t&&null!==t&&"string"==typeof t.label&&t.label.length>0),t,void 0,{hooks:{beforePatch:this.beforePatchListValue}})}validateValue(t){prop_validators.setState(this.component,"_value",t,{beforePatch:this.beforePatchListValue})}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const o=setTimeout((()=>{clearTimeout(o),t(validator.STATE_CHANGE_EVENT)}))}},this.validateOrientation(this.component._orientation),this.validateList(this.component._list),this.validateValue(this.component._value)}}exports.InputCheckboxRadioController=InputCheckboxRadioController,exports.InputRadioController=InputRadioController,exports.fillKeyOptionMap=fillKeyOptionMap;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
"use strict";const a11y_tipps=require("./a11y.tipps-df3024df.js"),prop_validators=require("./prop.validators-
|
|
4
|
+
"use strict";const a11y_tipps=require("./a11y.tipps-df3024df.js"),prop_validators=require("./prop.validators-0257b98f.js"),controller=require("./controller-71eb89c9.js");class InputPasswordController extends controller.InputController{constructor(e,t){super(e,t),this.handleHiddenLabelAndRequired=()=>{!0===this.component.state._hideLabel&&!0===this.component.state._required?(a11y_tipps.devHint("[KolInput*] Wenn man das Label ausblendet, dann kann der sehende Nutzer:in nicht mehr erkennen, ob die Eingabe erforderlich ist."),this.hideLabel=!1):this.hideLabel=!0===this.component.state._hideLabel},this.component=e}validateAutoComplete(e){prop_validators.watchValidator(this.component,"_autoComplete",(e=>"string"==typeof e&&("on"===e||"off"===e)),new Set(["on | off"]),e)}validateHideLabel(e){prop_validators.watchBoolean(this.component,"_hideLabel",e,{hooks:{afterPatch:this.handleHiddenLabelAndRequired}})}validateMaxLength(e){prop_validators.watchNumber(this.component,"_maxLength",e,{min:0})}validatePattern(e){prop_validators.watchString(this.component,"_pattern",e)}validatePlaceholder(e){prop_validators.watchString(this.component,"_placeholder",e)}validateReadOnly(e){prop_validators.watchBoolean(this.component,"_readOnly",e)}validateRequired(e){prop_validators.watchBoolean(this.component,"_required",e,{hooks:{afterPatch:this.handleHiddenLabelAndRequired}})}validateSize(e){prop_validators.watchNumber(this.component,"_size",e,{min:1})}validateValue(e){prop_validators.watchString(this.component,"_value",e)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMaxLength(this.component._maxLength),this.validatePattern(this.component._pattern),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateSize(this.component._size),this.validateValue(this.component._value)}onBlur(e){this.component.state=Object.assign(Object.assign({},this.component.state),{_placeholder:this.placeholderCache}),this.placeholderCache=void 0,super.onBlur(e)}onFocus(e){this.placeholderCache=this.component.state._placeholder,this.component.state=Object.assign(Object.assign({},this.component.state),{_placeholder:void 0}),super.onFocus(e)}}exports.InputPasswordController=InputPasswordController;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
"use strict";const a11y_tipps=require("./a11y.tipps-df3024df.js"),prop_validators=require("./prop.validators-
|
|
4
|
+
"use strict";const a11y_tipps=require("./a11y.tipps-df3024df.js"),prop_validators=require("./prop.validators-0257b98f.js"),validator=require("./validator-3162f24c.js"),icon=require("./icon-797460dc.js"),tabIndex=require("./tab-index-a05fe504.js"),getRenderStates=t=>{const o="string"==typeof t._error&&t._error.length>0&&!0===t._touched,n="string"==typeof t._hint&&t._hint.length>0,e=[];return!0===o&&e.push(`${t._id}-error`),!0===n&&e.push(`${t._id}-hint`),{hasError:o,hasHint:n,ariaDiscribedBy:e}};class ControlledInputController{constructor(t,o){this.component=t,this.name=o}validateAlert(t){prop_validators.watchBoolean(this.component,"_alert",t)}validateTouched(t){prop_validators.watchBoolean(this.component,"_touched",t)}componentWillLoad(){this.validateAlert(this.component._alert),this.validateTouched(this.component._touched)}}const beforePatchIcon=(t,o)=>{const n=t;"object"==typeof n&&null!==n&&(validator.isString(n.right,1)&&(n.right={icon:n.right}),validator.isString(n.left,1)&&(n.left={icon:n.left}),o.set("_icon",n))};class InputController extends ControlledInputController{constructor(t,o){super(t,o),this.hideLabel=!1,this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this)},this.component=t}validateAccessKey(t){prop_validators.watchString(this.component,"_accessKey",t)}validateAdjustHeight(t){prop_validators.watchBoolean(this.component,"_adjustHeight",t)}validateDisabled(t){prop_validators.watchBoolean(this.component,"_disabled",t),!0===t&&a11y_tipps.a11yHintDisabled()}validateError(t){prop_validators.watchString(this.component,"_error",t)}validateHideLabel(t){prop_validators.watchBoolean(this.component,"_hideLabel",t)}validateHint(t){prop_validators.watchString(this.component,"_hint",t)}validateIcon(t){prop_validators.objectObjectHandler(t,(()=>{try{t=prop_validators.parseJson(t)}catch(t){}prop_validators.watchValidator(this.component,"_icon",(t=>"object"==typeof t&&null!==t&&(validator.isString(t.left,1)||icon.isIcon(t.left)||validator.isString(t.right,1)||icon.isIcon(t.right))),new Set(["KoliBriInputIcon"]),t,{hooks:{beforePatch:beforePatchIcon},required:!0})}))}validateId(t){prop_validators.watchString(this.component,"_id",t),void 0===t&&a11y_tipps.devHint("Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.")}validateName(t){prop_validators.watchString(this.component,"_name",t),void 0===t&&a11y_tipps.devHint("Ein Name an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die Autocomplete-Funktion des Eingabefeldes relevant sein.")}validateOn(t){"object"==typeof t&&prop_validators.setState(this.component,"_on",t)}validateSmartButton(t){prop_validators.objectObjectHandler(t,(()=>{try{t=prop_validators.parseJson(t)}catch(t){}prop_validators.setState(this.component,"_smartButton",t)}))}validateTabIndex(t){tabIndex.validateTabIndex(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateError(this.component._error),this.validateDisabled(this.component._disabled),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateIcon(this.component._icon),this.validateId(this.component._id),this.validateName(this.component._name),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex)}onBlur(t){var o;this.component._alert=!0,this.component._touched=!0,"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onBlur)&&this.component._on.onBlur(t)}onChange(t){var o;"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onChange)&&this.component._on.onChange(t,t.target.value)}onClick(t){var o;"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onClick)&&this.component._on.onClick(t)}onFocus(t){var o;this.component._alert=!0,"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onFocus)&&this.component._on.onFocus(t)}setValue(t,o){var n;"function"==typeof(null===(n=this.component._on)||void 0===n?void 0:n.onChange)&&this.component._on.onChange(t,o)}}exports.InputController=InputController,exports.getRenderStates=getRenderStates;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
"use strict";const prop_validators=require("./prop.validators-
|
|
4
|
+
"use strict";const prop_validators=require("./prop.validators-0257b98f.js"),watchButtonType=(t,a,o)=>{prop_validators.watchValidator(t,a,(t=>"button"===t||"reset"===t||"submit"===t),new Set(["KoliBriButtonType {button, reset, submit}"]),o)},watchButtonVariant=(t,a,o)=>{prop_validators.watchValidator(t,a,(t=>"primary"===t||"secondary"===t||"normal"===t||"danger"===t||"ghost"===t||"custom"===t),new Set(["KoliBriButtonVariant {primary, secondary, normal, danger, ghost, custom}"]),o,{defaultValue:"normal"})};exports.watchButtonType=watchButtonType,exports.watchButtonVariant=watchButtonVariant;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
"use strict";const prop_validators=require("./prop.validators-
|
|
4
|
+
"use strict";const prop_validators=require("./prop.validators-0257b98f.js"),controller=require("./controller-2a3bb69b.js");class InputTextEmailController extends controller.InputPasswordController{constructor(t,o){super(t,o),this.component=t}validateList(t){prop_validators.watchJsonArrayString(this.component,"_list",(t=>"string"==typeof t),t)}componentWillLoad(){super.componentWillLoad(),this.validateList(this.component._list)}}class InputTextController extends InputTextEmailController{constructor(t,o){super(t,o),this.hasError=!1,this.hasList=!1,this.component=t}validateType(t){prop_validators.watchValidator(this.component,"_type",(t=>"string"==typeof t&&("text"===t||"search"===t||"url"===t||"tel"===t)),new Set(["String {text, search, url, tel}"]),t)}componentWillLoad(){super.componentWillLoad(),this.validateType(this.component._type)}}exports.InputTextController=InputTextController,exports.InputTextEmailController=InputTextEmailController;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
"use strict";const prop_validators=require("./prop.validators-
|
|
4
|
+
"use strict";const prop_validators=require("./prop.validators-0257b98f.js"),propergateResetEventToForm=(o={})=>{for(;o.form instanceof HTMLElement&&"FORM"!==o.form.tagName&&"KOL-FORM"!==o.form.tagName;)o.form.parentElement instanceof HTMLElement?o.form=o.form.parentElement:o.form.parentNode instanceof ShadowRoot?o.form=o.form.parentNode.host:o.form=null;if(o.form instanceof HTMLElement){const e=new Event("reset",{bubbles:!0,cancelable:!0});if("FORM"===o.form.tagName)prop_validators.setEventTargetAndStopPropagation(e,o.form),o.form.dispatchEvent(e);else if("KOL-FORM"===o.form.tagName){prop_validators.setEventTargetAndStopPropagation(e,prop_validators.KoliBriDevHelper.querySelector("form",o.form));const t=o.form;"object"==typeof t._on&&null!==typeof t._on&&"function"==typeof t._on.onReset&&t._on.onReset(e)}}},propergateSubmitEventToForm=(o={})=>{for(;o.form instanceof HTMLElement&&"FORM"!==o.form.tagName&&"KOL-FORM"!==o.form.tagName;)o.form.parentElement instanceof HTMLElement?o.form=o.form.parentElement:o.form.parentNode instanceof ShadowRoot?o.form=o.form.parentNode.host:o.form=null;if(o.form instanceof HTMLElement){const e=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:o.form});if("FORM"===o.form.tagName)prop_validators.setEventTargetAndStopPropagation(e,o.form),o.form.dispatchEvent(e);else if("KOL-FORM"===o.form.tagName){prop_validators.setEventTargetAndStopPropagation(e,prop_validators.KoliBriDevHelper.querySelector("form",o.form));const t=o.form;"object"==typeof t._on&&null!==typeof t._on&&"function"==typeof t._on.onSubmit&&t._on.onSubmit(e)}}};exports.propergateResetEventToForm=propergateResetEventToForm,exports.propergateSubmitEventToForm=propergateSubmitEventToForm;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
"use strict";const dev_utils=require("./dev.utils-a119191e.js"),prop_validators=require("./prop.validators-
|
|
4
|
+
"use strict";const dev_utils=require("./dev.utils-a119191e.js"),prop_validators=require("./prop.validators-0257b98f.js");function prototypeKoliBri(t,i){try{Object.defineProperty(dev_utils.KoliBri,t,{get:function(){return i}})}catch(i){dev_utils.Log.debug(`KoliBri property ${t} is already bind.`)}}require("./index.m-21aa1255.js"),require("./a11y.tipps-df3024df.js"),require("./index-adbf25b5.js");const initialize=()=>{if(dev_utils.initKoliBri(),dev_utils.getDevMode()){dev_utils.renderDevAdvice(),prototypeKoliBri("a11yColorContrast",prop_validators.koliBriA11yColorContrast),prototypeKoliBri("querySelector",prop_validators.koliBriQuerySelector),prototypeKoliBri("querySelectorAll",prop_validators.koliBriQuerySelectorAll),prototypeKoliBri("querySelectorColors",prop_validators.koliBriQuerySelectorColors),prototypeKoliBri("utils",(function(){return prop_validators.KoliBriUtils})),prototypeKoliBri("parseJson",prop_validators.parseJson),prototypeKoliBri("stringifyJson",prop_validators.stringifyJson);const t=dev_utils.getDocument().body,i=dev_utils.getDocument().createElement("svg");if(i.setAttribute("aria-label","KoliBri-DevTools"),i.setAttribute("xmlns","http://www.w3.org/2000/svg"),i.setAttribute("role","toolbar"),i.setAttribute("style","position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;"),i.innerHTML='<svg\n xmlns="http://www.w3.org/2000/svg"\n width="50"\n height="50"\n viewBox="0 0 600 600"\n>\n <path d="M353 322L213 304V434L353 322Z" fill="#047" />\n <path d="M209 564V304L149 434L209 564Z" fill="#047" />\n <path d="M357 316L417 250L361 210L275 244L357 316Z" fill="#047" />\n <path d="M353 318L35 36L213 300L353 318Z" fill="#047" />\n <path d="M329 218L237 92L250 222L272 241L329 218Z" fill="#047" />\n <path d="M391 286L565 272L421 252L391 286Z" fill="#047" />\n</svg>',dev_utils.getDocument().body.appendChild(i),dev_utils.getColorContrastAnalysis()){dev_utils.Log.debug("Color-Contrast-Analysis activated");const i=setTimeout((()=>{clearTimeout(i),setInterval((()=>{prop_validators.KoliBriUtils.queryHtmlElementColors(dev_utils.getDocument().createElement("div"),prop_validators.koliBriA11yColorContrast(t),!1,!1)}),1e4)}),2500)}else dev_utils.Log.debug("Color-Contrast-Analysis not activated")}};exports.initialize=initialize;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
"use strict";const a11y_tipps=require("./a11y.tipps-df3024df.js"),prop_validators=require("./prop.validators-
|
|
4
|
+
"use strict";const a11y_tipps=require("./a11y.tipps-df3024df.js"),prop_validators=require("./prop.validators-0257b98f.js"),validator=require("./validator-3162f24c.js"),mapCustomIcon=(t,o,i)=>{validator.isObject(i)?t[o]=i:validator.isString(i,1)&&(t[o]={icon:i})},mapIconProp2State=(t,o)=>{let i={};if(validator.isString(t,1))if("right"===o)i={right:{icon:t}};else i={left:{icon:t}};else"object"==typeof t&&null!==t&&(mapCustomIcon(i,"top",t.top),mapCustomIcon(i,"right",t.right),mapCustomIcon(i,"bottom",t.bottom),mapCustomIcon(i,"left",t.left));return i},beforePatchIcon=t=>{var o,i,e,n,a,r,l;if(null===(o=t.nextState)||void 0===o?void 0:o.has("_icon")){const o=null===(i=t.nextState)||void 0===i?void 0:i.get("_icon"),a=(null===(e=t.nextState)||void 0===e?void 0:e.get("_iconAlign"))||t.state._iconAlign;null===(n=t.nextState)||void 0===n||n.set("_icon",mapIconProp2State(o,a))}else if(null===(a=t.nextState)||void 0===a?void 0:a.has("_iconAlign")){const o=t.state._iconAlign;null===(r=t.nextState)||void 0===r||r.set("_icon",{[o]:void 0,[null===(l=t.nextState)||void 0===l?void 0:l.get("_iconAlign")]:t.state._icon[o]})}},isIcon=t=>"object"==typeof t&&null!==t&&(void 0===t.style||validator.isStyle(t.style))&&validator.isString(t.icon,1),validateIcon=(t,o)=>{prop_validators.objectObjectHandler(o,(()=>{try{o=prop_validators.parseJson(o)}catch(t){}prop_validators.watchValidator(t,"_icon",(t=>null===t||validator.isString(t,1)||"object"==typeof t&&null!==t&&(validator.isString(t.left,1)||isIcon(t.left)||validator.isString(t.right,1)||isIcon(t.right)||validator.isString(t.top,1)||isIcon(t.top)||validator.isString(t.bottom,1)||isIcon(t.bottom))),new Set(["KoliBriIcon"]),o,{hooks:{beforePatch:(o,i)=>{null===o&&i.set("_icon",{}),beforePatchIcon(t)}},required:!0})}))},watchIconAlign=(t,o)=>{a11y_tipps.deprecatedHint("Das Property _icon-align bzw. _iconAlign ist veraltet. Die Ausrichtung der Icon's kann jetzt direkt über das _icon-Property vorgenommen werden. (v1.1.10: https://public-ui.github.io/?path=/story/backlog-und-changelog--page)"),prop_validators.watchValidator(t,"_iconAlign",(t=>"left"===t||"right"===t),new Set(["Alignment {left, right, top, bottom}"]),o,{hooks:{beforePatch:()=>{beforePatchIcon(t)}}})};exports.isIcon=isIcon,exports.validateIcon=validateIcon,exports.watchIconAlign=watchIconAlign;
|
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const bund=require("./bund-e238647c.js"),dev_utils=require("./dev.utils-a119191e.js"),prop_validators=require("./prop.validators-
|
|
4
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const bund=require("./bund-e238647c.js"),dev_utils=require("./dev.utils-a119191e.js"),prop_validators=require("./prop.validators-0257b98f.js");require("./index.m-21aa1255.js"),require("./a11y.tipps-df3024df.js"),require("./index-adbf25b5.js"),exports.BUNDESAEMTER=bund.BUNDESAEMTER,exports.BUNDESANSTALTEN=bund.BUNDESANSTALTEN,exports.BUNDESMINISTERIEN=bund.BUNDESMINISTERIEN,exports.BUND_LOGO_TEXT_MAP=bund.BUND_LOGO_TEXT_MAP,Object.defineProperty(exports,"Bundesamt",{enumerable:!0,get:function(){return bund.Bundesamt}}),Object.defineProperty(exports,"Bundesanstalt",{enumerable:!0,get:function(){return bund.Bundesanstalt}}),Object.defineProperty(exports,"Bundesministerium",{enumerable:!0,get:function(){return bund.Bundesministerium}}),exports.ToasterService=dev_utils.ToasterService,exports.configKoliBri=dev_utils.configKoliBri,exports.KoliBriDevHelper=prop_validators.KoliBriDevHelper;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-06f1dad8.js"),buttonLink=require("./button-link-
|
|
4
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-06f1dad8.js"),buttonLink=require("./button-link-47a047fc.js"),prop_validators=require("./prop.validators-0257b98f.js");require("./index.m-21aa1255.js"),require("./a11y.tipps-df3024df.js"),require("./dev.utils-a119191e.js"),require("./index-adbf25b5.js");const defaultStyleCss='*,::before,::after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--kolibri-border-color)}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:var(--kolibri-color);--tw-ring-color:rgba(undefined, 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::moz-focus-inner{border-style:none;padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=\'search\']{-webkit-appearance:textfield;outline-offset:-2px}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}button,select{text-transform:none}button,[type=\'button\'],[type=\'reset\'],[type=\'submit\']{-webkit-appearance:button}button{background-color:transparent;background-image:none}button,[role="button"]{cursor:pointer}code{font-size:1em;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}fieldset{margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}h1,p,h2,h3,h4,h5,h6{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}input,button,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;padding:0;line-height:inherit;color:inherit}input::placeholder{opacity:1;color:#9ca3af}input::webkit-input-placeholder{opacity:1;color:#9ca3af}input::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder{opacity:1;color:#9ca3af}input::-ms-input-placeholder{opacity:1;color:#9ca3af}legend{padding:0}progress{vertical-align:baseline}small{font-size:80%}svg{display:block;vertical-align:middle}table{text-indent:0;border-color:inherit;border-collapse:collapse}textarea{resize:vertical}textarea::placeholder{opacity:1;color:#9ca3af}textarea::webkit-input-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}textarea::-ms-input-placeholder{opacity:1;color:#9ca3af}ul,ol{list-style:none;margin:0;padding:0}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.bg-normal{background-color:var(--kolibri-color-normal)}.bg-white{--tw-bg-opacity:1;background-color:rgba(255, 255, 255, var(--tw-bg-opacity))}.bg-spin-1{background-color:var(--kolibri-color-spin-1)}.bg-spin-2{background-color:var(--kolibri-color-spin-2)}.bg-spin-3{background-color:var(--kolibri-color-spin-3)}.rounded{border-radius:var(--kolibri-border-radius)}.border-1{border-width:1px}.cursor-pointer{cursor:pointer}.block{display:block}.inline-block{display:inline-block}.flex{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.inline-flex{display:-webkit-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex}.table{display:table}.grid{display:-ms-grid;display:grid}.hidden{display:none}.flex-wrap{-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}.items-center{-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.content-center{-ms-flex-line-pack:center;-webkit-align-content:center;align-content:center}.float-left{float:left}.h-full{height:100%}.h-0{height:0px}.h-0\\.41c-2\\.42\\2c 0-4\\.82-1\\.57-4\\.82-3\\.58c0\\.05-0\\.98\\2c 0\\.43-1\\.91\\2c 1\\.07-2\\.65c0\\.3\\2c 0\\.05\\2c 0\\.61\\2c 0\\.09\\2c 0\\.92\\2c 0\\.09c1\\.1\\2c 0\\2c 1\\.69-0\\.58\\2c 1\\.74-1\\.16{height:0.29rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.leading-normal{line-height:1.5}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.list-decimal{list-style-type:decimal}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:calc(1 * var(--kolibri-spacing))}.mr-2{margin-right:calc(2 * var(--kolibri-spacing))}.ml-2{margin-left:calc(2 * var(--kolibri-spacing))}.mt-2{margin-top:calc(2 * var(--kolibri-spacing))}.mt-4{margin-top:calc(4 * var(--kolibri-spacing))}.outline{outline-style:solid}.overflow-y-visible{overflow-y:visible}.px{padding-left:1px;padding-right:1px}.pl-8{padding-left:2rem}.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4}.absolute{position:absolute}.text-center{text-align:center}.text-normal{color:var(--kolibri-color-normal)}.hover\\:text-primary:hover{color:var(--kolibri-color-primary)}.italic{font-style:italic}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.indent{text-indent:1.5rem}.visible{visibility:visible}.w-full{width:100%}.w-4\\/5{width:80%}.z-50{z-index:50}.gap-1{grid-gap:calc(1 * var(--kolibri-spacing));gap:calc(1 * var(--kolibri-spacing))}.grid-flow-col{grid-auto-flow:column}.animate{-webkit-animation-iteration-count:1;animation-iteration-count:1}.filter{--tw-blur:var(--tw-empty, );--tw-brightness:var(--tw-empty, );--tw-contrast:var(--tw-empty, );--tw-grayscale:var(--tw-empty, );--tw-hue-rotate:var(--tw-empty, );--tw-invert:var(--tw-empty, );--tw-saturate:var(--tw-empty, );--tw-sepia:var(--tw-empty, );--tw-drop-shadow:var(--tw-empty, );-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}:host *{-ms-hyphens:var(--kolibri-hyphens);-webkit-hyphens:var(--kolibri-hyphens);hyphens:var(--kolibri-hyphens);font-family:var(--kolibri-font-family);line-height:var(--kolibri-line-height);word-break:break-word}:host abbr{cursor:help}:host abbr *{display:inline-flex}',KolAbbr=class{constructor(t){index.registerInstance(this,t),this._tooltipAlign="top",this._title=void 0,this.state={_title:"",_tooltipAlign:"top"}}render(){return index.h(index.Host,{style:{display:"inline-block"}},index.h("abbr",{title:this.state._title},index.h("span",{title:""},index.h("slot",null))),index.h("kol-tooltip",{_align:this.state._tooltipAlign,_label:this.state._title}))}validateTitle(t){prop_validators.watchString(this,"_title",t,{required:!0})}validateTooltipAlign(t){buttonLink.watchTooltipAlignment(this,"_tooltipAlign",t)}componentWillLoad(){this.validateTitle(this._title),this.validateTooltipAlign(this._tooltipAlign)}static get watchers(){return{_title:["validateTitle"],_tooltipAlign:["validateTooltipAlign"]}}};KolAbbr.style={default:defaultStyleCss},exports.kol_abbr=KolAbbr;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-06f1dad8.js"),a11y_tipps=require("./a11y.tipps-df3024df.js"),prop_validators=require("./prop.validators-
|
|
4
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-06f1dad8.js"),a11y_tipps=require("./a11y.tipps-df3024df.js"),prop_validators=require("./prop.validators-0257b98f.js"),validation=require("./validation-e37d4d60.js");require("./dev.utils-a119191e.js"),require("./index.m-21aa1255.js"),require("./index-adbf25b5.js");const defaultStyleCss='*,::before,::after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--kolibri-border-color)}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:var(--kolibri-color);--tw-ring-color:rgba(undefined, 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::moz-focus-inner{border-style:none;padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=\'search\']{-webkit-appearance:textfield;outline-offset:-2px}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}button,select{text-transform:none}button,[type=\'button\'],[type=\'reset\'],[type=\'submit\']{-webkit-appearance:button}button{background-color:transparent;background-image:none}button,[role="button"]{cursor:pointer}code{font-size:1em;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}fieldset{margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}h1,p,h2,h3,h4,h5,h6{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}input,button,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;padding:0;line-height:inherit;color:inherit}input::placeholder{opacity:1;color:#9ca3af}input::webkit-input-placeholder{opacity:1;color:#9ca3af}input::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder{opacity:1;color:#9ca3af}input::-ms-input-placeholder{opacity:1;color:#9ca3af}legend{padding:0}progress{vertical-align:baseline}small{font-size:80%}svg{display:block;vertical-align:middle}table{text-indent:0;border-color:inherit;border-collapse:collapse}textarea{resize:vertical}textarea::placeholder{opacity:1;color:#9ca3af}textarea::webkit-input-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}textarea::-ms-input-placeholder{opacity:1;color:#9ca3af}ul,ol{list-style:none;margin:0;padding:0}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.bg-normal{background-color:var(--kolibri-color-normal)}.bg-white{--tw-bg-opacity:1;background-color:rgba(255, 255, 255, var(--tw-bg-opacity))}.bg-spin-1{background-color:var(--kolibri-color-spin-1)}.bg-spin-2{background-color:var(--kolibri-color-spin-2)}.bg-spin-3{background-color:var(--kolibri-color-spin-3)}.rounded{border-radius:var(--kolibri-border-radius)}.border-1{border-width:1px}.cursor-pointer{cursor:pointer}.block{display:block}.inline-block{display:inline-block}.flex{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.inline-flex{display:-webkit-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex}.table{display:table}.grid{display:-ms-grid;display:grid}.hidden{display:none}.flex-wrap{-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}.items-center{-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.content-center{-ms-flex-line-pack:center;-webkit-align-content:center;align-content:center}.float-left{float:left}.h-full{height:100%}.h-0{height:0px}.h-0\\.41c-2\\.42\\2c 0-4\\.82-1\\.57-4\\.82-3\\.58c0\\.05-0\\.98\\2c 0\\.43-1\\.91\\2c 1\\.07-2\\.65c0\\.3\\2c 0\\.05\\2c 0\\.61\\2c 0\\.09\\2c 0\\.92\\2c 0\\.09c1\\.1\\2c 0\\2c 1\\.69-0\\.58\\2c 1\\.74-1\\.16{height:0.29rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.leading-normal{line-height:1.5}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.list-decimal{list-style-type:decimal}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:calc(1 * var(--kolibri-spacing))}.mr-2{margin-right:calc(2 * var(--kolibri-spacing))}.ml-2{margin-left:calc(2 * var(--kolibri-spacing))}.mt-2{margin-top:calc(2 * var(--kolibri-spacing))}.mt-4{margin-top:calc(4 * var(--kolibri-spacing))}.outline{outline-style:solid}.overflow-y-visible{overflow-y:visible}.px{padding-left:1px;padding-right:1px}.pl-8{padding-left:2rem}.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4}.absolute{position:absolute}.text-center{text-align:center}.text-normal{color:var(--kolibri-color-normal)}.hover\\:text-primary:hover{color:var(--kolibri-color-primary)}.italic{font-style:italic}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.indent{text-indent:1.5rem}.visible{visibility:visible}.w-full{width:100%}.w-4\\/5{width:80%}.z-50{z-index:50}.gap-1{grid-gap:calc(1 * var(--kolibri-spacing));gap:calc(1 * var(--kolibri-spacing))}.grid-flow-col{grid-auto-flow:column}.animate{-webkit-animation-iteration-count:1;animation-iteration-count:1}.filter{--tw-blur:var(--tw-empty, );--tw-brightness:var(--tw-empty, );--tw-contrast:var(--tw-empty, );--tw-grayscale:var(--tw-empty, );--tw-hue-rotate:var(--tw-empty, );--tw-invert:var(--tw-empty, );--tw-saturate:var(--tw-empty, );--tw-sepia:var(--tw-empty, );--tw-drop-shadow:var(--tw-empty, );-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}:host *{-ms-hyphens:var(--kolibri-hyphens);-webkit-hyphens:var(--kolibri-hyphens);hyphens:var(--kolibri-hyphens);font-family:var(--kolibri-font-family);line-height:var(--kolibri-line-height);word-break:break-word}';a11y_tipps.featureHint("[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend"),a11y_tipps.featureHint("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const KolAccordion=class{constructor(e){index.registerInstance(this,e),this.catchAriaExpanded=e=>{e instanceof HTMLButtonElement&&(this.buttonRef=e)},this.triggerAriaExpanded=e=>{e.setAttribute("aria-expanded",this.state._open?"true":"false")},this.onClick=e=>{this._open=!1===this._open;const t=setTimeout((()=>{var i;clearTimeout(t),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i.onClick)&&this.state._on.onClick(e,!0===this._open),this.buttonRef instanceof HTMLButtonElement&&this.triggerAriaExpanded(this.buttonRef)}))},this._heading=void 0,this._level=1,this._on=void 0,this._open=!1,this.state={_heading:"⚠"}}render(){return index.h(index.Host,null,index.h("div",{part:"accordion "+(this.state._open?"open":"close")},index.h("kol-heading-wc",{_level:this.state._level},index.h("button",{ref:this.catchAriaExpanded,onClick:this.onClick},index.h("kol-icon",{_ariaLabel:"",_icon:this.state._open?"fa-solid fa-minus":"fa-solid fa-plus",_part:this.state._open?"close":"open"}),index.h("span",null,this.state._heading))),index.h("div",{part:"header"},index.h("slot",{name:"header"})),index.h("div",{part:"content",style:!1===this.state._open?{display:"none",height:"0",visibility:"hidden"}:void 0},index.h("slot",{name:"content"}))))}validateHeading(e){prop_validators.watchString(this,"_heading",e,{required:!0})}validateLevel(e){validation.watchHeadingLevel(this,e)}validateOn(e){"object"==typeof e&&null!==e&&"function"==typeof e.onClick&&prop_validators.setState(this,"_on",e)}validateOpen(e){prop_validators.watchBoolean(this,"_open",e)}componentWillLoad(){this.validateHeading(this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}static get watchers(){return{_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};KolAccordion.style={default:defaultStyleCss},exports.kol_accordion=KolAccordion;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-06f1dad8.js"),dev_utils=require("./dev.utils-a119191e.js"),prop_validators=require("./prop.validators-4da58261.js"),validation=require("./validation-88bbd833.js"),a11y_tipps=require("./a11y.tipps-df3024df.js");require("./index.m-21aa1255.js"),require("./index-adbf25b5.js");const defaultStyleCss='*,::before,::after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--kolibri-border-color)}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:var(--kolibri-color);--tw-ring-color:rgba(undefined, 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::moz-focus-inner{border-style:none;padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=\'search\']{-webkit-appearance:textfield;outline-offset:-2px}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}button,select{text-transform:none}button,[type=\'button\'],[type=\'reset\'],[type=\'submit\']{-webkit-appearance:button}button{background-color:transparent;background-image:none}button,[role="button"]{cursor:pointer}code{font-size:1em;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}fieldset{margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}h1,p,h2,h3,h4,h5,h6{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}input,button,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;padding:0;line-height:inherit;color:inherit}input::placeholder{opacity:1;color:#9ca3af}input::webkit-input-placeholder{opacity:1;color:#9ca3af}input::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder{opacity:1;color:#9ca3af}input::-ms-input-placeholder{opacity:1;color:#9ca3af}legend{padding:0}progress{vertical-align:baseline}small{font-size:80%}svg{display:block;vertical-align:middle}table{text-indent:0;border-color:inherit;border-collapse:collapse}textarea{resize:vertical}textarea::placeholder{opacity:1;color:#9ca3af}textarea::webkit-input-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}textarea::-ms-input-placeholder{opacity:1;color:#9ca3af}ul,ol{list-style:none;margin:0;padding:0}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.bg-normal{background-color:var(--kolibri-color-normal)}.bg-white{--tw-bg-opacity:1;background-color:rgba(255, 255, 255, var(--tw-bg-opacity))}.bg-spin-1{background-color:var(--kolibri-color-spin-1)}.bg-spin-2{background-color:var(--kolibri-color-spin-2)}.bg-spin-3{background-color:var(--kolibri-color-spin-3)}.rounded{border-radius:var(--kolibri-border-radius)}.border-1{border-width:1px}.cursor-pointer{cursor:pointer}.block{display:block}.inline-block{display:inline-block}.flex{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.inline-flex{display:-webkit-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex}.table{display:table}.grid{display:-ms-grid;display:grid}.hidden{display:none}.flex-wrap{-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}.items-center{-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.content-center{-ms-flex-line-pack:center;-webkit-align-content:center;align-content:center}.float-left{float:left}.h-full{height:100%}.h-0{height:0px}.h-0\\.41c-2\\.42\\2c 0-4\\.82-1\\.57-4\\.82-3\\.58c0\\.05-0\\.98\\2c 0\\.43-1\\.91\\2c 1\\.07-2\\.65c0\\.3\\2c 0\\.05\\2c 0\\.61\\2c 0\\.09\\2c 0\\.92\\2c 0\\.09c1\\.1\\2c 0\\2c 1\\.69-0\\.58\\2c 1\\.74-1\\.16{height:0.29rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.leading-normal{line-height:1.5}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.list-decimal{list-style-type:decimal}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:calc(1 * var(--kolibri-spacing))}.mr-2{margin-right:calc(2 * var(--kolibri-spacing))}.ml-2{margin-left:calc(2 * var(--kolibri-spacing))}.mt-2{margin-top:calc(2 * var(--kolibri-spacing))}.mt-4{margin-top:calc(4 * var(--kolibri-spacing))}.outline{outline-style:solid}.overflow-y-visible{overflow-y:visible}.px{padding-left:1px;padding-right:1px}.pl-8{padding-left:2rem}.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4}.absolute{position:absolute}.text-center{text-align:center}.text-normal{color:var(--kolibri-color-normal)}.hover\\:text-primary:hover{color:var(--kolibri-color-primary)}.italic{font-style:italic}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.indent{text-indent:1.5rem}.visible{visibility:visible}.w-full{width:100%}.w-4\\/5{width:80%}.z-50{z-index:50}.gap-1{grid-gap:calc(1 * var(--kolibri-spacing));gap:calc(1 * var(--kolibri-spacing))}.grid-flow-col{grid-auto-flow:column}.animate{-webkit-animation-iteration-count:1;animation-iteration-count:1}.filter{--tw-blur:var(--tw-empty, );--tw-brightness:var(--tw-empty, );--tw-contrast:var(--tw-empty, );--tw-grayscale:var(--tw-empty, );--tw-hue-rotate:var(--tw-empty, );--tw-invert:var(--tw-empty, );--tw-saturate:var(--tw-empty, );--tw-sepia:var(--tw-empty, );--tw-drop-shadow:var(--tw-empty, );-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}:host *{-ms-hyphens:var(--kolibri-hyphens);-webkit-hyphens:var(--kolibri-hyphens);hyphens:var(--kolibri-hyphens);font-family:var(--kolibri-font-family);line-height:var(--kolibri-line-height);word-break:break-word}:host *{box-sizing:border-box}:host>div{background-color:white;border-color:white;border-width:1px;border-radius:0.5rem;border-style:solid;display:flex;width:100%;overflow:hidden}:host>div.error{border-color:var(--kolibri-color-error)}:host>div.error .icon{background-color:var(--kolibri-color-error)}:host>div.info{border-color:var(--kolibri-color-info)}:host>div.info .icon{background-color:var(--kolibri-color-info)}:host>div.success{border-color:var(--kolibri-color-success)}:host>div.success .icon{background-color:var(--kolibri-color-success)}:host>div.warning{border-color:var(--kolibri-color-warning)}:host>div.warning .icon{background-color:var(--kolibri-color-warning)}:host>div .icon{color:white;display:inline-block;padding:0 0.25rem}:host>div>div{display:grid}:host>div>div .heading{padding:0 0.25rem;display:inline-block}:host>div>div .heading .icon{margin-left:-0.25rem;margin-right:0.25rem;border-radius:0 0 0.25rem 0}:host>div>div>div:last-child{padding:0.25rem}',Icon=e=>index.h("kol-icon",{class:"icon",_ariaLabel:"string"==typeof e.heading&&e.heading.length>0?"":e.ariaLabel,_icon:e.icon}),AlertIcon=e=>{switch(e.type){case"error":return index.h(Icon,{ariaLabel:"Fehler",icon:"fa-solid fa-circle-xmark",heading:e.heading});case"info":return index.h(Icon,{ariaLabel:"Hinweis",icon:"fa-solid fa-circle-info",heading:e.heading});case"warning":return index.h(Icon,{ariaLabel:"Warnung",icon:"fa-solid fa-triangle-exclamation",heading:e.heading});case"success":return index.h(Icon,{ariaLabel:"Erfolg",icon:"fa-solid fa-circle-check",heading:e.heading});default:return index.h(Icon,{ariaLabel:"Nachricht",icon:"fa-regular fa-comment",heading:e.heading})}},KolAlert=class{constructor(e){index.registerInstance(this,e),this.close=()=>{var e;void 0!==(null===(e=this._on)||void 0===e?void 0:e.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this._alert=!1,this._hasCloser=!1,this._heading=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={}}render(){if(this.state._alert){try{dev_utils.Log.debug(["Navigator should vibrate ...",navigator.vibrate([100,75,100,75,100])])}catch(e){dev_utils.Log.debug("Navigator does not support vibration.")}setTimeout((()=>{this.validateAlert(!1)}),1e4)}return index.h(index.Host,null,index.h("div",{class:{[this.state._type]:!0,[this.state._variant]:!0},role:this.state._alert?"alert":void 0},"msg"===this.state._variant&&index.h(AlertIcon,{heading:this.state._heading,type:this.state._type}),index.h("div",null,("string"==typeof this.state._heading&&this.state._heading.length>0||"card"===this.state._variant)&&index.h("kol-heading-wc",{class:"heading",_level:this.state._level},"card"===this.state._variant&&index.h(AlertIcon,{heading:this.state._heading,type:this.state._type}),this.state._heading),index.h("div",{class:"content"},index.h("slot",null)),this.state._hasCloser&&index.h("kol-button-wc",{class:"close",_icon:{left:{icon:"fa-solid fa-circle-xmark"}},_iconOnly:!0,_label:"Schließen",_on:this.on,_tooltipAlign:"left"}))))}validateAlert(e){prop_validators.watchBoolean(this,"_alert",e)}validateHasCloser(e){prop_validators.watchBoolean(this,"_hasCloser",e)}validateHeading(e){prop_validators.watchString(this,"_heading",e)}validateLevel(e){validation.watchHeadingLevel(this,e)}validateOn(e){if("object"==typeof e&&null!==e){a11y_tipps.featureHint("[KolAlert] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const i={};"function"!=typeof e.onClose&&!0!==e.onClose||(i.onClose=e.onClose),prop_validators.setState(this,"_on",i)}}validateType(e){prop_validators.watchValidator(this,"_type",(e=>"string"==typeof e&&("default"===e||"error"===e||"info"===e||"success"===e||"warning"===e)),new Set("String {success, info, warning, error}"),e)}validateVariant(e){prop_validators.watchValidator(this,"_variant",(e=>"card"===e||"msg"===e),new Set("AlertVariant {card, msg}"),e)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateHeading(this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateType(this._type),this.validateVariant(this._variant)}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_type:["validateType"],_variant:["validateVariant"]}}};KolAlert.style={default:defaultStyleCss},exports.kol_alert=KolAlert;
|
|
4
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-06f1dad8.js"),dev_utils=require("./dev.utils-a119191e.js"),prop_validators=require("./prop.validators-0257b98f.js"),validation=require("./validation-e37d4d60.js"),a11y_tipps=require("./a11y.tipps-df3024df.js");require("./index.m-21aa1255.js"),require("./index-adbf25b5.js");const defaultStyleCss='*,::before,::after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--kolibri-border-color)}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:var(--kolibri-color);--tw-ring-color:rgba(undefined, 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::moz-focus-inner{border-style:none;padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=\'search\']{-webkit-appearance:textfield;outline-offset:-2px}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}button,select{text-transform:none}button,[type=\'button\'],[type=\'reset\'],[type=\'submit\']{-webkit-appearance:button}button{background-color:transparent;background-image:none}button,[role="button"]{cursor:pointer}code{font-size:1em;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}fieldset{margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}h1,p,h2,h3,h4,h5,h6{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}input,button,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;padding:0;line-height:inherit;color:inherit}input::placeholder{opacity:1;color:#9ca3af}input::webkit-input-placeholder{opacity:1;color:#9ca3af}input::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder{opacity:1;color:#9ca3af}input::-ms-input-placeholder{opacity:1;color:#9ca3af}legend{padding:0}progress{vertical-align:baseline}small{font-size:80%}svg{display:block;vertical-align:middle}table{text-indent:0;border-color:inherit;border-collapse:collapse}textarea{resize:vertical}textarea::placeholder{opacity:1;color:#9ca3af}textarea::webkit-input-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}textarea::-ms-input-placeholder{opacity:1;color:#9ca3af}ul,ol{list-style:none;margin:0;padding:0}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.bg-normal{background-color:var(--kolibri-color-normal)}.bg-white{--tw-bg-opacity:1;background-color:rgba(255, 255, 255, var(--tw-bg-opacity))}.bg-spin-1{background-color:var(--kolibri-color-spin-1)}.bg-spin-2{background-color:var(--kolibri-color-spin-2)}.bg-spin-3{background-color:var(--kolibri-color-spin-3)}.rounded{border-radius:var(--kolibri-border-radius)}.border-1{border-width:1px}.cursor-pointer{cursor:pointer}.block{display:block}.inline-block{display:inline-block}.flex{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex}.inline-flex{display:-webkit-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex}.table{display:table}.grid{display:-ms-grid;display:grid}.hidden{display:none}.flex-wrap{-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}.items-center{-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.content-center{-ms-flex-line-pack:center;-webkit-align-content:center;align-content:center}.float-left{float:left}.h-full{height:100%}.h-0{height:0px}.h-0\\.41c-2\\.42\\2c 0-4\\.82-1\\.57-4\\.82-3\\.58c0\\.05-0\\.98\\2c 0\\.43-1\\.91\\2c 1\\.07-2\\.65c0\\.3\\2c 0\\.05\\2c 0\\.61\\2c 0\\.09\\2c 0\\.92\\2c 0\\.09c1\\.1\\2c 0\\2c 1\\.69-0\\.58\\2c 1\\.74-1\\.16{height:0.29rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.leading-normal{line-height:1.5}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.list-decimal{list-style-type:decimal}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:calc(1 * var(--kolibri-spacing))}.mr-2{margin-right:calc(2 * var(--kolibri-spacing))}.ml-2{margin-left:calc(2 * var(--kolibri-spacing))}.mt-2{margin-top:calc(2 * var(--kolibri-spacing))}.mt-4{margin-top:calc(4 * var(--kolibri-spacing))}.outline{outline-style:solid}.overflow-y-visible{overflow-y:visible}.px{padding-left:1px;padding-right:1px}.pl-8{padding-left:2rem}.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4}.absolute{position:absolute}.text-center{text-align:center}.text-normal{color:var(--kolibri-color-normal)}.hover\\:text-primary:hover{color:var(--kolibri-color-primary)}.italic{font-style:italic}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.indent{text-indent:1.5rem}.visible{visibility:visible}.w-full{width:100%}.w-4\\/5{width:80%}.z-50{z-index:50}.gap-1{grid-gap:calc(1 * var(--kolibri-spacing));gap:calc(1 * var(--kolibri-spacing))}.grid-flow-col{grid-auto-flow:column}.animate{-webkit-animation-iteration-count:1;animation-iteration-count:1}.filter{--tw-blur:var(--tw-empty, );--tw-brightness:var(--tw-empty, );--tw-contrast:var(--tw-empty, );--tw-grayscale:var(--tw-empty, );--tw-hue-rotate:var(--tw-empty, );--tw-invert:var(--tw-empty, );--tw-saturate:var(--tw-empty, );--tw-sepia:var(--tw-empty, );--tw-drop-shadow:var(--tw-empty, );-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}:host *{-ms-hyphens:var(--kolibri-hyphens);-webkit-hyphens:var(--kolibri-hyphens);hyphens:var(--kolibri-hyphens);font-family:var(--kolibri-font-family);line-height:var(--kolibri-line-height);word-break:break-word}:host *{box-sizing:border-box}:host>div{background-color:white;border-color:white;border-width:1px;border-radius:0.5rem;border-style:solid;display:flex;width:100%;overflow:hidden}:host>div.error{border-color:var(--kolibri-color-error)}:host>div.error .icon{background-color:var(--kolibri-color-error)}:host>div.info{border-color:var(--kolibri-color-info)}:host>div.info .icon{background-color:var(--kolibri-color-info)}:host>div.success{border-color:var(--kolibri-color-success)}:host>div.success .icon{background-color:var(--kolibri-color-success)}:host>div.warning{border-color:var(--kolibri-color-warning)}:host>div.warning .icon{background-color:var(--kolibri-color-warning)}:host>div .icon{color:white;display:inline-block;padding:0 0.25rem}:host>div>div{display:grid}:host>div>div .heading{padding:0 0.25rem;display:inline-block}:host>div>div .heading .icon{margin-left:-0.25rem;margin-right:0.25rem;border-radius:0 0 0.25rem 0}:host>div>div>div:last-child{padding:0.25rem}',Icon=e=>index.h("kol-icon",{class:"icon",_ariaLabel:"string"==typeof e.heading&&e.heading.length>0?"":e.ariaLabel,_icon:e.icon}),AlertIcon=e=>{switch(e.type){case"error":return index.h(Icon,{ariaLabel:"Fehler",icon:"fa-solid fa-circle-xmark",heading:e.heading});case"info":return index.h(Icon,{ariaLabel:"Hinweis",icon:"fa-solid fa-circle-info",heading:e.heading});case"warning":return index.h(Icon,{ariaLabel:"Warnung",icon:"fa-solid fa-triangle-exclamation",heading:e.heading});case"success":return index.h(Icon,{ariaLabel:"Erfolg",icon:"fa-solid fa-circle-check",heading:e.heading});default:return index.h(Icon,{ariaLabel:"Nachricht",icon:"fa-regular fa-comment",heading:e.heading})}},KolAlert=class{constructor(e){index.registerInstance(this,e),this.close=()=>{var e;void 0!==(null===(e=this._on)||void 0===e?void 0:e.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this._alert=!1,this._hasCloser=!1,this._heading=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={}}render(){if(this.state._alert){try{dev_utils.Log.debug(["Navigator should vibrate ...",navigator.vibrate([100,75,100,75,100])])}catch(e){dev_utils.Log.debug("Navigator does not support vibration.")}setTimeout((()=>{this.validateAlert(!1)}),1e4)}return index.h(index.Host,null,index.h("div",{class:{[this.state._type]:!0,[this.state._variant]:!0},role:this.state._alert?"alert":void 0},"msg"===this.state._variant&&index.h(AlertIcon,{heading:this.state._heading,type:this.state._type}),index.h("div",null,("string"==typeof this.state._heading&&this.state._heading.length>0||"card"===this.state._variant)&&index.h("kol-heading-wc",{class:"heading",_level:this.state._level},"card"===this.state._variant&&index.h(AlertIcon,{heading:this.state._heading,type:this.state._type}),this.state._heading),index.h("div",{class:"content"},index.h("slot",null)),this.state._hasCloser&&index.h("kol-button-wc",{class:"close",_icon:{left:{icon:"fa-solid fa-circle-xmark"}},_iconOnly:!0,_label:"Schließen",_on:this.on,_tooltipAlign:"left"}))))}validateAlert(e){prop_validators.watchBoolean(this,"_alert",e)}validateHasCloser(e){prop_validators.watchBoolean(this,"_hasCloser",e)}validateHeading(e){prop_validators.watchString(this,"_heading",e)}validateLevel(e){validation.watchHeadingLevel(this,e)}validateOn(e){if("object"==typeof e&&null!==e){a11y_tipps.featureHint("[KolAlert] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const i={};"function"!=typeof e.onClose&&!0!==e.onClose||(i.onClose=e.onClose),prop_validators.setState(this,"_on",i)}}validateType(e){prop_validators.watchValidator(this,"_type",(e=>"string"==typeof e&&("default"===e||"error"===e||"info"===e||"success"===e||"warning"===e)),new Set("String {success, info, warning, error}"),e)}validateVariant(e){prop_validators.watchValidator(this,"_variant",(e=>"card"===e||"msg"===e),new Set("AlertVariant {card, msg}"),e)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateHeading(this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateType(this._type),this.validateVariant(this._variant)}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_type:["validateType"],_variant:["validateVariant"]}}};KolAlert.style={default:defaultStyleCss},exports.kol_alert=KolAlert;
|