comand-component-library 3.1.93 → 3.1.94

package/src/assets/fonts/iconfonts/logos-iconfont/images/flags/flag-it.svg

@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="850.394px" height="566.929px" viewBox="0 0 850.394 566.929" enable-background="new 0 0 850.394 566.929"
+	 xml:space="preserve">
+<g id="it">
+	<g>
+		<rect fill="#078E46" width="283.465" height="566.929"/>
+		<rect x="283.465" fill="#FBFDFF" width="283.465" height="566.929"/>
+		<rect x="566.93" fill="#D3242C" width="283.465" height="566.929"/>
+	</g>
+</g>
+<g id="de" display="none">
+	<g display="inline">
+		<desc>Flag of Germany</desc>
+		<rect id="black_stripe" x="0.901" fill="#010202" width="849.492" height="566.929"/>
+		<rect id="red_stripe" x="0.901" y="188.977" fill="#DD0B15" width="849.492" height="377.953"/>
+		<rect id="gold_stripe" x="0.901" y="377.953" fill="#FFCE05" width="849.492" height="188.976"/>
+	</g>
+</g>
+<g id="fr" display="none">
+	<g display="inline">
+		<rect x="0.901" fill="#CF1327" width="849.492" height="566.929"/>
+		<rect x="0.901" fill="#FFFFFF" width="566.328" height="566.929"/>
+		<rect x="0.901" fill="#1D2C4E" width="283.164" height="566.929"/>
+	</g>
+</g>
+<g id="ru" display="none">
+	<g display="inline">
+		<rect fill="#FFFFFF" width="850.395" height="283.465"/>
+		<rect y="283.465" fill="#D52D1E" width="850.395" height="283.464"/>
+		<rect y="188.977" fill="#1E4295" width="850.395" height="188.977"/>
+	</g>
+</g>
+<g id="cn" display="none">
+	<g display="inline">
+		<rect x="0.901" fill="#DF2B14" width="849.493" height="566.929"/>
+		<g transform="translate(5,5) scale(3)">
+			<path id="s" fill="#FFDE08" d="M142.483,56.693l49.932,153.838L61.692,115.454h161.583L92.551,210.531L142.483,56.693z"/>
+		</g>
+		<g transform="translate(10,2) rotate(23.036243)">
+			<path id="s_1_" fill="#FFDE08" d="M295.146,30.607l-4.728,53.71l-27.711-46.234l49.566,21.099l-52.488,12.096L295.146,30.607z"/>
+		</g>
+		<g transform="translate(12,4) rotate(45.869898)">
+			<path id="s_2_" fill="#FFDE08" d="M361.022,93.648l-25.178,47.665l-7.617-53.376l37.503,38.701l-53.064-9.243L361.022,93.648z"/>
+		</g>
+		<g transform="translate(12,7) rotate(69.945396)">
+			<path id="s_3_" fill="#FFDE08" d="M367.298,188.705l-42.412,33.236l14.797-51.844l18.47,50.649l-44.682-30.108L367.298,188.705z"
+				/>
+		</g>
+		<g transform="translate(10,9) rotate(20.659808)">
+			<path id="s_4_" fill="#FFDE08" d="M294.056,228.595l-2.5,53.86l-29.603-45.045l50.397,19.024l-51.942,14.264L294.056,228.595z"/>
+		</g>
+	</g>
+</g>
+<g id="uk" display="none">
+	<g display="inline">
+		<rect y="0.002" fill="#FFFFFF" width="850.16" height="566.865"/>
+		<polygon fill="#CF172C" points="382.569,0 382.569,226.625 0,226.625 0,339.948 382.569,339.948 382.569,566.863 467.592,566.863 
+			467.592,339.948 850.16,339.948 850.16,226.625 467.592,226.625 467.592,0 		"/>
+		<polygon fill="#25346C" points="495.946,0 495.946,183.497 771.202,0 		"/>
+		<polygon fill="#25346C" points="495.946,566.863 771.202,566.863 495.946,383.368 		"/>
+		<polygon fill="#25346C" points="78.96,566.863 354.214,566.863 354.214,383.368 		"/>
+		<polygon fill="#25346C" points="78.96,0 354.214,183.497 354.214,0 		"/>
+		<polygon fill="#25346C" points="0.003,188.95 204.392,188.95 0.003,52.699 		"/>
+		<polygon fill="#25346C" points="645.768,188.95 850.16,188.95 850.16,52.699 		"/>
+		<polygon fill="#25346C" points="645.768,377.913 850.16,514.171 850.16,377.913 		"/>
+		<polygon fill="#25346C" points="0,377.913 0,514.171 204.392,377.913 		"/>
+		<polygon fill="#CF172C" points="802.938,0 520.004,188.95 567.223,188.95 850.605,0 		"/>
+		<polygon fill="#CF172C" points="330.156,377.909 282.937,377.909 0,566.852 47.219,566.852 330.602,377.909 		"/>
+		<polygon fill="#CF172C" points="0,0 0,31.692 236.091,189.098 283.311,189.098 		"/>
+		<polygon fill="#CF172C" points="566.696,377.832 850.008,566.929 850.01,535.239 613.92,377.832 		"/>
+	</g>
+</g>
+</svg>

