npm - @gov-design-system-ce/components - Versions diffs - 4.1.0 → 4.1.2 - Mend

@gov-design-system-ce/components 4.1.0 → 4.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (510) hide show

package/dist/collection/helpers/Dom/document.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"document.js","sourceRoot":"","sources":["../../../../../../src/helpers/Dom/document.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAE/B,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,IAAY,EAAE,KAAa,EAAE,IAAa,EAAE,EAAE;IACvE,IAAI,CAAC,QAAQ,EAAE,CAAC;QACf,OAAM;IACP,CAAC;IACD,IAAI,OAAO,GAAG,EAAE,CAAC;IACjB,IAAI,IAAI,EAAE,CAAC;QACV,MAAM,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC;QACxB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,IAAI,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC;QAC5D,OAAO,GAAG,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IAC7C,CAAC;IACD,QAAQ,CAAC,MAAM,GAAG,GAAG,IAAI,IAAI,kBAAkB,CAAC,KAAK,CAAC,GAAG,OAAO,UAAU,CAAC;AAC5E,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,IAAY,EAAoB,EAAE;IAC3D,IAAI,CAAC,QAAQ,EAAE,CAAC;QACf,OAAO,IAAI,CAAA;IACZ,CAAC;IACD,MAAM,MAAM,GAAG,IAAI,GAAG,GAAG,CAAC;IAC1B,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC3C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACzC,IAAI,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;QAC/B,IAAI,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,CAAC;YAC/B,OAAO,kBAAkB,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;QAC5D,CAAC;IACF,CAAC;IACD,OAAO,IAAI,CAAC;AACb,CAAC,CAAA","sourcesContent":["import {Nullable} from \"../../utils/helpers.types\";\nimport {isWindow} from \"./win\";\n\nexport const setCookie = (name: string, value: string, days?: number) => {\n\tif (!isWindow) {\n\t\treturn\n\t}\n\tlet expires = \"\";\n\tif (days) {\n\t\tconst date = new Date();\n\t\tdate.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));\n\t\texpires = \"; expires=\" + date.toUTCString();\n\t}\n\tdocument.cookie = `${name}=${encodeURIComponent(value)}${expires}; path=/`;\n}\n\nexport const getCookie = (name: string): Nullable<string> => {\n\tif (!isWindow) {\n\t\treturn null\n\t}\n\tconst nameEQ = name + \"=\";\n\tconst cookies = document.cookie.split(';');\n\tfor (let i = 0; i < cookies.length; i++) {\n\t\tlet cookie = cookies[i].trim();\n\t\tif (cookie.startsWith(nameEQ)) {\n\t\t\treturn decodeURIComponent(cookie.substring(nameEQ.length));\n\t\t}\n\t}\n\treturn null;\n}\n"]}
1	+ {"version":3,"file":"document.js","sourceRoot":"","sources":["../../../../../../src/helpers/Dom/document.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAE/B,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,IAAY,EAAE,KAAa,EAAE,IAAa,EAAE,EAAE;IACvE,IAAI,CAAC,QAAQ,EAAE,CAAC;QACf,OAAM;IACP,CAAC;IACD,IAAI,OAAO,GAAG,EAAE,CAAC;IACjB,IAAI,IAAI,EAAE,CAAC;QACV,MAAM,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC;QACxB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,IAAI,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC;QAC5D,OAAO,GAAG,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IAC7C,CAAC;IACD,QAAQ,CAAC,MAAM,GAAG,GAAG,IAAI,IAAI,kBAAkB,CAAC,KAAK,CAAC,GAAG,OAAO,UAAU,CAAC;AAC5E,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,IAAY,EAAoB,EAAE;IAC3D,IAAI,CAAC,QAAQ,EAAE,CAAC;QACf,OAAO,IAAI,CAAA;IACZ,CAAC;IACD,MAAM,MAAM,GAAG,IAAI,GAAG,GAAG,CAAC;IAC1B,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC3C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACzC,IAAI,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;QAC/B,IAAI,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,CAAC;YAC/B,OAAO,kBAAkB,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;QAC5D,CAAC;IACF,CAAC;IACD,OAAO,IAAI,CAAC;AACb,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,UAAkB,EAAW,EAAE;IACzD,IAAI,CAAC;QACJ,MAAM,MAAM,GAAG,IAAI,SAAS,EAAE,CAAC;QAC/B,MAAM,GAAG,GAAG,MAAM,CAAC,eAAe,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC;QAChE,MAAM,UAAU,GAAG,GAAG,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QACpD,IAAI,UAAU,EAAE,CAAC;YAChB,OAAO,KAAK,CAAC;QACd,CAAC;QACD,MAAM,UAAU,GAAG,GAAG,CAAC,eAAe,CAAC;QACvC,IAAI,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,KAAK,EAAE,CAAC;YAChD,OAAO,KAAK,CAAC;QACd,CAAC;QACD,OAAO,IAAI,CAAC;IACb,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QAChB,OAAO,KAAK,CAAC;IACd,CAAC;AACF,CAAC,CAAA","sourcesContent":["import {Nullable} from \"../../utils/helpers.types\";\nimport {isWindow} from \"./win\";\n\nexport const setCookie = (name: string, value: string, days?: number) => {\n\tif (!isWindow) {\n\t\treturn\n\t}\n\tlet expires = \"\";\n\tif (days) {\n\t\tconst date = new Date();\n\t\tdate.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));\n\t\texpires = \"; expires=\" + date.toUTCString();\n\t}\n\tdocument.cookie = `${name}=${encodeURIComponent(value)}${expires}; path=/`;\n}\n\nexport const getCookie = (name: string): Nullable<string> => {\n\tif (!isWindow) {\n\t\treturn null\n\t}\n\tconst nameEQ = name + \"=\";\n\tconst cookies = document.cookie.split(';');\n\tfor (let i = 0; i < cookies.length; i++) {\n\t\tlet cookie = cookies[i].trim();\n\t\tif (cookie.startsWith(nameEQ)) {\n\t\t\treturn decodeURIComponent(cookie.substring(nameEQ.length));\n\t\t}\n\t}\n\treturn null;\n}\n\nexport const isValidSVG = (svgContent: string): boolean => {\n\ttry {\n\t\tconst parser = new DOMParser();\n\t\tconst doc = parser.parseFromString(svgContent, \"image/svg+xml\");\n\t\tconst parseError = doc.querySelector(\"parsererror\");\n\t\tif (parseError) {\n\t\t\treturn false;\n\t\t}\n\t\tconst svgElement = doc.documentElement;\n\t\tif (svgElement.tagName.toLowerCase() !== \"svg\") {\n\t\t\treturn false;\n\t\t}\n\t\treturn true;\n\t} catch (error) {\n\t\treturn false;\n\t}\n}\n"]}

package/dist/collection/pages/Card.js CHANGED Viewed

@@ -2,34 +2,12 @@ class CardPage extends HTMLElement {
     connectedCallback() {
         this.innerHTML = `
-		<gov-container style="width: 800px;">
+		<gov-container style="max-width: 800px;">
 			<h2>Card</h2>
-			<gov-card collapsible open="true">
-				<h3 slot="headline">Fusce tellus odio, dapibus id fermentum quis</h3>
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>
-			</gov-card>
-			<br>
-			<gov-card collapsible>
-				<h3 slot="headline">Fusce tellus odio, dapibus id fermentum quis</h3>
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>
-				<gov-button color="primary" size="s" type="solid" href="http://localhost:3333/button">
-					Button
-				</gov-button>
-				<p slot="footer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>
-			</gov-card>
-			<br>
+			<h3>Vertical</h3>
 			<gov-card>
-				<h3 slot="headline">Fusce tellus odio, dapibus id fermentum quis</h3>
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>
-				<gov-button color="primary" size="s" type="solid" href="http://localhost:3333/button">
-					Button
-				</gov-button>
-				<p slot="footer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>
-			</gov-card>
-			<br>
-			<gov-card expanded>
-				<img slot="img" src="https://picsum.photos/536/354" src="" alt="Obárzek" width="536" height="354">
+				<img slot="img" src="https://picsum.photos/536/354" alt="Obárzek" width="536" height="354">
 				<p><b>Commodo consequat.</b></p>
 				<p>Commodo consequat. Nullam rhoncus aliquam metus.</p>
 				<gov-button color="primary" size="s" type="solid" href="http://localhost:3333/button">
@@ -41,33 +19,40 @@ class CardPage extends HTMLElement {
 			</gov-card>
 			<br>
 			<gov-card>
-				<h3 slot="headline">Fusce tellus odio, dapibus id fermentum quis</h3>
-				<gov-icon name="car" type="complex"></gov-icon>
+				<gov-icon slot="icon" name="car" type="complex" color="primary"></gov-icon>
+				<h4>Fusce tellus odio, dapibus id fermentum quis</h4>
 				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>
 				<gov-button color="primary" size="s" type="outlined" href="http://localhost:3333/button">
 					Learn more
 				</gov-button>
 			</gov-card>
 			<br>
-			<h3>Promotion</h3>
-			<gov-card promotion>
-				<gov-icon slot="icon" name="car" type="complex"></gov-icon>
+			<gov-card collapsible>
+				<h3 slot="headline">Fusce tellus odio, dapibus id fermentum quis</h3>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>
+				<gov-button color="primary" size="s" type="solid" href="http://localhost:3333/button">
+					Button
+				</gov-button>
+				<p slot="footer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>
+			</gov-card>
+			<br>
+			<h3>Horizontal</h3>
+			<gov-card direction="horizontal">
+				<img slot="img" src="https://picsum.photos/536/354" alt="Obárzek" width="536" height="354">
 				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>
-				<gov-button slot="btn" color="primary" size="s" type="outlined" href="http://localhost:3333/button">
+				<gov-button color="primary" size="s" type="outlined" href="http://localhost:3333/button">
 					Learn more
 				</gov-button>
 			</gov-card>
-			<gov-container style="width: 350px; margin-top: 16px;">
-			<gov-card promotion>
+			<br>
+			<gov-card direction="horizontal">
 				<gov-icon slot="icon" name="car" type="complex"></gov-icon>
 				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>
-				<gov-button slot="btn" color="primary" size="s" type="outlined" href="http://localhost:3333/button">
+				<gov-button color="primary" size="s" type="outlined" href="http://localhost:3333/button">
 					Learn more
 				</gov-button>
 			</gov-card>
-			</div>
-		</div>
+		</gov-container>
 		`;
     }
 }

package/dist/collection/pages/Card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../../src/pages/Card.ts"],"names":[],"mappings":"AAAA,MAAM,QAAS,SAAQ,WAAW;IACjC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEhB~~,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IACnD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;AAC7C,CAAC","sourcesContent":["class CardPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\n\t\t<gov-container style=\"width: 800px;\">\n\t\t\t<h2>Card</h2>\n\n\t\t\t<~~gov-card collapsible open=\"true\">\n\t\t\t\t<~~h3 ~~slot=\"headline\"~~>~~Fusce tellus odio, dapibus id fermentum quis~~</h3>\n\t\t\t\t<~~p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t</~~gov-card>\n\t\t\t~~<br>\n~~\t\t\~~t<gov-card~~ ~~collapsible~~>\n\t\t\t\t<~~h3 slot=\"headline\"~~>~~Fusce~~ ~~tellus odio, dapibus id fermentum quis</h3~~>\n\t\t\t\t<p>~~Lorem~~ ~~ipsum dolor sit amet, consectetur adipiscing elit~~. ~~Ipsum~~ ~~vitae~~ ~~etiam~~ ~~dui eget lectus vulputate ornare~~.</p>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"solid\" href=\"http://localhost:3333/button\">\n\t\t\t\t\~~tButton~~\n\t\t\t\t</gov-button>\n\t\t\t\t<~~p slot=\"footer\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t</~~gov-card>\n\t\t\t<br>\n\t\t\t<gov-card>\n\t\t\t\t<h3 slot=\"headline\">Fusce tellus odio, dapibus id fermentum quis</h3>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"~~solid~~\" href=\"http://localhost:3333/button\">\n\t\t\t\t\~~tButton~~\n\t\t\t\t</gov-button>\n\t\t\t~~\t<p slot=\"footer\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t~~</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card ~~expanded~~>\n\t\t\t\t<~~img~~ slot=\"~~img~~\" ~~src~~=\"~~https://picsum.photos/536/354~~\" ~~src~~=\"\" ~~alt~~=\"~~Obárzek~~\" ~~width=\"536\" height=\"354\"~~>\n\t\t\t\t<~~p><b~~>~~Commodo~~ ~~consequat.</b></p~~>\n\t\t\t\t<p>~~Commodo~~ ~~consequat~~. ~~Nullam~~ ~~rhoncus~~ ~~aliquam~~ ~~metus.</p>\n\t\t\t\t<gov-button~~ ~~color=\"primary\"~~ ~~size=\"s\"~~ ~~type=\"solid\"~~ ~~href=\"http://localhost:3333/button\">\n\t\t\t\t\tJak~~ ~~založit\n\t\t\t\t</gov-button~~>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"outlined\" href=\"http://localhost:3333/button\">\n\t\t\t\t\~~tZjistit~~ ~~více~~\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card>\n\t\t\t\t<h3 slot=\"headline\">Fusce tellus odio, dapibus id fermentum quis</h3>\n\t\t\t\t<~~gov-icon name=\"car\" type=\"complex\"></gov-icon>\n\t\t\t\t<~~p>Lorem ipsum dolor sit amet, ~~consectetuer~~ adipiscing elit. ~~Cras~~ ~~elementum.~~ ~~Fusce~~ ~~tellus~~ ~~odio,~~ ~~dapibus~~ id ~~fermentum quis, suscipit id erat. Fusce tellus~~.</p>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"~~outlined~~\" href=\"http://localhost:3333/button\">\n\t\t\t\t\~~tLearn more~~\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<h3>~~Promotion~~</h3>\n\t\t\t<gov-card ~~promotion~~>\n\t\t\t\t<~~gov-icon~~ slot=\"~~icon~~\" ~~name~~=\"~~car~~\" ~~type~~=\"~~complex~~\"~~></gov-icon~~>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>\n\t\t\t\t<gov-button ~~slot=\"btn\"~~ color=\"primary\" size=\"s\" type=\"outlined\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<~~gov-container style=\"width: 350px; margin-top: 16px;\"~~>\n\t\t\t<gov-card ~~promotion~~>\n\t\t\t\t<gov-icon slot=\"icon\" name=\"car\" type=\"complex\"></gov-icon>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>\n\t\t\t\t<gov-button ~~slot=\"btn\"~~ color=\"primary\" size=\"s\" type=\"outlined\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t</~~div~~>\n\t\t~~</div>\n\n\t\t~~`\n\t}\n}\n\nif (customElements.get('card-page') === undefined) {\n\tcustomElements.define('card-page', CardPage)\n}\n"]}
1	+ {"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../../src/pages/Card.ts"],"names":[],"mappings":"AAAA,MAAM,QAAS,SAAQ,WAAW;IACjC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDhB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IACnD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;AAC7C,CAAC","sourcesContent":["class CardPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\n\t\t<gov-container style=\"max-width: 800px;\">\n\t\t\t<h2>Card</h2>\n\n\t\t\t<h3>Vertical</h3>\n\t\t\t<gov-card>\n\t\t\t\t<img slot=\"img\" src=\"https://picsum.photos/536/354\" alt=\"Obárzek\" width=\"536\" height=\"354\">\n\t\t\t\t<p><b>Commodo consequat.</b></p>\n\t\t\t\t<p>Commodo consequat. Nullam rhoncus aliquam metus.</p>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"solid\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tJak založit\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"outlined\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tZjistit více\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card>\n\t\t\t\t<gov-icon slot=\"icon\" name=\"car\" type=\"complex\" color=\"primary\"></gov-icon>\n\t\t\t\t<h4>Fusce tellus odio, dapibus id fermentum quis</h4>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"outlined\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card collapsible>\n\t\t\t\t<h3 slot=\"headline\">Fusce tellus odio, dapibus id fermentum quis</h3>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"solid\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tButton\n\t\t\t\t</gov-button>\n\t\t\t\t<p slot=\"footer\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<h3>Horizontal</h3>\n\t\t\t<gov-card direction=\"horizontal\">\n\t\t\t\t<img slot=\"img\" src=\"https://picsum.photos/536/354\" alt=\"Obárzek\" width=\"536\" height=\"354\">\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"outlined\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card direction=\"horizontal\">\n\t\t\t\t<gov-icon slot=\"icon\" name=\"car\" type=\"complex\"></gov-icon>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>\n\t\t\t\t<gov-button color=\"primary\" size=\"s\" type=\"outlined\" href=\"http://localhost:3333/button\">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t</gov-container>\n\t\t`\n\t}\n}\n\nif (customElements.get('card-page') === undefined) {\n\tcustomElements.define('card-page', CardPage)\n}\n"]}

