comand-component-library 4.2.76 → 4.2.78

package/src/components/CmdHeadline.vue

@@ -2,15 +2,15 @@
     <!-- begin CmdHeadline ---------------------------------------------------------------------------------------- -->
     <!-- begin default-view -->
     <div v-if="!editModeContext || settingsContext || mainSidebarContext || headlineText"
-         :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': cmdIcon?.iconClass}, headlineTextAlign]">
+         :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': cmdIcon?.iconClass}]">
         <!-- begin headline with pre-headline-text -->
         <template v-if="preHeadlineText">
-            <component v-if="headlineText" :is="headlineTag" :class="highlightLevel">
+            <component v-if="headlineText" :is="headlineTag" :class="[highlightLevel, headlineTextAlign]">
                 <!-- begin CmdIcon -->
                 <CmdIcon v-if="cmdIcon" v-bind="cmdIcon"/>
                 <!-- end CmdIcon -->
 
-                <span class="pre-headline-text-wrapper">
+                <span :class="['pre-headline-text-wrapper', 'text-align-' + textAlign]">
                     <!-- begin pre-headline-text -->
                     <span class="pre-headline-text" v-html="preHeadlineText"></span>
                     <!-- end pre-headline-text -->
@@ -178,7 +178,7 @@ export default {
          */
         textAlign: {
             type: String,
-            default: null,
+            default: "left",
             validator(value) {
                 return value === "left" ||
                     value === "center" ||
@@ -208,7 +208,14 @@ export default {
         },
         headlineTextAlign() {
             if (this.textAlign) {
-                return "text-" + this.textAlign
+                switch (this.textAlign) {
+                    case "right":
+                        return "justify-content-flex-end"
+                    case "center":
+                        return "justify-content-center"
+                    default:
+                        return "justify-content-flex-start"
+                }
             }
             return ""
         }

package/src/components/CmdSiteHeader.vue

@@ -106,7 +106,7 @@ export default {
          */
         resizeHeaderOnScroll: {
             type: Boolean,
-            default: true
+            default: false
         },
         /**
          * set selector for element that scrolls content to resize header

package/src/components/CmdSystemMessage.vue

@@ -3,7 +3,7 @@
     <transition :name="transition">
         <div
             v-if="showSystemMessage"
-            :class="['cmd-system-message', 'system-message', 'flex-container', 'vertical', { 'full-width': fullWidth }, validationStatus]"
+            :class="['cmd-system-message', 'system-message', 'flex-container', 'vertical', { 'full-width': fullWidth }, 'text-align-' + textAlign, validationStatus]"
             :role="validationStatus === 'error' ? 'alert' : 'dialog'"
             :aria-labelledby="htmlId"
         >
@@ -15,6 +15,7 @@
                     :cmdIcon="headlineIcon"
                     :headlineText="systemMessage"
                     :headlineLevel="messageHeadlineLevel"
+                    :textAlign="textAlign"
                     :id="htmlId"
                 />
                 <!-- end CmdHeadline -->
@@ -48,10 +49,32 @@ export default {
     mixins: [Identifier],
     data() {
         return {
-            showSystemMessage: true
+            showSystemMessage: true,
+            id: this.ariaReferenceId || this.buildHtmlId("system-message") // mixin requires id to be defined
         }
     },
-    props: {
+    props:  {
+        /**
+         * define the text-align for the system message (will be inherited to CmdHeadline in slot)
+         * 
+         * @allowedValues: "left", "center", "right"
+         */
+        textAlign: {
+            type: String,
+            default: "center",
+            validator(value) {
+                return value === "left" ||
+                    value === "center" ||
+                    value === "right"
+            }
+        },
+        /** 
+         * define the aria-reference-id for the system message (will be used as aria-labelledby)
+         */
+        ariaReferenceId: {
+            type: String,
+            required: false
+        },
         /**
          * define the transition when system message disappears
          * 
@@ -78,7 +101,7 @@ export default {
             }
         },
         /**
-         * activate to stretch message-box as wide as parent container (else message-box is as wide as message (+padding))
+         * activate to stretch message-box as wide as parent container (else message-box is as wide as message (+ padding))
          */
         fullWidth: {
             type: Boolean,