package/src/assets/fonts/iconfonts/logos-iconfont/images/flags/flag-ru.svg

@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="850.394px" height="566.929px" viewBox="0 0 850.394 566.929" enable-background="new 0 0 850.394 566.929"
+	 xml:space="preserve">
+<g id="it">
+	<g>
+		<rect fill="#078E46" width="283.465" height="566.929"/>
+		<rect x="283.465" fill="#FBFDFF" width="283.465" height="566.929"/>
+		<rect x="566.93" fill="#D3242C" width="283.465" height="566.929"/>
+	</g>
+</g>
+<g id="de">
+	<g>
+		<desc>Flag of Germany</desc>
+		<rect id="black_stripe" x="0.901" fill="#010202" width="849.492" height="566.929"/>
+		<rect id="red_stripe" x="0.901" y="188.977" fill="#DD0B15" width="849.492" height="377.953"/>
+		<rect id="gold_stripe" x="0.901" y="377.953" fill="#FFCE05" width="849.492" height="188.976"/>
+	</g>
+</g>
+<g id="fr">
+	<g>
+		<rect x="0.901" fill="#CF1327" width="849.492" height="566.929"/>
+		<rect x="0.901" fill="#FFFFFF" width="566.328" height="566.929"/>
+		<rect x="0.901" fill="#1D2C4E" width="283.164" height="566.929"/>
+	</g>
+</g>
+<g id="ru">
+	<g>
+		<rect fill="#FFFFFF" width="850.395" height="283.465"/>
+		<rect y="283.465" fill="#D52D1E" width="850.395" height="283.464"/>
+		<rect y="188.977" fill="#1E4295" width="850.395" height="188.977"/>
+	</g>
+</g>
+<g id="cn" display="none">
+	<g display="inline">
+		<rect x="0.901" fill="#DF2B14" width="849.493" height="566.929"/>
+		<g transform="translate(5,5) scale(3)">
+			<path id="s" fill="#FFDE08" d="M142.483,56.693l49.932,153.838L61.692,115.454h161.583L92.551,210.531L142.483,56.693z"/>
+		</g>
+		<g transform="translate(10,2) rotate(23.036243)">
+			<path id="s_1_" fill="#FFDE08" d="M295.146,30.607l-4.728,53.71l-27.711-46.234l49.566,21.099l-52.488,12.096L295.146,30.607z"/>
+		</g>
+		<g transform="translate(12,4) rotate(45.869898)">
+			<path id="s_2_" fill="#FFDE08" d="M361.022,93.648l-25.178,47.665l-7.617-53.376l37.503,38.701l-53.064-9.243L361.022,93.648z"/>
+		</g>
+		<g transform="translate(12,7) rotate(69.945396)">
+			<path id="s_3_" fill="#FFDE08" d="M367.298,188.705l-42.412,33.236l14.797-51.844l18.47,50.649l-44.682-30.108L367.298,188.705z"
+				/>
+		</g>
+		<g transform="translate(10,9) rotate(20.659808)">
+			<path id="s_4_" fill="#FFDE08" d="M294.056,228.595l-2.5,53.86l-29.603-45.045l50.397,19.024l-51.942,14.264L294.056,228.595z"/>
+		</g>
+	</g>
+</g>
+<g id="uk" display="none">
+	<g display="inline">
+		<rect y="0.002" fill="#FFFFFF" width="850.16" height="566.865"/>
+		<polygon fill="#CF172C" points="382.569,0 382.569,226.625 0,226.625 0,339.948 382.569,339.948 382.569,566.863 467.592,566.863 
+			467.592,339.948 850.16,339.948 850.16,226.625 467.592,226.625 467.592,0 		"/>
+		<polygon fill="#25346C" points="495.946,0 495.946,183.497 771.202,0 		"/>
+		<polygon fill="#25346C" points="495.946,566.863 771.202,566.863 495.946,383.368 		"/>
+		<polygon fill="#25346C" points="78.96,566.863 354.214,566.863 354.214,383.368 		"/>
+		<polygon fill="#25346C" points="78.96,0 354.214,183.497 354.214,0 		"/>
+		<polygon fill="#25346C" points="0.003,188.95 204.392,188.95 0.003,52.699 		"/>
+		<polygon fill="#25346C" points="645.768,188.95 850.16,188.95 850.16,52.699 		"/>
+		<polygon fill="#25346C" points="645.768,377.913 850.16,514.171 850.16,377.913 		"/>
+		<polygon fill="#25346C" points="0,377.913 0,514.171 204.392,377.913 		"/>
+		<polygon fill="#CF172C" points="802.938,0 520.004,188.95 567.223,188.95 850.605,0 		"/>
+		<polygon fill="#CF172C" points="330.156,377.909 282.937,377.909 0,566.852 47.219,566.852 330.602,377.909 		"/>
+		<polygon fill="#CF172C" points="0,0 0,31.692 236.091,189.098 283.311,189.098 		"/>
+		<polygon fill="#CF172C" points="566.696,377.832 850.008,566.929 850.01,535.239 613.92,377.832 		"/>
+	</g>
+</g>
+</svg>