package/dist/collection/pages/Flex.js ADDED Viewed

@@ -0,0 +1,62 @@
+class FlexPage extends HTMLElement {
+    connectedCallback() {
+        this.innerHTML = `
+		<style>
+			gov-flex { min-height: 100px; border: 1px solid var(--color-neutral-200); }
+			p { margin-bottom: 0; background-color: var(--color-neutral-100); }
+		</style>
+		<h2>Flex</h2>
+		<gov-flex justify-content="space-between" align-items="center">
+			<p>Text vlevo</p>
+			<p>Text uprostřed</p>
+			<p>Text vpravo</p>
+		</gov-flex>
+		<br>
+		<gov-flex gap="xl">
+			<p>Text vlevo</p>
+			<p>Text uprostřed</p>
+			<p>Text vpravo</p>
+		</gov-flex>
+		<br>
+		<gov-flex align-items="flex-end">
+			<p>Text vlevo</p>
+			<p>Text uprostřed</p>
+			<p>Text vpravo</p>
+		</gov-flex>
+		<br>
+		<gov-flex direction="column">
+			<p>Text vlevo</p>
+			<p>Text uprostřed</p>
+			<p>Text vpravo</p>
+		</gov-flex>
+		<br>
+		<gov-flex wrap="wrap" align-content="space-around">
+			<p>Text vlevo Text vlevo Text vlevo Text vlevo Text vlevo Text vlevo Text vlevo</p>
+			<p>Text uprostřed Text uprostřed Text uprostřed Text uprostřed Text uprostřed Text uprostřed Text uprostřed</p>
+			<p>Text vpravo Text vpravo Text vpravo Text vpravo Text vpravo Text vpravo Text vpravo</p>
+		</gov-flex>
+		<br>
+		<gov-flex>
+			<gov-flex style="min-height: 50px;" align-self="center">
+				<p>Text vlevo</p>
+				<p>Text uprostřed</p>
+				<p>Text vpravo</p>
+			</gov-flex>
+			<gov-flex style="min-height: 50px;">
+				<p>Text vlevo</p>
+				<p>Text uprostřed</p>
+				<p>Text vpravo</p>
+			</gov-flex>
+			<gov-flex style="min-height: 50px;">
+				<p>Text vlevo</p>
+				<p>Text uprostřed</p>
+				<p>Text vpravo</p>
+			</gov-flex>
+		</gov-flex>
+		`;
+    }
+}
+if (customElements.get('flex-page') === undefined) {
+    customElements.define('flex-page', FlexPage);
+}
+//# sourceMappingURL=Flex.js.map

