@gov-design-system-ce/components 4.2.8 → 4.2.9

package/dist/collection/components/gov-control-group/gov-control-group.js

@@ -8,11 +8,15 @@ export class GovControlGroup {
         /**
          * Style variation of the content message.
          */
-        this.color = Colors.PRIMARY;
+        this.color = Colors.NEUTRAL;
         /**
          * Specifies the display of the border between elements
          */
         this.noBorder = false;
+        /**
+         * Specifies the display of the border between elements
+         */
+        this.noInnerBorder = false;
         /**
          * Specifies the display of elements to full width
          */
@@ -23,7 +27,7 @@ export class GovControlGroup {
         validateProp(Colors, newValue, ControlGroupClass.root);
     }
     render() {
-        return (h(Host, { key: '74d339e88105be80b3f335aa2af1155ab23099c8', class: this.h.classes(ControlGroupClass.root), color: this.color }, h("slot", { key: 'e3af09285370470ad4e1ca9e6b225ca98708cebc' })));
+        return (h(Host, { key: '859a426f1cc42cd3ece558131e20ea9ebbd047f7', class: this.h.classes(ControlGroupClass.root), color: this.color }, h("slot", { key: 'bf7c2f0e7b64aecebfd0b356999d1d0b5e354f3e' })));
     }
     static get is() { return "gov-control-group"; }
     static get properties() {
@@ -34,7 +38,7 @@ export class GovControlGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "ControlGroupColorType",
-                    "resolved": "\"error\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "resolved": "\"error\" | \"neutral\" | \"primary\"",
                     "references": {
                         "ControlGroupColorType": {
                             "location": "import",
@@ -52,7 +56,7 @@ export class GovControlGroup {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "Colors.PRIMARY"
+                "defaultValue": "Colors.NEUTRAL"
             },
             "noBorder": {
                 "type": "boolean",
@@ -74,6 +78,26 @@ export class GovControlGroup {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "noInnerBorder": {
+                "type": "boolean",
+                "attribute": "no-inner-border",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the display of the border between elements"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "fitContent": {
                 "type": "boolean",
                 "attribute": "fit-content",

package/dist/collection/components/gov-control-group/gov-control-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"gov-control-group.js","sourceRoot":"","sources":["../../../../../../src/components/gov-control-group/gov-control-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAA;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,iBAAiB,EAAyB,MAAM,aAAa,CAAA;AAKtE,MAAM,OAAO,eAAe;IAG3B;QAKA;;WAEG;QACc,UAAK,GAA0B,MAAM,CAAC,OAAO,CAAA;QAC9D;;WAEG;QACwC,aAAQ,GAAY,KAAK,CAAA;QACpE;;WAEG;QAC0C,eAAU,GAAY,KAAK,CAAA;QAfvE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAiBD,aAAa,CAAC,QAAgB;QAC7B,YAAY,CAAC,MAAM,EAAE,QAAQ,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAA;IACvD,CAAC;IAED,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDACJ,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAC7C,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,8DAAQ,CACF,CACP,CAAA;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\"\nimport { Colors } from \"../../core/constants/colors\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { ControlGroupClass, ControlGroupColorType } from \"./constants\"\n\n@Component({\n\ttag: \"gov-control-group\",\n})\nexport class GovControlGroup {\n\tprivate readonly h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovControlGroupElement\n\t/**\n\t * Style variation of the content message.\n\t */\n\t@Prop() readonly color: ControlGroupColorType = Colors.PRIMARY\n\t/**\n\t * Specifies the display of the border between elements\n\t */\n\t@Prop({ attribute: \"no-border\" }) readonly noBorder: boolean = false\n\t/**\n\t * Specifies the display of elements to full width\n\t */\n\t@Prop({ attribute: \"fit-content\" }) readonly fitContent: boolean = false\n\n\t@Watch(\"color\")\n\tvalidateColor(newValue: string): void {\n\t\tvalidateProp(Colors, newValue, ControlGroupClass.root)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes(ControlGroupClass.root)}\n\t\t\t\tcolor={this.color}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"gov-control-group.js","sourceRoot":"","sources":["../../../../../../src/components/gov-control-group/gov-control-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAA;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,iBAAiB,EAAyB,MAAM,aAAa,CAAA;AAKtE,MAAM,OAAO,eAAe;IAG3B;QAKA;;WAEG;QACc,UAAK,GAA0B,MAAM,CAAC,OAAO,CAAA;QAC9D;;WAEG;QACwC,aAAQ,GAAY,KAAK,CAAA;QACpE;;WAEG;QAC8C,kBAAa,GAAY,KAAK,CAAA;QAC/E;;WAEG;QAC0C,eAAU,GAAY,KAAK,CAAA;QAnBvE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC3B;IAqBD,aAAa,CAAC,QAAgB;QAC7B,YAAY,CAAC,MAAM,EAAE,QAAQ,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAA;IACvD,CAAC;IAED,MAAM;QACL,OAAO,CACN,EAAC,IAAI,qDACJ,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAC7C,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,8DAAQ,CACF,CACP,CAAA;IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\"\nimport { Colors } from \"../../core/constants/colors\"\nimport { govHost } from \"../../helpers/Dom/template\"\nimport { GovHost } from \"../../helpers/Dom/template.types\"\nimport { validateProp } from \"../../helpers/Validate/props\"\nimport { ControlGroupClass, ControlGroupColorType } from \"./constants\"\n\n@Component({\n\ttag: \"gov-control-group\",\n})\nexport class GovControlGroup {\n\tprivate readonly h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovControlGroupElement\n\t/**\n\t * Style variation of the content message.\n\t */\n\t@Prop() readonly color: ControlGroupColorType = Colors.NEUTRAL\n\t/**\n\t * Specifies the display of the border between elements\n\t */\n\t@Prop({ attribute: \"no-border\" }) readonly noBorder: boolean = false\n\t/**\n\t * Specifies the display of the border between elements\n\t */\n\t@Prop({ attribute: \"no-inner-border\" }) readonly noInnerBorder: boolean = false\n\t/**\n\t * Specifies the display of elements to full width\n\t */\n\t@Prop({ attribute: \"fit-content\" }) readonly fitContent: boolean = false\n\n\t@Watch(\"color\")\n\tvalidateColor(newValue: string): void {\n\t\tvalidateProp(Colors, newValue, ControlGroupClass.root)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={this.h.classes(ControlGroupClass.root)}\n\t\t\t\tcolor={this.color}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/pages/ControlGroup.js

@@ -57,7 +57,7 @@ class ControlGroupPage extends HTMLElement {
 			<gov-button color="primary" type="outlined" size="s">
 				<gov-icon slot="icon-start" name="chevron-down"></gov-icon>
 			</gov-button>
-			<gov-button color="primary" type="outlined" size="s">
+			<gov-button color="primary" type="solid" size="s">
 				<gov-icon slot="icon-start" name="x-lg"></gov-icon>
 			</gov-button>
 			<gov-dropdown position="right">
@@ -94,9 +94,12 @@ class ControlGroupPage extends HTMLElement {
 			<gov-button color="primary" type="solid" size="m">
 				<gov-icon slot="icon-start" name="x-lg"></gov-icon>
 			</gov-button>
+			<gov-button color="primary" type="solid" size="m">
+				<gov-icon slot="icon-start" name="search"></gov-icon>
+			</gov-button>
 		</gov-control-group>
 		<br />
-		<gov-control-group fit-content no-border>
+		<gov-control-group color="primary" fit-content no-inner-border>
 			<gov-button color="primary" type="outlined" size="l">
 				<gov-icon slot="icon-start" name="gear"></gov-icon>
 			</gov-button>
@@ -110,7 +113,7 @@ class ControlGroupPage extends HTMLElement {
 			</gov-button>
 		</gov-control-group>
 		<br><br>
-		<gov-control-group color="primary" no-border>
+		<gov-control-group color="neutral" no-inner-border>
 			<gov-button color="primary" type="outlined" size="xl">
 				<gov-icon slot="icon-start" name="chevron-up"></gov-icon>
 			</gov-button>
@@ -127,6 +130,94 @@ class ControlGroupPage extends HTMLElement {
 				<gov-icon slot="icon-start" name="x-lg"></gov-icon>
 			</gov-button>
 		</gov-control-group>
+
+		<br /><br />
+		<h3>Neutral</h3>
+		<gov-control-group color="neutral" fit-content>
+			<gov-button color="primary" type="base" size="m">
+				Button
+			</gov-button>
+			<gov-button color="primary" type="base" size="m">
+				<gov-icon slot="icon-start" name="info-circle"></gov-icon>
+			</gov-button>
+		</gov-control-group>
+
+		<br />
+		<h3>Primary</h3>
+		<gov-control-group color="primary" fit-content>
+			<gov-button color="primary" type="outlined" size="m">
+				Button
+			</gov-button>
+			<gov-dropdown position="left">
+				<gov-button color="primary" type="outlined" size="m">
+					<gov-icon slot="icon-start" name="chevron-down"></gov-icon>
+				</gov-button>
+				<ul slot="list" role="menu">
+					<li role="presentation">
+						<gov-button color="primary" type="base" size="l" expanded role="menuitem">
+							A další nabídka
+							<gov-icon slot="icon-end" name="search"></gov-icon>
+						</gov-button>
+					</li>
+					<li role="presentation">
+						<gov-button color="primary" type="base" size="l" expanded role="menuitem">
+							A další dlouhá nabídka
+							<gov-icon slot="icon-end" name="search"></gov-icon>
+						</gov-button>
+					</li>
+					<li role="presentation">
+						<gov-button color="primary" type="base" size="l" expanded role="menuitem">
+							A další
+							<gov-icon slot="icon-end" name="search"></gov-icon>
+						</gov-button>
+					</li>
+				</ul>
+			</gov-dropdown>
+		</gov-control-group>
+
+		<br />
+		<h3>Error</h3>
+		<gov-control-group color="error" fit-content>
+			<gov-button color="error" type="outlined" size="m">
+				Button
+			</gov-button>
+			<gov-button color="error" type="outlined" size="m">
+				<gov-icon slot="icon-start" name="gear"></gov-icon>
+			</gov-button>
+		</gov-control-group>
+
+		<br /><br />
+		<h3>No border</h3>
+		<gov-control-group no-border fit-content>
+			<gov-button color="primary" type="solid" size="m">
+				Button
+			</gov-button>
+			<gov-button color="primary" type="solid" size="m">
+				<gov-icon slot="icon-start" name="search"></gov-icon>
+			</gov-button>
+		</gov-control-group>
+
+		<br />
+		<h3>No inner border</h3>
+		<gov-control-group no-inner-border fit-content>
+			<gov-button color="warning" type="solid" size="m">
+				Button
+			</gov-button>
+			<gov-button color="warning" type="solid" size="m">
+				<gov-icon slot="icon-start" name="bookmarks"></gov-icon>
+			</gov-button>
+		</gov-control-group>
+
+		<br />
+		<h3>No border - No inner border</h3>
+		<gov-control-group no-border no-inner-border fit-content>
+			<gov-button color="warning" type="solid" size="m">
+				Button
+			</gov-button>
+			<gov-button color="warning" type="solid" size="m">
+				<gov-icon slot="icon-start" name="bookmarks"></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;IACzC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+HhB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,oBAAoB,CAAC,KAAK,SAAS,EAAE,CAAC;IAC5D,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CAAA;AAC9D,CAAC","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-button color=\"primary\" type=\"outlined\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"icon-start\" name=\"chevron-up\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button color=\"primary\" type=\"outlined\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"icon-start\" name=\"chevron-down\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-form-select name=\"test-me\" color=\"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 color=\"primary\" type=\"solid\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"icon-start\" 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 disabled fit-content>\n\t\t\t<gov-form-select name=\"test-me\" color=\"neutral\" size=\"m\" disabled>\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 color=\"neutral\" type=\"solid\" size=\"m\" disabled>\n\t\t\t\t<gov-icon slot=\"icon-start\" 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 invalid fit-content>\n\t\t\t<gov-form-select name=\"test-me\" color=\"error\" size=\"m\" invalid>\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-form-input type=\"number\" id=\"kapr\" name=\"test-me\" placeholder=\"Placeholder\" size=\"m\"></gov-form-input>\n\t\t\t<gov-button color=\"error\" type=\"solid\" size=\"m\">\n\t\t\t\tOdeslat\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br><br>\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 color=\"primary\" type=\"outlined\" size=\"s\">\n\t\t\t\t<gov-icon slot=\"icon-start\" name=\"chevron-up\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button color=\"primary\" type=\"outlined\" size=\"s\">\n\t\t\t\t<gov-icon slot=\"icon-start\" name=\"chevron-down\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button color=\"primary\" type=\"outlined\" size=\"s\">\n\t\t\t\t<gov-icon slot=\"icon-start\" 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 color=\"primary\" type=\"solid\" 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 color=\"primary\" type=\"base\" size=\"s\" expanded>\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 color=\"primary\" type=\"base\" size=\"s\" expanded>\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 color=\"primary\" type=\"base\" size=\"s\" expanded>\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 color=\"primary\" 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 color=\"primary\" type=\"solid\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"icon-start\" 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 fit-content no-border>\n\t\t\t<gov-button color=\"primary\" type=\"outlined\" size=\"l\">\n\t\t\t\t<gov-icon slot=\"icon-start\" 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 color=\"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 color=\"primary\" type=\"outlined\" size=\"l\">\n\t\t\t\t<gov-icon slot=\"icon-start\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br><br>\n\t\t<gov-control-group color=\"primary\" no-border>\n\t\t\t<gov-button color=\"primary\" type=\"outlined\" size=\"xl\">\n\t\t\t\t<gov-icon slot=\"icon-start\" name=\"chevron-up\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button color=\"primary\" type=\"outlined\" size=\"xl\">\n\t\t\t\t<gov-icon slot=\"icon-start\" 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 color=\"primary\" type=\"outlined\" size=\"xl\">\n\t\t\t\t<gov-icon slot=\"icon-start\" 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;IACzC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0NhB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,oBAAoB,CAAC,KAAK,SAAS,EAAE,CAAC;IAC5D,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CAAA;AAC9D,CAAC","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-button color=\"primary\" type=\"outlined\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"icon-start\" name=\"chevron-up\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button color=\"primary\" type=\"outlined\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"icon-start\" name=\"chevron-down\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-form-select name=\"test-me\" color=\"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 color=\"primary\" type=\"solid\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"icon-start\" 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 disabled fit-content>\n\t\t\t<gov-form-select name=\"test-me\" color=\"neutral\" size=\"m\" disabled>\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 color=\"neutral\" type=\"solid\" size=\"m\" disabled>\n\t\t\t\t<gov-icon slot=\"icon-start\" 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 invalid fit-content>\n\t\t\t<gov-form-select name=\"test-me\" color=\"error\" size=\"m\" invalid>\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-form-input type=\"number\" id=\"kapr\" name=\"test-me\" placeholder=\"Placeholder\" size=\"m\"></gov-form-input>\n\t\t\t<gov-button color=\"error\" type=\"solid\" size=\"m\">\n\t\t\t\tOdeslat\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br><br>\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 color=\"primary\" type=\"outlined\" size=\"s\">\n\t\t\t\t<gov-icon slot=\"icon-start\" name=\"chevron-up\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button color=\"primary\" type=\"outlined\" size=\"s\">\n\t\t\t\t<gov-icon slot=\"icon-start\" name=\"chevron-down\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button color=\"primary\" type=\"solid\" size=\"s\">\n\t\t\t\t<gov-icon slot=\"icon-start\" 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 color=\"primary\" type=\"solid\" 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 color=\"primary\" type=\"base\" size=\"s\" expanded>\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 color=\"primary\" type=\"base\" size=\"s\" expanded>\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 color=\"primary\" type=\"base\" size=\"s\" expanded>\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 color=\"primary\" 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 color=\"primary\" type=\"solid\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"icon-start\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button color=\"primary\" type=\"solid\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"icon-start\" name=\"search\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br />\n\t\t<gov-control-group color=\"primary\" fit-content no-inner-border>\n\t\t\t<gov-button color=\"primary\" type=\"outlined\" size=\"l\">\n\t\t\t\t<gov-icon slot=\"icon-start\" 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 color=\"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 color=\"primary\" type=\"outlined\" size=\"l\">\n\t\t\t\t<gov-icon slot=\"icon-start\" name=\"x-lg\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br><br>\n\t\t<gov-control-group color=\"neutral\" no-inner-border>\n\t\t\t<gov-button color=\"primary\" type=\"outlined\" size=\"xl\">\n\t\t\t\t<gov-icon slot=\"icon-start\" name=\"chevron-up\"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button color=\"primary\" type=\"outlined\" size=\"xl\">\n\t\t\t\t<gov-icon slot=\"icon-start\" 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 color=\"primary\" type=\"outlined\" size=\"xl\">\n\t\t\t\t<gov-icon slot=\"icon-start\" 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<h3>Neutral</h3>\n\t\t<gov-control-group color=\"neutral\" fit-content>\n\t\t\t<gov-button color=\"primary\" type=\"base\" size=\"m\">\n\t\t\t\tButton\n\t\t\t</gov-button>\n\t\t\t<gov-button color=\"primary\" type=\"base\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"icon-start\" name=\"info-circle\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\n\t\t<br />\n\t\t<h3>Primary</h3>\n\t\t<gov-control-group color=\"primary\" fit-content>\n\t\t\t<gov-button color=\"primary\" type=\"outlined\" size=\"m\">\n\t\t\t\tButton\n\t\t\t</gov-button>\n\t\t\t<gov-dropdown position=\"left\">\n\t\t\t\t<gov-button color=\"primary\" type=\"outlined\" size=\"m\">\n\t\t\t\t\t<gov-icon slot=\"icon-start\" name=\"chevron-down\"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<ul slot=\"list\" role=\"menu\">\n\t\t\t\t\t<li role=\"presentation\">\n\t\t\t\t\t\t<gov-button color=\"primary\" type=\"base\" size=\"l\" expanded role=\"menuitem\">\n\t\t\t\t\t\t\tA další nabídka\n\t\t\t\t\t\t\t<gov-icon slot=\"icon-end\" name=\"search\"></gov-icon>\n\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li role=\"presentation\">\n\t\t\t\t\t\t<gov-button color=\"primary\" type=\"base\" size=\"l\" expanded role=\"menuitem\">\n\t\t\t\t\t\t\tA další dlouhá nabídka\n\t\t\t\t\t\t\t<gov-icon slot=\"icon-end\" name=\"search\"></gov-icon>\n\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li role=\"presentation\">\n\t\t\t\t\t\t<gov-button color=\"primary\" type=\"base\" size=\"l\" expanded role=\"menuitem\">\n\t\t\t\t\t\t\tA další\n\t\t\t\t\t\t\t<gov-icon slot=\"icon-end\" name=\"search\"></gov-icon>\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\n\t\t<br />\n\t\t<h3>Error</h3>\n\t\t<gov-control-group color=\"error\" fit-content>\n\t\t\t<gov-button color=\"error\" type=\"outlined\" size=\"m\">\n\t\t\t\tButton\n\t\t\t</gov-button>\n\t\t\t<gov-button color=\"error\" type=\"outlined\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"icon-start\" name=\"gear\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\n\t\t<br /><br />\n\t\t<h3>No border</h3>\n\t\t<gov-control-group no-border fit-content>\n\t\t\t<gov-button color=\"primary\" type=\"solid\" size=\"m\">\n\t\t\t\tButton\n\t\t\t</gov-button>\n\t\t\t<gov-button color=\"primary\" type=\"solid\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"icon-start\" name=\"search\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\n\t\t<br />\n\t\t<h3>No inner border</h3>\n\t\t<gov-control-group no-inner-border fit-content>\n\t\t\t<gov-button color=\"warning\" type=\"solid\" size=\"m\">\n\t\t\t\tButton\n\t\t\t</gov-button>\n\t\t\t<gov-button color=\"warning\" type=\"solid\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"icon-start\" name=\"bookmarks\"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\n\t\t<br />\n\t\t<h3>No border - No inner border</h3>\n\t\t<gov-control-group no-border no-inner-border fit-content>\n\t\t\t<gov-button color=\"warning\" type=\"solid\" size=\"m\">\n\t\t\t\tButton\n\t\t\t</gov-button>\n\t\t\t<gov-button color=\"warning\" type=\"solid\" size=\"m\">\n\t\t\t\t<gov-icon slot=\"icon-start\" name=\"bookmarks\"></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

@@ -653,6 +653,17 @@ class FormsPage extends HTMLElement {
 	</gov-form-group>
 </gov-form-control>
 <br>
+<gov-form-search name="test-me-d" checked size="m" color="neutral">
+	<gov-form-control>
+		<gov-form-group>
+			<gov-form-input slot="input" size="m" name="test-me-d" placeholder="Co hledáte"></gov-form-input>
+		</gov-form-group>
+	</gov-form-control>
+	<gov-button slot="button" color="primary" size="s" type="solid">
+		<gov-icon slot="icon-start" name="search"></gov-icon>
+	</gov-button>
+</gov-form-search>
+<br>
 <gov-form-control>
 	<gov-form-group>
 		<gov-form-search name="test-me-c" value="me" size="l" color="neutral">
@@ -730,7 +741,7 @@ class FormsPage extends HTMLElement {
 <gov-form-control>
 	<gov-form-label size="s" slot="top">Přidat přílohu</gov-form-label>
 	<gov-form-group>
-		<gov-form-file size="m" id="test-me-ujo" display-attachments="false" multiple accept=".pdf,.jpg,.png,.jpeg" max-file-size="616448" required="true">
+		<gov-form-file size="m" id="test-me-ujo" display-attachments="true" multiple accept=".pdf,.jpg,.png,.jpeg" max-file-size="616448" required="true">
 			<p>
 				<gov-button color="primary" type="outlined" size="m" tabindex="-1">
 					<gov-icon type="components" name="search"></gov-icon>