@gov-design-system-ce/components 0.0.65 → 0.0.67

package/dist/collection/pages/ControlGroup.js

@@ -197,6 +197,101 @@ class ControlGroupPage extends HTMLElement {
 				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
 			</gov-button>
 		</gov-control-group>
+
+		<br /><br />
+		<gov-control-group variant="primary">
+		<gov-button variant="primary" type="outlined" size="m">
+				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
+			</gov-button>
+			<gov-button variant="primary" type="outlined" size="m">
+				<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
+			</gov-button>
+			<gov-form-select name="test-me" variant="primary" size="m">
+				<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-button variant="primary" type="solid" size="m">
+				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+			</gov-button>
+		</gov-control-group>
+
+		<br />
+		<gov-control-group variant="secondary">
+		<gov-button variant="secondary" type="outlined" size="m">
+				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
+			</gov-button>
+			<gov-button variant="secondary" type="outlined" size="m">
+				<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
+			</gov-button>
+			<gov-form-select name="test-me" variant="secondary" size="m">
+				<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-button variant="secondary" type="solid" size="m">
+				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+			</gov-button>
+		</gov-control-group>
+
+		<br />
+		<gov-control-group variant="success">
+		<gov-button variant="success" type="outlined" size="m">
+				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
+			</gov-button>
+			<gov-button variant="success" type="outlined" size="m">
+				<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
+			</gov-button>
+			<gov-form-select name="test-me" variant="success" size="m">
+				<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-button variant="success" type="solid" size="m">
+				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+			</gov-button>
+		</gov-control-group>
+
+		<br />
+		<gov-control-group variant="warning">
+		<gov-button variant="warning" type="outlined" size="m">
+				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
+			</gov-button>
+			<gov-button variant="warning" type="outlined" size="m">
+				<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
+			</gov-button>
+			<gov-form-select name="test-me" variant="warning" size="m">
+				<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-button variant="warning" type="solid" size="m">
+				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+			</gov-button>
+		</gov-control-group>
+
+		<br />
+		<gov-control-group variant="error">
+		<gov-button variant="error" type="outlined" size="m">
+				<gov-icon slot="left-icon" name="chevron-up"></gov-icon>
+			</gov-button>
+			<gov-button variant="error" type="outlined" size="m">
+				<gov-icon slot="left-icon" name="chevron-down"></gov-icon>
+			</gov-button>
+			<gov-form-select name="test-me" variant="error" size="m">
+				<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-button variant="error" type="solid" size="m">
+				<gov-icon slot="left-icon" name="x-lg"></gov-icon>
+			</gov-button>
+		</gov-control-group>
 		`;
   }
 }

package/dist/collection/pages/ControlGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ControlGroup.js","sourceRoot":"","sources":["../../../../../src/pages/ControlGroup.ts"],"names":[],"mappings":"AAAA,MAAM,gBAAiB,SAAQ,WAAW;EACzC,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqMhB,CAAA;EACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,oBAAoB,CAAC,KAAK,SAAS,EAAE;EAC3D,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CAAA;CAC7D","sourcesContent":["class ControlGroupPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<h2>Control Group</h2>\n\n\t\t<gov-control-group>\n\t\t\t<gov-form-input type=\"number\" id=\"kapr\" name=\"test-me\" placeholder=\"Placeholder\" size=\"s\"></gov-form-input>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"s\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-up\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"s\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-down\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"s\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-dropdown position=\"right\">\n\t\t\t\t<gov-button variant=\"primary\" size=\"s\">\n\t\t\t\t\tVíce\n\t\t\t\t</gov-button>\n\t\t\t\t<ul slot=\"list\">\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<gov-button variant=\"primary\" type=\"base\" size=\"s\">\n\t\t\t\t\t\t\tA další nabídka\n\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<gov-button variant=\"primary\" type=\"base\" size=\"s\">\n\t\t\t\t\t\t\tA další nabídka\n\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<gov-button variant=\"primary\" type=\"base\" size=\"s\">\n\t\t\t\t\t\t\tA další nabídka\n\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</gov-dropdown>\n\t\t</gov-control-group>\n\t\t<br />\n\t\t<gov-control-group variant=\"primary\">\n\t\t\t<gov-form-select name=\"test-me\" size=\"m\">\n\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t</gov-form-select>\n\t\t\t<gov-button variant=\"primary\" type=\"solid\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br />\n\t\t<gov-control-group>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"l\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"gear\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-form-file name=\"test-me-c\" accept=\"image/*\" max-file-size=\"1024\">\n\t\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"l\" tabindex=\"-1\">\n\t\t\t\t\tNahrát soubor ze zařízení\n\t\t\t\t</gov-button>\n\t\t\t</gov-form-file>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"l\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br />\n\t\t<gov-control-group variant=\"primary\" no-border>\n\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"xl\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-up\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"xl\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-down\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-form-select name=\"test-me\" size=\"xl\">\n\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t</gov-form-select>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"xl\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br><br>\n\n\t\t<gov-control-group variant=\"secondary\" no-border>\n\t\t\t<gov-form-input type=\"number\" id=\"kapr\" name=\"test-me\" placeholder=\"Placeholder\" variant=\"primary\" size=\"s\"></gov-form-input>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"s\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-up\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"s\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-down\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"s\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br />\n\t\t<gov-control-group variant=\"secondary\">\n\t\t\t<gov-form-select name=\"test-me\" size=\"m\">\n\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t</gov-form-select>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br />\n\t\t<gov-control-group variant=\"secondary\">\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"l\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"gear\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-form-file name=\"test-me-c\" accept=\"image/*\" max-file-size=\"1024\">\n\t\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"l\" tabindex=\"-1\">\n\t\t\t\t\tNahrát soubor ze zařízení\n\t\t\t\t</gov-button>\n\t\t\t</gov-form-file>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"l\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br />\n\t\t<gov-control-group variant=\"secondary\">\n\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"xl\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-up\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"xl\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-down\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-form-select name=\"test-me\" variant=\"primary\" size=\"xl\">\n\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t</gov-form-select>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"xl\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br><br>\n\n\t\t<gov-control-group variant=\"secondary\">\n\t\t\t<gov-form-input type=\"number\" id=\"kapr\" name=\"test-me\" placeholder=\"Placeholder\" variant=\"secondary\" size=\"s\"></gov-form-input>\n\t\t\t<gov-button variant=\"secondary\" type=\"outlined\" size=\"s\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-up\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button variant=\"secondary\" type=\"outlined\" size=\"s\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-down\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button variant=\"secondary\" type=\"outlined\" size=\"s\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br />\n\t\t<gov-control-group variant=\"secondary\" no-border>\n\t\t\t<gov-form-select name=\"test-me\" size=\"m\">\n\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t</gov-form-select>\n\t\t\t<gov-button variant=\"secondary\" type=\"outlined\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br />\n\t\t<gov-control-group variant=\"secondary\">\n\t\t\t<gov-button variant=\"secondary\" type=\"outlined\" size=\"l\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"gear\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-form-file name=\"test-me-c\" accept=\"image/*\" max-file-size=\"1024\">\n\t\t\t\t<gov-button variant=\"secondary\" type=\"outlined\" size=\"l\" tabindex=\"-1\">\n\t\t\t\t\tNahrát soubor ze zařízení\n\t\t\t\t</gov-button>\n\t\t\t</gov-form-file>\n\t\t\t<gov-button variant=\"secondary\" type=\"outlined\" size=\"l\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br />\n\t\t<gov-control-group variant=\"secondary\">\n\t\t<gov-button variant=\"secondary\" type=\"outlined\" size=\"xl\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-up\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button variant=\"secondary\" type=\"outlined\" size=\"xl\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-down\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-form-select name=\"test-me\" variant=\"secondary\" size=\"xl\">\n\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t</gov-form-select>\n\t\t\t<gov-button variant=\"secondary\" type=\"outlined\" size=\"xl\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t`\n\t}\n}\n\nif (customElements.get('control-group-page') === undefined) {\n\tcustomElements.define('control-group-page', ControlGroupPage)\n}\n"]}
+{"version":3,"file":"ControlGroup.js","sourceRoot":"","sources":["../../../../../src/pages/ControlGroup.ts"],"names":[],"mappings":"AAAA,MAAM,gBAAiB,SAAQ,WAAW;EACzC,iBAAiB;IAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoShB,CAAA;EACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,oBAAoB,CAAC,KAAK,SAAS,EAAE;EAC3D,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CAAA;CAC7D","sourcesContent":["class ControlGroupPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<h2>Control Group</h2>\n\n\t\t<gov-control-group>\n\t\t\t<gov-form-input type=\"number\" id=\"kapr\" name=\"test-me\" placeholder=\"Placeholder\" size=\"s\"></gov-form-input>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"s\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-up\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"s\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-down\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"s\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-dropdown position=\"right\">\n\t\t\t\t<gov-button variant=\"primary\" size=\"s\">\n\t\t\t\t\tVíce\n\t\t\t\t</gov-button>\n\t\t\t\t<ul slot=\"list\">\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<gov-button variant=\"primary\" type=\"base\" size=\"s\">\n\t\t\t\t\t\t\tA další nabídka\n\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<gov-button variant=\"primary\" type=\"base\" size=\"s\">\n\t\t\t\t\t\t\tA další nabídka\n\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<gov-button variant=\"primary\" type=\"base\" size=\"s\">\n\t\t\t\t\t\t\tA další nabídka\n\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</gov-dropdown>\n\t\t</gov-control-group>\n\t\t<br />\n\t\t<gov-control-group variant=\"primary\">\n\t\t\t<gov-form-select name=\"test-me\" size=\"m\">\n\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t</gov-form-select>\n\t\t\t<gov-button variant=\"primary\" type=\"solid\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br />\n\t\t<gov-control-group>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"l\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"gear\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-form-file name=\"test-me-c\" accept=\"image/*\" max-file-size=\"1024\">\n\t\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"l\" tabindex=\"-1\">\n\t\t\t\t\tNahrát soubor ze zařízení\n\t\t\t\t</gov-button>\n\t\t\t</gov-form-file>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"l\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br />\n\t\t<gov-control-group variant=\"primary\" no-border>\n\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"xl\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-up\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"xl\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-down\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-form-select name=\"test-me\" size=\"xl\">\n\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t</gov-form-select>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"xl\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br><br>\n\n\t\t<gov-control-group variant=\"secondary\" no-border>\n\t\t\t<gov-form-input type=\"number\" id=\"kapr\" name=\"test-me\" placeholder=\"Placeholder\" variant=\"primary\" size=\"s\"></gov-form-input>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"s\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-up\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"s\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-down\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"s\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br />\n\t\t<gov-control-group variant=\"secondary\">\n\t\t\t<gov-form-select name=\"test-me\" size=\"m\">\n\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t</gov-form-select>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br />\n\t\t<gov-control-group variant=\"secondary\">\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"l\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"gear\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-form-file name=\"test-me-c\" accept=\"image/*\" max-file-size=\"1024\">\n\t\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"l\" tabindex=\"-1\">\n\t\t\t\t\tNahrát soubor ze zařízení\n\t\t\t\t</gov-button>\n\t\t\t</gov-form-file>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"l\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br />\n\t\t<gov-control-group variant=\"secondary\">\n\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"xl\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-up\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"xl\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-down\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-form-select name=\"test-me\" variant=\"primary\" size=\"xl\">\n\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t</gov-form-select>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"xl\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br><br>\n\n\t\t<gov-control-group variant=\"secondary\">\n\t\t\t<gov-form-input type=\"number\" id=\"kapr\" name=\"test-me\" placeholder=\"Placeholder\" variant=\"secondary\" size=\"s\"></gov-form-input>\n\t\t\t<gov-button variant=\"secondary\" type=\"outlined\" size=\"s\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-up\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button variant=\"secondary\" type=\"outlined\" size=\"s\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-down\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button variant=\"secondary\" type=\"outlined\" size=\"s\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br />\n\t\t<gov-control-group variant=\"secondary\" no-border>\n\t\t\t<gov-form-select name=\"test-me\" size=\"m\">\n\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t</gov-form-select>\n\t\t\t<gov-button variant=\"secondary\" type=\"outlined\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br />\n\t\t<gov-control-group variant=\"secondary\">\n\t\t\t<gov-button variant=\"secondary\" type=\"outlined\" size=\"l\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"gear\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-form-file name=\"test-me-c\" accept=\"image/*\" max-file-size=\"1024\">\n\t\t\t\t<gov-button variant=\"secondary\" type=\"outlined\" size=\"l\" tabindex=\"-1\">\n\t\t\t\t\tNahrát soubor ze zařízení\n\t\t\t\t</gov-button>\n\t\t\t</gov-form-file>\n\t\t\t<gov-button variant=\"secondary\" type=\"outlined\" size=\"l\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br />\n\t\t<gov-control-group variant=\"secondary\">\n\t\t<gov-button variant=\"secondary\" type=\"outlined\" size=\"xl\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-up\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button variant=\"secondary\" type=\"outlined\" size=\"xl\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-down\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-form-select name=\"test-me\" variant=\"secondary\" size=\"xl\">\n\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t</gov-form-select>\n\t\t\t<gov-button variant=\"secondary\" type=\"outlined\" size=\"xl\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\n\t\t<br /><br />\n\t\t<gov-control-group variant=\"primary\">\n\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-up\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button variant=\"primary\" type=\"outlined\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-down\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-form-select name=\"test-me\" variant=\"primary\" size=\"m\">\n\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t</gov-form-select>\n\t\t\t<gov-button variant=\"primary\" type=\"solid\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\n\t\t<br />\n\t\t<gov-control-group variant=\"secondary\">\n\t\t<gov-button variant=\"secondary\" type=\"outlined\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-up\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button variant=\"secondary\" type=\"outlined\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-down\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-form-select name=\"test-me\" variant=\"secondary\" size=\"m\">\n\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t</gov-form-select>\n\t\t\t<gov-button variant=\"secondary\" type=\"solid\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\n\t\t<br />\n\t\t<gov-control-group variant=\"success\">\n\t\t<gov-button variant=\"success\" type=\"outlined\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-up\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button variant=\"success\" type=\"outlined\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-down\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-form-select name=\"test-me\" variant=\"success\" size=\"m\">\n\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t</gov-form-select>\n\t\t\t<gov-button variant=\"success\" type=\"solid\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\n\t\t<br />\n\t\t<gov-control-group variant=\"warning\">\n\t\t<gov-button variant=\"warning\" type=\"outlined\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-up\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button variant=\"warning\" type=\"outlined\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-down\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-form-select name=\"test-me\" variant=\"warning\" size=\"m\">\n\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t</gov-form-select>\n\t\t\t<gov-button variant=\"warning\" type=\"solid\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\n\t\t<br />\n\t\t<gov-control-group variant=\"error\">\n\t\t<gov-button variant=\"error\" type=\"outlined\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-up\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button variant=\"error\" type=\"outlined\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"chevron-down\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-form-select name=\"test-me\" variant=\"error\" size=\"m\">\n\t\t\t\t<option value=\"\" selected>Placeholder</option>\n\t\t\t\t<option value=\"b\">Value B</option>\n\t\t\t\t<option value=\"c\">Value C</option>\n\t\t\t\t<option value=\"d\">Value D</option>\n\t\t\t</gov-form-select>\n\t\t\t<gov-button variant=\"error\" type=\"solid\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"left-icon\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t`\n\t}\n}\n\nif (customElements.get('control-group-page') === undefined) {\n\tcustomElements.define('control-group-page', ControlGroupPage)\n}\n"]}

package/dist/collection/pages/Forms.js

@@ -35,6 +35,7 @@ class FormsPage extends HTMLElement {
         const po = document.getElementById('bagr');
         const ba = document.getElementById('ba');
         const na = document.getElementById('kaprWWWWWW');
+        const ms = document.getElementById('poleno');
         if (ba) {
           ba.addEventListener('gov-change', function (e) {
             console.log(e);
@@ -67,6 +68,13 @@ class FormsPage extends HTMLElement {
             });
           });
         }
+        if (ms) {
+          ms.setOptions([{ value: 'a', name: 'Aneta' }, { value: 'b', name: 'Beata' }, { value: 't', name: 'Tomáš' }]);
+          setTimeout(() => {
+            ms.removeSelectedOption({ value: 'a', name: 'Aneta' });
+            ms.getSelectedOptions().then((t) => console.log(t));
+          }, 5000);
+        }
         if (moja) {
           moja.setOptions([{ value: 'd', label: 'Value D' }, { value: 'e', label: 'Value E' }, {
               value: 'f',
@@ -85,6 +93,14 @@ class FormsPage extends HTMLElement {
     })();
     this.innerHTML = `
 
+	<gov-form-control>
+				<gov-form-label size="m" slot="top">Multiselect</gov-form-label>
+				<gov-form-group>
+					<gov-form-multi-select name="test-me" size="xl" id="poleno">
+					</gov-form-multi-select>
+				</gov-form-group>
+			</gov-form-control>
+
 			<gov-form-control>
 				<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>
 				<gov-form-group>