package/dist/collection/pages/Flex.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Flex.js","sourceRoot":"","sources":["../../../../../src/pages/Flex.ts"],"names":[],"mappings":"AAAA,MAAM,QAAS,SAAQ,WAAW;IACjC,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDhB,CAAA;IACF,CAAC;CACD;AAED,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IACnD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;AAC7C,CAAC","sourcesContent":["class FlexPage extends HTMLElement {\n\tconnectedCallback() {\n\t\tthis.innerHTML = `\n\t\t<style>\n\t\t\tgov-flex { min-height: 100px; border: 1px solid var(--color-neutral-200); }\n\t\t\tp { margin-bottom: 0; background-color: var(--color-neutral-100); }\n\t\t</style>\n\t\t<h2>Flex</h2>\n\t\t<gov-flex justify-content=\"space-between\" align-items=\"center\">\n\t\t\tText vlevo\n\t\t\tText uprostřed\n\t\t\tText vpravo\n\t\t</gov-flex>\n\t\t \n\t\t<gov-flex gap=\"xl\">\n\t\t\tText vlevo\n\t\t\tText uprostřed\n\t\t\tText vpravo\n\t\t</gov-flex>\n\t\t \n\t\t<gov-flex align-items=\"flex-end\">\n\t\t\tText vlevo\n\t\t\tText uprostřed\n\t\t\tText vpravo\n\t\t</gov-flex>\n\t\t \n\t\t<gov-flex direction=\"column\">\n\t\t\tText vlevo\n\t\t\tText uprostřed\n\t\t\tText vpravo\n\t\t</gov-flex>\n\t\t \n\t\t<gov-flex wrap=\"wrap\" align-content=\"space-around\">\n\t\t\tText vlevo Text vlevo Text vlevo Text vlevo Text vlevo Text vlevo Text vlevo\n\t\t\tText uprostřed Text uprostřed Text uprostřed Text uprostřed Text uprostřed Text uprostřed Text uprostřed\n\t\t\tText vpravo Text vpravo Text vpravo Text vpravo Text vpravo Text vpravo Text vpravo\n\t\t</gov-flex>\n\t\t \n\t\t<gov-flex>\n\t\t\t<gov-flex style=\"min-height: 50px;\" align-self=\"center\">\n\t\t\t\tText vlevo\n\t\t\t\tText uprostřed\n\t\t\t\tText vpravo\n\t\t\t</gov-flex>\n\t\t\t<gov-flex style=\"min-height: 50px;\">\n\t\t\t\tText vlevo\n\t\t\t\tText uprostřed\n\t\t\t\tText vpravo\n\t\t\t</gov-flex>\n\t\t\t<gov-flex style=\"min-height: 50px;\">\n\t\t\t\tText vlevo\n\t\t\t\tText uprostřed\n\t\t\t\tText vpravo\n\t\t\t</gov-flex>\n\t\t</gov-flex>\n\t\t`\n\t}\n}\n\nif (customElements.get('flex-page') === undefined) {\n\tcustomElements.define('flex-page', FlexPage)\n}\n"]}

