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

package/dist/collection/pages/Forms.js

@@ -1,1208 +0,0 @@
-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