Merge pull request #171 from CruGlobal/align-text-attribute

Text align to use value from admin
CruGlobal · Nov 18, 2024 · 88d170f · 88d170f
2 parents cc090a2 + 7601693
commit 88d170f
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 10 deletions.
diff --git a/src/app/_tests/mocks.ts b/src/app/_tests/mocks.ts
@@ -60,10 +60,13 @@ const standardTypeValues = () => {
 const createText = (text: string): Text => {
   return {
     text: text,
-    textAlign: null,
-    textColor: null,
+    textAlign: {
+      name: 'START',
+      ordinal: 0
+    },
+    textColor: '#000000',
     textScale: null,
-    _textStyles: null,
+    _textStyles: [],
     minimumLines: null,
     startImage: null,
     startImageSize: null,

diff --git a/src/app/page/component/content-text/content-text.component.ts b/src/app/page/component/content-text/content-text.component.ts
@@ -54,14 +54,28 @@ export class ContentTextComponent implements OnChanges {
   }
 
   private init(): void {
-    const styles = {};
-    this.text?.textStyles?.forEach((style) => {
-      if (style.name === 'BOLD') styles['font-weight'] = 'bold';
-      if (style.name === 'ITALIC') styles['font-style'] = 'italic';
-      if (style.name === 'UNDERLINE') styles['text-decoration'] = 'underline';
-    });
+    const styles = {
+      'font-weight': this.text.textStyles?.some(
+        (style) => style.name === 'BOLD'
+      )
+        ? 'bold'
+        : '',
+      'font-style': this.text.textStyles?.some(
+        (style) => style.name === 'ITALIC'
+      )
+        ? 'italic'
+        : '',
+      'text-decoration': this.text.textStyles?.some(
+        (style) => style.name === 'UNDERLINE'
+      )
+        ? 'underline'
+        : '',
+      'text-align': this.text.textAlign.name || '',
+      color: this.text.textColor || ''
+    };
+
+    this.textColor = this.text?.textColor || null;
     this.styles = styles;
-    this.textColor = this.text.textColor || null;
     const text = parseTextAddBrTags(this.text.text);
     this.textValue = text || '';
     this.ready = true;