package/src/assets/styles/logos-iconfont.css

@@ -1,8 +1,8 @@
-/* logos-iconfont.css - last update: 2021/04/25 by Raphael Biock - IT IS NOT RECOMMENDED TO EDIT THIS FILE (TO AVOID TROUBLESHOOTING AFTER UPDATING) - DO CHANGES IN template.css OR YOUR OWN iconfont-css-file */
+/* logos-iconfont.css - last update: 2022/09/22 - IT IS NOT RECOMMENDED TO EDIT THIS FILE (TO AVOID TROUBLESHOOTING AFTER UPDATING) - DO CHANGES IN template.css OR YOUR OWN iconfont-css-file */
 
 @font-face {
   font-family: 'icomoon';
-  src:  url('../fonts/iconfonts/logos-iconfont/icomoon.woff?qgpl9e') format('woff');
+  src:  url('../fonts/iconfonts/logos-iconfont/icomoon.woff?fgweog') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -56,66 +56,72 @@
 .icon-git:before {
   content: "\b10a";
 }
-.icon-google-analytics:before {
+.icon-github:before {
   content: "\b10b";
 }
-.icon-html5:before {
+.icon-google-analytics:before {
   content: "\b10c";
 }
-.icon-instagram:before {
+.icon-html5:before {
   content: "\b10d";
 }
-.icon-linkedin:before {
+.icon-instagram:before {
   content: "\b10e";
 }
-.icon-linkedin-square:before {
+.icon-linkedin:before {
   content: "\b10f";
 }
-.icon-linux:before {
+.icon-linkedin-square:before {
   content: "\b110";
 }
-.icon-meta:before {
+.icon-linux:before {
   content: "\b111";
 }
-.icon-opera:before {
+.icon-meta:before {
   content: "\b112";
 }
-.icon-paypal:before {
+.icon-opera:before {
   content: "\b113";
 }
-.icon-safari:before {
+.icon-paypal:before {
   content: "\b114";
 }
-.icon-skype:before {
+.icon-safari:before {
   content: "\b115";
 }
-.icon-tumblr:before {
+.icon-skype:before {
   content: "\b116";
 }
-.icon-tumblr-square:before {
+.icon-tumblr:before {
   content: "\b117";
 }
-.icon-twitch:before {
+.icon-tumblr-square:before {
   content: "\b118";
 }
-.icon-twitter:before {
+.icon-twitch:before {
   content: "\b119";
 }
-.icon-twitter-square:before {
+.icon-twitter:before {
   content: "\b11a";
 }
-.icon-whatsapp:before {
+.icon-twitter-square:before {
   content: "\b11b";
 }
-.icon-windows8:before {
+.icon-vue:before {
   content: "\b11c";
 }
-.icon-xing:before {
+.icon-whatsapp:before {
   content: "\b11d";
 }
-.icon-xing-square:before {
+.icon-windows8:before {
   content: "\b11e";
 }
-.icon-youtube:before {
+.icon-xing:before {
   content: "\b11f";
 }
+.icon-xing-square:before {
+  content: "\b120";
+}
+.icon-youtube:before {
+  content: "\b121";
+}

package/src/components/CmdCompanyLogo.vue

@@ -108,6 +108,8 @@ export default {
 @import '../assets/styles/variables';
 
 .cmd-company-logo {
+    grid-area: company-logo;
+
     > a {
         display: block;
 

package/src/components/CmdMainNavigation.vue

@@ -259,6 +259,8 @@ export default {
 @import '../assets/styles/variables';
 
 .cmd-main-navigation {
+    grid-area: main-navigation;
+
     &.hide-sub-navigation {
         ul {
             ul {

package/src/components/CmdSiteHeader.vue

@@ -1,15 +1,16 @@
 <template>
     <div :class="['cmd-site-header', { sticky: sticky, 'navigation-inline': navigationInline }]" role="banner">
         <!-- begin slot for elements above header -->
-        <div class="top-header">
-            <slot name="top-header"></slot>
+        <div v-if="$slots.topheader" class="top-header">
+            <slot name="topheader"></slot>
         </div>
         <!-- end for elements above header -->
 
         <!-- begin header-wrapper with slots for logo and other header elements -->
-        <header v-if="$slots.logo || $slots.header" :class="useGrid ? 'grid-container-create-columns': 'flex-container'">
+        <header v-if="$slots.logo || $slots.header || $slots.navigation" :class="useGrid ? 'grid-container-create-columns': 'flex-container'">
             <slot name="logo"></slot>
             <slot name="header"></slot>
+            <slot name="navigation"></slot>
         </header>
         <!-- end header-wrapper with slots for logo and other header elements -->
 
@@ -24,7 +25,7 @@
             <!-- begin CmdMainNavigation -->
             <CmdMainNavigation
                 v-if="cmdMainNavigation?.navigationEntries?.length"
-                v-bind="cmdMainNavigation"
+                :navigationEntries="cmdMainNavigation.navigationEntries"
                 :closeOffcanvas="closeOffcanvas"
             />
             <!-- end CmdMainNavigation -->
@@ -81,14 +82,14 @@ export default {
          */
         cmdCompanyLogo: {
             type: Object,
-            required: true
+            required: false
         },
         /**
          * properties for CmdMainNavigation-component
          */
         cmdMainNavigation: {
             type: Object,
-            required: true
+            required: false
         }
     }
 }
@@ -117,6 +118,10 @@ export default {
         padding: 0 var(--default-padding);
     }
 
+    &:not(.navigation-inline) header {
+        padding-bottom: 0;
+    }
+
     .cmd-main-navigation nav {
         width: auto;
     }
@@ -128,6 +133,16 @@ export default {
         }
     }
 
+    #main-navigation-wrapper {
+        grid-column: span var(--grid-columns);
+        border-bottom: 0;
+
+        nav {
+            padding: 0;
+
+        }
+    }
+
     // use id to ensure high specificity
     > .cmd-main-navigation#main-navigation-wrapper:last-child {
         border-bottom: 0;
@@ -136,6 +151,8 @@ export default {
     header {
         padding-top: calc(var(--default-padding) * 2);
         padding-bottom: calc(var(--default-padding) * 2);
+        grid-template-rows: 1fr min-content;
+        grid-template-areas: "company-logo" "main-navigation";
 
         &.flex-container {
             width: 100%;
@@ -159,6 +176,37 @@ export default {
             grid-column: span var(--grid-small-span);
         }
     }
+
+    &.navigation-inline {
+        header {
+            grid-template-rows: 1fr;
+            grid-template-areas: "company-logo main-navigation";
+
+            .cmd-company-logo {
+                grid-column: span var(--grid-small-span);
+            }
+
+            #main-navigation-wrapper {
+                display: flex;
+                border: 0;
+                grid-column: span var(--grid-large-span);
+                background: none;
+
+                :where(nav, .nav) {
+                    margin-right: 0;
+
+                    ul {
+                        border: 0;
+                        background: none;
+
+                        li {
+                            border: 0;
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 
 @media only screen and (max-width: $medium-max-width) {

package/src/assets/images/logo-darkmode.svg

@@ -1,44 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
-	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
-	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
-	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
-	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
-	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
-	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
-	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
-	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
-]>
-<svg version="1.1" id="Ebene_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
-	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="377.066px"
-	 height="61.419px" viewBox="0 0 377.066 61.419" enable-background="new 0 0 377.066 61.419" xml:space="preserve">
-<metadata>
-	<sfw  xmlns="&ns_sfw;">
-		<slices></slices>
-		<sliceSourceBounds  height="-32766" width="-32766" x="8498" y="24970" bottomLeftOrigin="true"></sliceSourceBounds>
-	</sfw>
-</metadata>
-<g>
-	<path fill="#FFFFFF" d="M56.842,12.896l-4.56,3.499c-2.516-3.275-5.536-5.759-9.06-7.449c-3.525-1.69-7.396-2.535-11.615-2.535
-		c-4.612,0-8.883,1.107-12.814,3.321c-3.931,2.215-6.977,5.188-9.139,8.923c-2.162,3.734-3.243,7.934-3.243,12.598
-		c0,7.049,2.417,12.932,7.252,17.649c4.834,4.717,10.933,7.075,18.297,7.075c8.097,0,14.871-3.17,20.321-9.512l4.56,3.459
-		c-2.883,3.669-6.479,6.505-10.79,8.51c-4.311,2.005-9.126,3.007-14.445,3.007c-10.115,0-18.095-3.367-23.938-10.102
-		c-4.9-5.686-7.35-12.552-7.35-20.597c0-8.464,2.967-15.585,8.903-21.364c5.936-5.778,13.371-8.667,22.307-8.667
-		c5.398,0,10.272,1.068,14.622,3.204C50.5,6.051,54.064,9.044,56.842,12.896z"/>
-	<path fill="#FFFFFF" d="M132.665,59.986l8.278-57.82h0.939l23.506,47.443l23.28-47.443h0.926l8.321,57.82h-5.667l-5.713-41.351
-		l-20.444,41.351h-1.477l-20.688-41.666l-5.68,41.666H132.665z"/>
-	<path fill="#FFFFFF" d="M232.897,2.166l26.965,57.82h-6.241l-9.094-19.024h-24.909l-9.008,19.024h-6.446l27.318-57.82H232.897z
-		 M232.168,14.451l-9.907,20.93h19.768L232.168,14.451z"/>
-	<path fill="#FFFFFF" d="M268.863,59.986V2.166h1.258l38.481,44.322V2.166h5.699v57.82h-1.297l-38.167-43.783v43.783H268.863z"/>
-	<path fill="#FFFFFF" d="M328.375,59.986V2.166h11.988c8.647,0,14.923,0.694,18.828,2.083c5.607,1.965,9.99,5.372,13.148,10.22
-		c3.157,4.849,4.736,10.626,4.736,17.334c0,5.792-1.252,10.888-3.754,15.291c-2.503,4.402-5.752,7.652-9.748,9.748
-		c-3.996,2.097-9.598,3.145-16.804,3.145H328.375z M333.917,54.522h6.683c7.992,0,13.534-0.497,16.627-1.492
-		c4.349-1.414,7.769-3.959,10.259-7.639c2.489-3.679,3.734-8.176,3.734-13.491c0-5.577-1.351-10.342-4.049-14.295
-		c-2.699-3.954-6.46-6.663-11.281-8.13c-3.616-1.099-9.578-1.649-17.885-1.649h-4.088V54.522z"/>
-</g>
-<g>
-	<path fill="#FFFFFF" d="M108.432,6.745l13.924,24.117l-13.924,24.116H80.584L66.66,30.862L80.584,6.745H108.432 M111.318,1.745
-		H77.697L60.887,30.862l16.811,29.116h33.621l16.811-29.116L111.318,1.745L111.318,1.745z"/>
-</g>
-</svg>