@gov-design-system-ce/components 0.0.25 → 0.0.26

package/dist/collection/pages/Forms.js

@@ -0,0 +1,1208 @@
+const removeDiacritics = (string) => {
+  if (!string)
+    return string;
+  return string.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+};
+const randomNumber = (min, max) => {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+};
+const data = () => [
+  { name: 'Pepa' },
+  { name: 'Katak' },
+  { name: 'Tomáš' },
+  { name: 'Ludvík' },
+  { name: 'Anežda' },
+  { name: 'Xaviér' },
+  { name: 'Ondřej' },
+  { name: 'Mirek' },
+  { name: 'Zdeněk' },
+  { name: 'Monika' },
+  { name: 'Jirka' },
+  { name: 'Abrahám' },
+  { name: 'Lucie' },
+  { name: 'Emily' },
+  { name: 'Pavel' },
+  { name: 'Gustav' },
+  { name: 'Amálie' },
+];
+class FormsPage extends HTMLElement {
+  connectedCallback() {
+    ;
+    (() => {
+      setTimeout(() => {
+        const po = document.getElementById('bagr');
+        const ba = document.getElementById('ba');
+        if (ba) {
+          ba.addEventListener('gov-change', function (e) {
+            console.log(e);
+          });
+        }
+        if (po) {
+          po.addEventListener('gov-select', function (e) {
+            console.log(e);
+          });
+          po.setSearchCallback(val => {
+            return new Promise(resolve => {
+              setTimeout(() => {
+                resolve(data().filter(({ name }) => {
+                  if (!name)
+                    return false;
+                  return removeDiacritics(name).toLowerCase().indexOf(removeDiacritics(val).toLowerCase()) > -1;
+                }));
+              }, randomNumber(100, 1000));
+            });
+          });
+        }
+      }, 1000);
+    })();
+    this.innerHTML = `
+			<h2>
+				Samostatné použití
+			</h2>
+			<gov-form-input placeholder="Co hledáte">
+				<gov-icon slot="right-icon" name="info"></gov-icon>
+			</gov-form-input>
+			<br>
+			<gov-form-select size="l" name="test-me">
+				<option value="" selected>Placeholder</option>
+				<option value="b">Value B</option>
+				<option value="c">Value C</option>
+				<option value="d">Value D</option>
+			</gov-form-select>
+			<br>
+			<gov-form-multi-select size="xl" id="ba" placeholder="Placeholder" wcag-described-by="me-and-you">
+				<option value>Placeholder</option>
+				<option value="b">Value B</option>
+				<option value="c">Value C</option>
+				<option value="d" selected>Value D</option>
+				<option value="e">Value E</option>
+				<option value="f">Value F</option>
+				<option value="g">Value G</option>
+				<option value="h">Value H</option>
+				<option value="i" selected>Value I</option>
+			</gov-form-multi-select>
+			<br>
+			<gov-form-checkbox name="test-me-c" value="me" checked no-label></gov-form-checkbox>
+			<gov-form-radio name="superRadio2" value="me1" no-label></gov-form-radio>
+			<br>
+			<gov-form-radio name="superRadio2" value="me2" checked no-label></gov-form-radio>
+			<gov-form-switch name="test-me" value="me2" checked no-label></gov-form-switch>
+			<gov-form-checkbox name="test-me-c" value="me" checked>
+				<gov-form-label slot="label">Souhlasím</gov-form-label>
+			</gov-form-checkbox>
+			<gov-form-radio name="superRadio" value="me1">
+				<gov-form-label slot="label">Souhlasím</gov-form-label>
+			</gov-form-radio>
+			<gov-form-radio name="superRadio" value="me2" checked>
+				<gov-form-label slot="label">Souhlasím</gov-form-label>
+			</gov-form-radio>
+			<gov-form-switch name="test-me" value="me2" checked>
+				<gov-form-label slot="label">Souhlasím</gov-form-label>
+			</gov-form-switch>
+
+
+			<h2>
+				Date & Time input (nativní)
+			</h2>
+			<gov-form-input size="m" placeholder="Co hledáte" input-type="datetime-local"></gov-form-input>
+			<br>
+			<gov-form-input size="l" placeholder="Co hledáte" input-type="date"></gov-form-input>
+			<br>
+			<gov-form-input size="xl" placeholder="Co hledáte" input-type="time"></gov-form-input>
+
+			<h2>Search</h2>
+			<gov-form-control size="m">
+				<gov-form-group>
+					<gov-form-search name="test-me-c" value="me" checked>
+						<gov-form-input slot="input" id="kapr" name="test-me" placeholder="Co hledáte"></gov-form-input>
+						<gov-button slot="button" variant="primary" size="s">
+							<gov-icon slot="left-icon" name="search"></gov-icon>
+						</gov-button>
+					</gov-form-search>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control size="l">
+				<gov-form-group>
+					<gov-form-search name="test-me-c" value="me" checked>
+						<gov-form-input slot="input" id="kapr" name="test-me" placeholder="Co hledáte"></gov-form-input>
+						<gov-button slot="button" variant="primary" size="m">
+							Hledat
+						</gov-button>
+					</gov-form-search>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control size="xl">
+				<gov-form-group>
+					<gov-form-search name="test-me-c" value="me" checked variant="secondary">
+						<gov-form-input slot="input" id="kapr" name="test-me" placeholder="Co hledáte"></gov-form-input>
+						<gov-button slot="button" variant="secondary" size="l">
+							Hledat
+						</gov-button>
+					</gov-form-search>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h2>File</h2>
+			<div class="container-view">
+			<h3>Normal</h3>
+				<gov-form-control>
+					<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
+					<gov-form-group>
+						<gov-form-file name="test-me-c" expanded accept="image/*" max-file-size="1024">
+							<p>
+								<gov-button variant="primary" type="outlined" tabindex="-1">
+									Nahrát soubor ze zařízení
+								</gov-button>
+							</p>
+							<p class="gov-text--s">
+								Podporované formáty XML, PDF, DOC
+							</p>
+						</gov-form-file>
+					</gov-form-group>
+				</gov-form-control>
+				<br>
+
+				<gov-form-control disabled>
+					<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
+					<gov-form-group>
+						<gov-form-file name="test-me-c">
+							<p aria-hidden="true">
+								<gov-button disabled variant="primary" type="outlined">
+									<gov-icon slot="left-icon" name="upload"></gov-icon>
+									Nahrát soubor ze zařízení
+								</gov-button>
+							</p>
+							<p class="gov-text--s">
+								Podporované formáty XML, PDF, DOC
+							</p>
+						</gov-form-file>
+					</gov-form-group>
+				</gov-form-control>
+				<br>
+
+				<gov-form-control invalid>
+					<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
+					<gov-form-group>
+						<gov-form-file name="test-me-c">
+							<p>
+								<gov-button variant="primary" type="outlined">
+									<gov-icon slot="left-icon" name="upload"></gov-icon>
+									Nahrát soubor ze zařízení
+								</gov-button>
+							</p>
+							<p class="gov-text--s">
+								Podporované formáty XML, PDF, DOC
+							</p>
+						</gov-form-file>
+					</gov-form-group>
+					<gov-form-message slot="bottom" variant="error">
+						<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+						Required
+					</gov-form-message>
+				</gov-form-control>
+				<br>
+
+				<h3>Expanded</h3>
+				<gov-form-control>
+					<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
+					<gov-form-group>
+						<gov-form-file expanded name="test-me-c">
+							<p class="gov-color--secondary-800">
+								Přetáhněte soubor nebo
+							</p>
+							<p>
+								<gov-button variant="primary" type="outlined">
+									Nahrajte ze zařízení
+								</gov-button>
+							</p>
+							<p class="gov-text--s">
+								Podporované formáty XML, PDF, DOC
+							</p>
+						</gov-form-file>
+					</gov-form-group>
+				</gov-form-control>
+				<br>
+
+				<gov-form-control disabled>
+					<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
+					<gov-form-group>
+						<gov-form-file expanded name="test-me-c">
+							<p class="gov-color--secondary-800">
+								Přetáhněte soubor nebo
+							</p>
+							<p>
+								<gov-button disabled variant="primary" type="outlined">
+									Nahrát ze zařízení
+								</gov-button>
+							</p>
+							<p class="gov-text--s">
+								Podporované formáty XML, PDF, DOC
+							</p>
+						</gov-form-file>
+					</gov-form-group>
+				</gov-form-control>
+				<br>
+
+				<gov-form-control invalid>
+					<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>
+					<gov-form-group>
+						<gov-form-file expanded name="test-me-c">
+							<p class="gov-color--secondary-800">
+								Přetáhněte soubor nebo
+							</p>
+							<p>
+								<gov-button variant="primary" type="outlined">
+									Nahrát ze zařízení
+								</gov-button>
+							</p>
+							<p class="gov-text--s">
+								Podporované formáty XML, PDF, DOC
+							</p>
+						</gov-form-file>
+					</gov-form-group>
+					<gov-form-message slot="bottom" variant="error">
+						<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+						Required
+					</gov-form-message>
+				</gov-form-control>
+				<br>
+			</div>
+
+			<h2>Multiselect</h2>
+			<gov-form-control>
+				<gov-form-label slot="top">Multiselect</gov-form-label>
+				<gov-form-group>
+					<gov-form-multi-select id="ba" placeholder="Placeholder" wcag-described-by="me-and-you">
+						<option value>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d" selected>Value D</option>
+						<option value="e">Value E</option>
+						<option value="f">Value F</option>
+						<option value="g">Value G</option>
+						<option value="h">Value H</option>
+						<option value="i" selected>Value I</option>
+					</gov-form-multi-select>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+
+			<h2>Autocomplete</h2>
+			<gov-form-control>
+				<gov-form-label slot="top">Label of autocomplete</gov-form-label>
+				<gov-form-group>
+					<gov-form-autocomplete placeholder="Placeholder autcomplete" id="bagr"></gov-form-autocomplete>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+
+			<h2>Textarea</h2>
+			<h3>
+				Default
+			</h3>
+			<gov-form-control type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of textarea</gov-form-label>
+				<gov-form-group>
+					<gov-form-input multiline rows="3" name="test-me" placeholder="Placeholder"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<h3>
+				Invalid
+			</h3>
+			<gov-form-control invalid="TRUE" type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of textarea</gov-form-label>
+				<gov-form-group>
+					<gov-form-input required multiline rows="3" name="test-me" value="Value of textarea"></gov-form-input>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<h3>
+				Disabled
+			</h3>
+			<gov-form-control disabled type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of textarea</gov-form-label>
+				<gov-form-group>
+					<gov-form-input multiline rows="3" name="test-me" value="Value of textarea"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h2>Checkbox</h2>
+			<h3>
+				Gaps
+			</h3>
+
+			<gov-form-control size="xs">
+				<gov-form-label size="xs" slot="top">Label of word</gov-form-label>
+				<gov-form-group gap="2xs">
+					<gov-form-checkbox name="test-me-c" value="me" checked></gov-form-checkbox>
+					<gov-form-checkbox name="test-me-c" value="me" checked></gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control size="xs">
+				<gov-form-group gap="2xs">
+					<gov-form-checkbox name="test-me-c" value="me" required checked>
+						<gov-form-label slot="label">Option 1</gov-form-label>
+					</gov-form-checkbox>
+					<gov-form-checkbox name="test-me-c" value="me" checked>
+						<gov-form-label slot="label">Option 2</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control size="s">
+				<gov-form-group gap="xs">
+					<gov-form-checkbox name="test-me-c" value="me" checked>
+						<gov-form-label slot="label">Option 1</gov-form-label>
+					</gov-form-checkbox>
+					<gov-form-checkbox name="test-me-c" value="me" checked>
+						<gov-form-label slot="label">Option 2</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control size="m">
+				<gov-form-group gap="s">
+					<gov-form-checkbox name="test-me-c" value="me" checked>
+						<gov-form-label slot="label">Option 1</gov-form-label>
+					</gov-form-checkbox>
+					<gov-form-checkbox name="test-me-c" value="me" checked>
+						<gov-form-label slot="label">Option 2</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control size="l">
+				<gov-form-group gap="m">
+					<gov-form-checkbox name="test-me-c" value="me" checked>
+						<gov-form-label slot="label">Option 1</gov-form-label>
+					</gov-form-checkbox>
+					<gov-form-checkbox name="test-me-c" value="me" checked>
+						<gov-form-label slot="label">Option 2</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h3>
+				Default
+			</h3>
+			<gov-form-control size="xs">
+				<gov-form-group>
+					<gov-form-checkbox name="test-me-c" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="s">
+				<gov-form-group>
+					<gov-form-checkbox name="test-me-c" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="m">
+				<gov-form-group>
+					<gov-form-checkbox name="test-me-c" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="l">
+				<gov-form-group>
+					<gov-form-checkbox name="test-me-c" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+			<h3>
+				Invalid
+			</h3>
+			<gov-form-control invalid="true" size="xs">
+				<gov-form-group>
+					<gov-form-checkbox name="test-me-c" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<gov-form-control invalid="true" size="s">
+				<gov-form-group>
+					<gov-form-checkbox name="test-me-c" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<gov-form-control invalid="true" size="m">
+				<gov-form-group>
+					<gov-form-checkbox name="test-me-c" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			
+			<h3>
+				Disabled
+			</h3>
+			<gov-form-control disabled size="xs">
+				<gov-form-group>
+					<gov-form-checkbox name="test-me-c" value="me">
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control disabled="True" size="s">
+				<gov-form-group>
+					<gov-form-checkbox name="test-me-c" value="me">
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control disabled="TRUE" size="m">
+				<gov-form-group>
+					<gov-form-checkbox name="test-me-c" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control disabled="1" size="l">
+				<gov-form-group>
+					<gov-form-checkbox name="test-me-c" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-checkbox>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h2>Radio</h2>
+			<h3>
+				Default group
+			</h3>
+			<gov-form-control size="xs" fieldset>
+					<gov-form-label legend size="s" slot="top">Seznam skupiny</gov-form-label>
+				<gov-form-group>
+					<gov-form-radio name="test1" value="me" >
+						<gov-form-label slot="label">Value 1</gov-form-label>
+					</gov-form-radio>
+					<gov-form-radio name="test1" value="me2" checked>
+						<gov-form-label slot="label">Value 2</gov-form-label>
+					</gov-form-radio>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control size="s">
+				<gov-form-group>
+					<gov-form-radio name="test2" value="me" >
+						<gov-form-label slot="label">Value 1</gov-form-label>
+					</gov-form-radio>
+					<gov-form-radio name="test2" value="me2" checked>
+						<gov-form-label slot="label">Value 2</gov-form-label>
+					</gov-form-radio>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control size="m">
+				<gov-form-group>
+					<gov-form-radio name="test3" value="me" >
+						<gov-form-label slot="label">Value 1</gov-form-label>
+					</gov-form-radio>
+					<gov-form-radio name="test3" value="me2" checked>
+						<gov-form-label slot="label">Value 2</gov-form-label>
+					</gov-form-radio>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control size="l">
+				<gov-form-group>
+					<gov-form-radio name="test4" value="me" >
+						<gov-form-label slot="label">Value 1</gov-form-label>
+					</gov-form-radio>
+					<gov-form-radio name="test4" value="me2" checked>
+						<gov-form-label slot="label">Value 2</gov-form-label>
+					</gov-form-radio>
+				</gov-form-group>
+			</gov-form-control>
+			<h3>
+				Invalid
+			</h3>
+			<gov-form-control invalid="true" size="xs">
+				<gov-form-group>
+					<gov-form-radio name="test5" value="me" >
+						<gov-form-label slot="label">Value 1</gov-form-label>
+					</gov-form-radio>
+					<gov-form-radio name="test5" value="me2" checked>
+						<gov-form-label slot="label">Value 2</gov-form-label>
+					</gov-form-radio>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<br>
+			<gov-form-control invalid="true" size="s">
+				<gov-form-group>
+					<gov-form-radio name="test6" value="me" >
+						<gov-form-label slot="label">Value 1</gov-form-label>
+					</gov-form-radio>
+					<gov-form-radio name="test6" value="me2" checked>
+						<gov-form-label slot="label">Value 2</gov-form-label>
+					</gov-form-radio>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<br>
+			<gov-form-control invalid="true" size="m">
+				<gov-form-group>
+					<gov-form-radio name="test7" value="me" >
+						<gov-form-label slot="label">Value 1</gov-form-label>
+					</gov-form-radio>
+					<gov-form-radio name="test7" value="me2" checked>
+						<gov-form-label slot="label">Value 2</gov-form-label>
+					</gov-form-radio>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<br>
+			<gov-form-control invalid="true" size="l">
+				<gov-form-group>
+					<gov-form-radio name="test8" value="me" >
+						<gov-form-label slot="label">Value 1</gov-form-label>
+					</gov-form-radio>
+					<gov-form-radio name="test8" value="me2" checked>
+						<gov-form-label slot="label">Value 2</gov-form-label>
+					</gov-form-radio>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<h3>
+				Disabled
+			</h3>
+			<gov-form-control size="xs" disabled>
+				<gov-form-group>
+					<gov-form-radio name="test9" value="me" >
+						<gov-form-label slot="label">Value 1</gov-form-label>
+					</gov-form-radio>
+					<gov-form-radio name="test9" value="me2" checked>
+						<gov-form-label slot="label">Value 2</gov-form-label>
+					</gov-form-radio>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control disabled="true" size="s">
+				<gov-form-group>
+					<gov-form-radio name="test10" value="me" >
+						<gov-form-label slot="label">Value 1</gov-form-label>
+					</gov-form-radio>
+					<gov-form-radio name="test10" value="me2" checked>
+						<gov-form-label slot="label">Value 2</gov-form-label>
+					</gov-form-radio>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control disabled="true" size="m">
+				<gov-form-group>
+					<gov-form-radio name="test11" value="me" >
+						<gov-form-label slot="label">Value 1</gov-form-label>
+					</gov-form-radio>
+					<gov-form-radio name="test11" value="me2" checked>
+						<gov-form-label slot="label">Value 2</gov-form-label>
+					</gov-form-radio>
+				</gov-form-group>
+			</gov-form-control>
+			<br>
+			<gov-form-control disabled="true" size="l">
+				<gov-form-group>
+					<gov-form-radio name="test12" value="me" >
+						<gov-form-label slot="label">Value 1</gov-form-label>
+					</gov-form-radio>
+					<gov-form-radio name="test12" value="me2" checked>
+						<gov-form-label slot="label">Value 2</gov-form-label>
+					</gov-form-radio>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h2>Select</h2>
+			<h3>
+				Default
+			</h3>
+			<gov-form-control size="m">
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="l">
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me">
+						<option value="a" selected>Value A</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="xl">
+				<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me">
+						<option value="a" selected>Value A</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<h3>
+				Prefix / sufix
+			</h3>
+			<gov-form-control size="m">
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me">
+						<span slot="prefix">$</span>
+						<span slot="sufix">Kč</span>
+
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="l">
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me">
+						<span slot="prefix">$</span>
+						<span slot="sufix">Kč</span>
+
+						<option value="a" selected>Value A</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="l">
+				<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me">
+						<span slot="prefix">$</span>
+						<span slot="sufix">Kč</span>
+
+						<option value="a" selected>Value A</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<h3>
+				Invalid
+			</h3>
+			<gov-form-control invalid="true" size="m">
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<gov-form-control invalid="true" size="l">
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<gov-form-control invalid="true" size="xl">
+				<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<h3>
+				Disabled
+			</h3>
+			<gov-form-control size="m" disabled>
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control disabled="true" size="m">
+				<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control disabled="true" size="l">
+				<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
+				<gov-form-group>
+					<gov-form-select name="test-me">
+						<option value="" selected>Placeholder</option>
+						<option value="b">Value B</option>
+						<option value="c">Value C</option>
+						<option value="d">Value D</option>
+					</gov-form-select>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h2>Input</h2>
+			<h3>
+				Default
+			</h3>
+			<gov-form-control size="m" type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="l" type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input 3333</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="xl" type="input" id="metro2">
+				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<h3>
+				Prefix / sufix
+			</h3>
+			<gov-form-control size="m" type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder">
+						<span slot="prefix">$</span>
+						<span slot="sufix">Kč</span>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="l" type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input">
+						<span slot="prefix">$</span>
+						<span slot="sufix">Kč</span>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="xl" type="input" id="metro2">
+				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input">
+						<span slot="prefix">$</span>
+						<span slot="sufix">Kč</span>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<h3>
+				Left icon
+			</h3>
+			<gov-form-control size="m" type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder">
+						<gov-icon slot="left-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="l" type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input">
+						<gov-icon slot="left-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="xl" type="input" id="metro2">
+				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input">
+						<gov-icon slot="left-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<h3>
+				Right icon
+			</h3>
+			<gov-form-control size="m" type="input" id="metro2">
+				<gov-form-label slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder">
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="l" type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input">
+						<gov-icon slot="right-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="xl" type="input" id="metro2">
+				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input">
+						<gov-icon slot="right-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<h3>
+				Success
+			</h3>
+			<gov-form-control success="true" size="m" type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder"></gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control success="True" size="l" type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input">
+						<gov-icon slot="right-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control success="1" size="xl" type="input" id="metro2">
+				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input">
+						<gov-icon slot="left-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<h3>
+				Invalid
+			</h3>
+			<gov-form-control invalid="true" size="m" type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder"></gov-form-input>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<gov-form-control invalid="true" size="l" type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input">
+						<gov-icon slot="right-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<gov-form-control invalid="true" size="xl" type="input" id="metro2">
+				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input">
+						<gov-icon slot="left-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<h3>
+				Disabled
+			</h3>
+			<gov-form-control size="m" type="input" id="metro2" disabled>
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" placeholder="Placeholder">
+						<gov-icon slot="right-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control disabled="True" size="l" type="input" id="metro2">
+				<gov-form-label size="s" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input">
+						<gov-icon slot="right-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control disabled="1" size="xl" type="input" id="metro2">
+				<gov-form-label size="m" slot="top">Label of input</gov-form-label>
+				<gov-form-group>
+					<gov-form-input id="kapr" name="test-me" value="Value of input">
+						<gov-icon slot="left-icon" name="info"></gov-icon>
+					</gov-form-input>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h3>
+				Password power
+			</h3>
+			<gov-form-password-power power="0"></gov-form-password-power>
+			<gov-form-password-power power="1">slabé</gov-form-password-power>
+			<gov-form-password-power power="2">střední</gov-form-password-power>
+			<gov-form-password-power power="3">silné</gov-form-password-power>
+
+			<h2>Switch</h2>
+			<h3>
+				Default
+			</h3>
+			<gov-form-control size="xs">
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="s">
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="m">
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+
+			<gov-form-control size="l">
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+
+			<h3>
+				With message
+			</h3>
+			<gov-form-control size="xs">
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<gov-form-control size="s">
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<gov-form-control size="m">
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<gov-form-control size="l">
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+				<gov-form-message slot="bottom" variant="error">
+					<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>
+					Required
+				</gov-form-message>
+			</gov-form-control>
+			<h3>
+				With label
+			</h3>
+			<gov-form-control size="xs">
+				<gov-form-label size="s" slot="top">Label of toggle</gov-form-label>
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="s">
+				<gov-form-label size="s" slot="top">Label of toggle</gov-form-label>
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="m">
+				<gov-form-label size="m" slot="top">Label of toggle</gov-form-label>
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="l">
+				<gov-form-label size="m" slot="top">Label of toggle</gov-form-label>
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<h3>
+				Disabled
+			</h3>
+			<gov-form-control type="switch" size="xs" disabled>
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me">
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="switch" size="s" disabled="true">
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me">
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="switch" size="m" disabled="true">
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control type="switch" size="l" disabled="true">
+				<gov-form-group>
+					<gov-form-switch name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<h3>
+				Invalid
+			</h3>
+			<gov-form-control size="xs" invalid="True">
+				<gov-form-group>
+					<gov-form-switch invalid name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="s" invalid="TRUE">
+				<gov-form-group>
+					<gov-form-switch invalid name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="m" invalid="true">
+				<gov-form-group>
+					<gov-form-switch invalid name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+			<gov-form-control size="l" invalid="1">
+				<gov-form-group>
+					<gov-form-switch invalid name="test-me" value="me" checked>
+						<gov-form-label slot="label">Souhlasím</gov-form-label>
+					</gov-form-switch>
+				</gov-form-group>
+			</gov-form-control>
+		`;
+  }
+}
+if (customElements.get('forms-page') === undefined) {
+  customElements.define('forms-page', FormsPage);
+}
+//# sourceMappingURL=Forms.js.map