package/dist/collection/pages/Forms.js CHANGED Viewed

@@ -2068,15 +2068,15 @@ class FormsPage extends HTMLElement {
 	</gov-form-message>
 </gov-form-control>
 <h2 id="switch">Theme switch</h2>
-<gov-theme-switch size="xs" label-light="Světlý mód" label-dark="Tmavý mód"></gov-theme-switch>
+<gov-theme-switch size="xs" label-light="Světloulinký" label-dark="Tmavoulinký" display-label="true"></gov-theme-switch>
 <br>
-<gov-theme-switch size="s" label-light="Světlý mód" label-dark="Tmavý mód"></gov-theme-switch>
+<gov-theme-switch size="s" label-light="Světloučký" label-dark="Tmavoučký" display-label="true"></gov-theme-switch>
 <br>
-<gov-theme-switch size="m" label-light="Světlý mód" label-dark="Tmavý mód"></gov-theme-switch>
+<gov-theme-switch size="m" label-light="Light" label-dark="Dark" display-label="true"></gov-theme-switch>
 <br>
-<gov-theme-switch size="l" label-light="Světlý mód" label-dark="Tmavý mód"></gov-theme-switch>
+<gov-theme-switch size="l" display-label="true"></gov-theme-switch>
 <br>
-<gov-theme-switch size="xl" label-light="Světlý mód" label-dark="Tmavý mód"></gov-theme-switch>
+<gov-theme-switch size="xl" display-label="true"></gov-theme-switch>
 		`;
     }
 }