@vixoniccom/aniversarios 1.2.3-dev.2 → 1.3.0-dev.1

package/.github/workflows/sonarqube.yml

@@ -0,0 +1,30 @@
+name: Sonarqube Analysis
+
+on:
+  push:
+    branches:
+      - development
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  sonarqube:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          # Disabling shallow clone is recommended for improving relevancy of reporting.
+          fetch-depth: 0
+
+      - name: SonarQube Scan
+        uses: sonarsource/sonarqube-scan-action@master
+        env:
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+          SONAR_HOST_URL: ${{ secrets.SONAR_HOST_URL }}
+      
+      - name: SonarQube Quality Gate Check
+        uses: sonarsource/sonarqube-quality-gate-action@master
+        timeout-minutes: 5
+        env:
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+          SONAR_HOST_URL: ${{ secrets.SONAR_HOST_URL }}

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.3.0-dev.1](https://github.com/Vixonic/store-aniversarios/compare/v1.3.0-dev.0...v1.3.0-dev.1) (2025-07-14)
+
+
+### Bug Fixes
+
+* Replace logical OR with nullish coalescing operator for default values in various components ([c9f2bba](https://github.com/Vixonic/store-aniversarios/commit/c9f2bbafcf44f38b1578b6946a19434f41e50f52))
+* Update maskId generation for unique identifiers in AnniversaryImage component ([6f5b452](https://github.com/Vixonic/store-aniversarios/commit/6f5b4525f640d8730488331c56aed5fb68378e56))
+* Update maskId generation for unique identifiers in AnniversaryImage component ([c9a3d43](https://github.com/Vixonic/store-aniversarios/commit/c9a3d43acc57f707a39a31f131fda6266f674f30))
+
+## [1.3.0-dev.0](https://github.com/Vixonic/store-aniversarios/compare/v1.2.3-dev.2...v1.3.0-dev.0) (2025-07-14)
+
+
+### Features
+
+* Add support for photo mode in settings and related components ([5eeab44](https://github.com/Vixonic/store-aniversarios/commit/5eeab443f73553239c940941fc6740b41601228b))
+
 ### [1.2.3-dev.2](https://github.com/Vixonic/store-aniversarios/compare/v1.2.3-dev.1...v1.2.3-dev.2) (2025-07-11)
 
 ### [1.2.3-dev.1](https://github.com/Vixonic/store-aniversarios/compare/v1.2.3-dev.0...v1.2.3-dev.1) (2025-07-09)

package/configuration/dataGroup/DataInputs.ts

@@ -25,6 +25,16 @@ export const dataInputs = [
     serviceType: 'RexmasAnniversarieService',
     show: serviceEnabled.rexmasServiceEnabled
   }),
+  new SelectInput({
+    id: 'photoMode',
+    label: 'Modo de fotos',
+    items: [
+      { label: 'Zip', value: 'zip' },
+      { label: 'En linea', value: 'online' }
+    ],
+    defaultValue: 'zip',
+    description: 'Selecciona el modo de fotos. Por defecto, Zip.'
+  }),
   new SelectAssetKna({
     id: 'photosZip',
     label: 'Archivo Zip para fotos',

package/configuration.json

@@ -40,6 +40,23 @@
           "type": "service-input",
           "serviceType": "RexmasAnniversarieService"
         },
+        {
+          "id": "photoMode",
+          "label": "Modo de fotos",
+          "type": "select-input",
+          "description": "Selecciona el modo de fotos. Por defecto, Zip.",
+          "items": [
+            {
+              "label": "Zip",
+              "value": "zip"
+            },
+            {
+              "label": "En linea",
+              "value": "online"
+            }
+          ],
+          "defaultValue": "zip"
+        },
         {
           "id": "photosZip",
           "label": "Archivo Zip para fotos",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vixoniccom/aniversarios",
   "alias": "Aniversarios",
-  "version": "1.2.3-dev.2",
+  "version": "1.3.0-dev.1",
   "description": "Muestra el día que el trabajador está de aniversario en la empresa.",
   "main": "main.js",
   "author": "",

package/sonar-project.properties

@@ -0,0 +1 @@
+sonar.projectKey=Vixonic_store-aniversarios_cb1129c3-491c-4ada-ac60-75ab0fad0c6a

package/src/App.tsx

@@ -10,7 +10,7 @@ interface Props {
 export const App: React.FunctionComponent<Props> = ({ start, appData, anniversaries }) => {
 
   const parameters = appData?.parameters
-  const [aniversariesElements, setAnniversariesElements] = useState<Anniversary[]>(anniversaries)
+  const [anniversariesElements, setAnniversariesElements] = useState<Anniversary[]>(anniversaries)
 
   useEffect(() => {
     setAnniversariesElements(anniversaries)
@@ -19,8 +19,8 @@ export const App: React.FunctionComponent<Props> = ({ start, appData, anniversar
   if (!appData) return null
 
   return (
-    (aniversariesElements.length === 0) ?
+    (anniversariesElements.length === 0) ?
       <FormattedText text={parameters?.defaultMessage ?? 'No hay ingresos para mostrar'} format={parameters?.defaultMessageFormat} />
-      : <Render appData={appData} start={start} anniversaries={aniversariesElements} />
+      : <Render appData={appData} start={start} anniversaries={anniversariesElements} />
   )
 }

package/src/components/AnniversaryItem/components/AnniversaryDate/CircleDate/index.tsx

@@ -20,8 +20,8 @@ export const CircleDate: React.FunctionComponent<Props> = ({ day, month, data })
         <circle fill={datePrimaryColor} cx='200' cy='200' r='200' />
         <foreignObject width='400' height='400'>
           <div style={{ height: 400, width: 400, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
-            <FormattedText text={AnniveraryDateUtils.getMonth(month, true)} format={Object.assign({}, dateMonthFormat, { fontSize: monthSize })} unit='px' />
-            <FormattedText text={AnniveraryDateUtils.getZeroLeadedText(day)} format={Object.assign({}, dateDayFormat, { fontSize: daySize })} unit='px' />
+            <FormattedText text={AnniveraryDateUtils.getMonth(month, true)} format={{...dateMonthFormat, fontSize: monthSize}} unit='px' />
+            <FormattedText text={AnniveraryDateUtils.getZeroLeadedText(day)} format={{...dateDayFormat, fontSize: daySize}} unit='px' />
           </div>
         </foreignObject>
       </g>

package/src/components/AnniversaryItem/components/AnniversaryDate/FlatDate/index.tsx

@@ -11,8 +11,8 @@ export const FlatDate: React.FunctionComponent<Props> = ({ month, day, data }: P
    const { abbreviatedMonths, dateDayFormat, dateMonthFormat, orientation, datePrimaryColor } = data.parameters
 
   const sizeProp = AnniveraryDateUtils.utils(orientation)
-  const monthSize = ((dateMonthFormat?.fontSize || 18.5) * 400) / 100
-  const daySize = ((dateDayFormat?.fontSize || 57.5) * 400) / 100
+  const monthSize = ((dateMonthFormat?.fontSize ?? 18.5) * 400) / 100
+  const daySize = ((dateDayFormat?.fontSize ?? 57.5) * 400) / 100
 
   const getFontFamily = (format: any) => {
     if (format?.font?.filename) return format.font.filename.replace('.', '-')
@@ -29,7 +29,7 @@ export const FlatDate: React.FunctionComponent<Props> = ({ month, day, data }: P
           textAnchor='middle'
           alignmentBaseline='central' x='200' y='55'
           fontSize={monthSize} preserveAspectRatio='none'
-          fill={dateMonthFormat?.fontColor || '#fff'} fontSizeAdjust=''>
+          fill={dateMonthFormat?.fontColor ?? '#fff'} fontSizeAdjust=''>
           {AnniveraryDateUtils.getMonth(month, abbreviatedMonths)}
         </text>
 
@@ -37,7 +37,7 @@ export const FlatDate: React.FunctionComponent<Props> = ({ month, day, data }: P
           textAnchor='middle'
           alignmentBaseline='central' x='200' y='245'
           fontSize={daySize} preserveAspectRatio='none'
-          fill={dateDayFormat?.fontColor || '#fff'} fontSizeAdjust=''>
+          fill={dateDayFormat?.fontColor ?? '#fff'} fontSizeAdjust=''>
           {AnniveraryDateUtils.getZeroLeadedText(day)}
         </text>
       </g>

package/src/components/AnniversaryItem/components/AnniversaryDate/OutlineDate/index.tsx

@@ -14,11 +14,10 @@ export const OutlineDate: React.FunctionComponent<Props> = ({ day, month, data }
   const sizeProp = AnniveraryDateUtils.utils(orientation)
 
   const parseFormat = (format: any, defaultSize: any) => {
-    return Object.assign(
-      {},
-      format,
-      { fontSize: format.fontSize || defaultSize }
-    )
+    return {
+      ...format,
+      fontSize: format.fontSize || defaultSize
+    }
   }
 
   const [monthFormatState,] = useState(parseFormat(dateMonthFormat, 20))

package/src/components/AnniversaryItem/components/AnniversaryDate/TextCalendarDate/index.tsx

@@ -13,11 +13,10 @@ export const TextCalendarDate: React.FunctionComponent<Props> = ({ day, month, d
   const sizeProp = AnniveraryDateUtils.utils(orientation, '100%')
 
   const parseFormat = (format: any, defaultSize: any) => {
-    return Object.assign(
-      {},
-      format,
-      { fontSize: format.fontSize || defaultSize }
-    )
+    return {
+      ...format,
+      fontSize: format.fontSize || defaultSize
+    }
   }
 
   const [monthFormatState,] = useState(parseFormat(dateMonthFormat, 20))

package/src/components/AnniversaryItem/components/AnniversaryDate/index.tsx

@@ -12,14 +12,6 @@ const itemStyles = {
   outlines: OutlineDate
 }
 
-interface itemStyles {
-  calendarFlat: string
-  calendarText: string
-  circle: string
-  text: string
-  outlines: string
-}
-
 interface Props {
   style: keyof typeof itemStyles,
   day: number,

package/src/components/AnniversaryItem/components/AnniversaryImage/index.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import { AnniveraryDateUtils } from '../AnniversaryDate/utils'
 
 const defaultImg = require('../default-profile.png')
+let idCounter = 0
 const borderStyles = {
   normal: '0',
   rounded: '10',
@@ -18,7 +19,7 @@ interface Props {
 export const AnniversaryImage: React.FunctionComponent<Props> = ({ url, size, borderStyle, orientation }) => {
   const [urlState, setUrlState] = useState(url || defaultImg)
   const input = useRef<SVGImageElement>(null)
-  const maskId = `${Math.random() * 10}${Math.random() * 10}${Math.random() * 10}`
+  const maskId = `mask-${Date.now()}-${++idCounter}`
   const imageExist = (url: any) => {
     const isValidImage = url.substr(-3).toLowerCase() === 'png' || url.substr(-3).toLowerCase() === 'jpg' || url.substr(-4).toLowerCase() === 'jpeg'
     return isValidImage ? url : defaultImg

package/src/components/AnniversaryItem/components/ClassicItem/index.tsx

@@ -14,11 +14,11 @@ export const ClassicItem: React.FunctionComponent<Props> = ({ anniversary, data
   const { parameters, downloadsPath } = data
   const { orientation, separatorColor, separatorWidth, imageSize } = parameters
   const [margins, setMargins] = useState(parseBorderMargin(parameters.itemMargins))
-  const [state, setState] = useState(Object.assign({}, parseParameters(parameters)))
+  const [state, setState] = useState({...parseParameters(parameters)})
 
   useEffect(() => {
     setMargins(parseBorderMargin(parameters.itemMargins))
-    setState(Object.assign({}, parseParameters(parameters)))
+    setState({...parseParameters(parameters)})
   }, [])
 
   const separatorProps = {
@@ -72,7 +72,7 @@ export const ClassicItem: React.FunctionComponent<Props> = ({ anniversary, data
         />
         {state.descriptionEnabled && (
           <FormattedText
-            text={anniversary.position || ''}
+            text={anniversary.position ?? ''}
             format={parameters.descriptionFormat}
             maxChar={Number(parameters.descriptionMaxChar)}
             lineHeight={1.2}
@@ -80,7 +80,7 @@ export const ClassicItem: React.FunctionComponent<Props> = ({ anniversary, data
         )}
         {state.optionalEnabled && (
           <FormattedText
-            text={anniversary.optional || ''}
+            text={anniversary.optional ?? ''}
             format={parameters.optionalFormat}
             maxChar={Number(parameters.descriptionMaxChar)}
             lineHeight={1.2}

package/src/components/AnniversaryItem/components/Separator/Separator.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 interface Props {
   order: number | undefined
   size: number | undefined
@@ -12,12 +10,12 @@ export const Separator = ({ order, size, color, orientation, margins }: Props) =
   const getSizeStyle = (orientation: any, size: any) => {
     if (orientation === 'h') {
       return {
-        width: size || 0,
+        width: size ?? 0,
         height: '100%'
       }
     } else {
       return {
-        height: size || 0,
+        height: size ?? 0,
         width: '100%'
       }
     }
@@ -29,7 +27,7 @@ export const Separator = ({ order, size, color, orientation, margins }: Props) =
     <div style={{
       flexShrink: 0,
       order: order,
-      backgroundColor: color || '',
+      backgroundColor: color ?? '',
       margin: margins,
       ...sizeStyle
     }} />

package/src/components/AnniversaryItem/components/utils.ts

@@ -1,11 +1,20 @@
 export const utils = (orientation: string, size: number) => {
   const sizeAttr = orientation === 'v' ? 'width' : 'height'
-  const percentage = size ? `${size}` : orientation === 'v' ? '40%' : '80%'
+  let percentage: string
+  if (size) {
+    percentage = `${size}%`
+  } else {
+    percentage = orientation === 'v' ? '40%' : '80%'
+  }
   return { [sizeAttr]: percentage }
 }
 
 export const parseBorderMargin = (marginString: any) => {
-  const pattern = /(( )?[+-]?[0-9]+.?([0-9]+)?(px|em|ex|%|in|cm|mm|pt|pc))?/g
+  const numberPattern = '[+-]?[0-9]+\\.?[0-9]*'
+  const unitPattern = '(px|em|ex|%|in|cm|mm|pt|pc)'
+  const spacePattern = '( )?'
+  const fullPattern = `(${spacePattern}${numberPattern}${unitPattern})?`
+  const pattern = new RegExp(fullPattern, 'g')
   const match = marginString ? marginString.match(pattern) : ['']
 
   switch (match.length) {
@@ -22,11 +31,11 @@ const parseElementStyles = (margin: string, position: number, defaultPosition: n
   const { orientation, separator } = parameters
   const marginAttr = orientation === 'v' ? 'marginBottom' : 'marginRight'
   const sizeAttr = orientation === 'v' ? 'width' : 'height'
-  const pos = position !== undefined ? position : defaultPosition
+  const pos =  position ?? defaultPosition
   return {
     order: pos,
     [sizeAttr]: '100%',
-    [marginAttr]: margin !== undefined && margin !== '' ? `${margin}%` : pos === 3 || separator === true ? 0 : '4%',
+    [marginAttr]: getMarginValue(margin, pos, separator)
   }
 }
 
@@ -37,39 +46,45 @@ export const parseParameters = (parameters: any) => {
 
   return {
     imageEnabled: parameters.imageEnabled,
-    imageStyle: Object.assign(
-      {
-        flexShrink: 0,
-        display: 'flex',
-        justifyContent: imageAlignment,
-        alignItems: imageAlignment,
-      },
-      parseElementStyles(parameters.imageMargin, parameters.imagePosition, 1, parameters)
-    ),
+    imageStyle: {
+      flexShrink: 0,
+      display: 'flex',
+      justifyContent: imageAlignment,
+      alignItems: imageAlignment,
+      ...parseElementStyles(parameters.imageMargin, parameters.imagePosition, 1, parameters)
+    },
     descriptionEnabled: parameters.descriptionEnabled,
     optionalEnabled: parameters.optionalEnabled,
-    textStyle: Object.assign(
-      { display: 'flex', flexDirection: 'column', justifyContent: textAlignment, flex: 1 },
-      parseElementStyles(parameters.textMargin, parameters.textPosition, 2, parameters)
-    ),
+    textStyle: {
+      display: 'flex', 
+      flexDirection: 'column', 
+      justifyContent: textAlignment, 
+      flex: 1,
+      ...parseElementStyles(parameters.textMargin, parameters.textPosition, 2, parameters)
+    },
     dateEnabled: parameters.dateEnabled,
-    dateStyle: Object.assign(
-      {
-        display: 'flex',
-        justifyContent: dateAlignment,
-        alignItems: dateAlignment,
-        flexShrink: 0,
-      },
-      parseElementStyles(parameters.dateMargin, parameters.datePosition, 3, parameters)
-    ),
+    dateStyle: {
+      display: 'flex',
+      justifyContent: dateAlignment,
+      alignItems: dateAlignment,
+      flexShrink: 0,
+      ...parseElementStyles(parameters.dateMargin, parameters.datePosition, 3, parameters)
+    },
   }
 }
 
 export const getPhotoUrl = (filename: string, parameters: VixonicParameters, downloadsPath: string) => {
-  const mode = parameters.photosMode
-  if (mode === 'zip' && parameters.photosZip && parameters.photosZip.filename !== undefined) {
+  const mode = parameters.photoMode
+  if (mode === 'zip' && parameters.photosZip?.filename !== undefined) {
     return downloadsPath + '/' + parameters.photosZip.filename.replace('.zip', '/') + filename
   } else {
     return filename
   }
 }
+
+const getMarginValue = (margin: string, pos: number, separator?: boolean): string | number => {
+  if (margin !== undefined && margin !== '') {
+    return `${margin}%`;
+  }
+  return pos === 3 || separator === true ? 0 : '4%';
+};

package/src/components/FontLoader/index.tsx

@@ -1,5 +1,3 @@
-import PropTypes from 'prop-types'
-
 interface Props {
   paths: Array<string>
   data: VixonicData
@@ -40,13 +38,3 @@ export const FontLoader = ({ paths, data }: Props) => {
     <style>{fonts}</style>
   )
 }
-
-FontLoader.defaultProps = {
-  paths: []
-}
-
-FontLoader.propTypes = {
-  paths: PropTypes.arrayOf(PropTypes.string).isRequired,
-  data: PropTypes.object.isRequired
-}
-

package/src/components/FormattedText/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { CSSProperties } from 'react'
 
 const alignments = {
   center: 'center',
@@ -15,7 +15,7 @@ interface Props {
   format?: any
   lineHeight?: number
   maxChar?: number
-  style?: number
+  style?: CSSProperties
   text: string
   unit?: string
   paddingBottom?: string
@@ -25,7 +25,7 @@ interface Props {
 export const FormattedText: React.FunctionComponent<Props> = ({ text, format, maxChar, lineHeight, style, unit, paddingBottom, paddingTop }) => {
   const trimText = (text: any, maxChar: any) => {
     const isValid = maxChar && maxChar >= 3
-    if (isValid && (text && text.length > maxChar) || false) {
+    if (isValid && (text && text.length > maxChar)) {
       const returnText = text.substring(0, maxChar - 3)
       returnText.substr(-1, 3)
       return `${returnText.trim()}...`
@@ -35,7 +35,7 @@ export const FormattedText: React.FunctionComponent<Props> = ({ text, format, ma
 
   const checkNested = (obj: any, path: string): boolean => {
     return path.split('.').every(segment => {
-      if (obj && obj.hasOwnProperty(segment)) {
+      if (obj?.hasOwnProperty(segment)) {
         obj = obj[segment]
         return true
       }
@@ -52,10 +52,11 @@ export const FormattedText: React.FunctionComponent<Props> = ({ text, format, ma
   }
 
   const renderText = maxChar ? trimText(text, maxChar) : text
-  const containerStyle = Object.assign({
+  const containerStyle = {
     display: 'inline-flex',
-    justifyContent: getHorizontalAlignment(format.alignment)
-  }, style)
+    justifyContent: getHorizontalAlignment(format.alignment),
+    ...style
+  }
 
   return (
     <div style={containerStyle}>

package/src/components/ItemsContainer/components/Item.tsx

@@ -16,9 +16,21 @@ interface Props {
   style: any
 }
 
+
+
 export const Item = ({ width, height, containerData, verticalGap, horizontalGap, children, style }: Props) => {
   const itemRef = useRef(null)
 
+  let topPosition = '0';
+  if (containerData.ic_rowIndex !== 0) {
+    topPosition = verticalGap ? `${verticalGap * containerData.ic_rowIndex}%` : '0';
+  }
+
+  let leftPadding = '0'
+  if (containerData.ic_columnIndex !== 0) {
+    leftPadding = horizontalGap ? `${horizontalGap}%` : '0';
+  }
+
   return (
     <div ref={itemRef}
       style={{
@@ -29,13 +41,9 @@ export const Item = ({ width, height, containerData, verticalGap, horizontalGap,
         justifyContent: aligments['center'],
         width: width,
         height: height,
-        top: containerData.ic_rowIndex === 0
-          ? '0'
-          : verticalGap ? `${verticalGap * containerData.ic_rowIndex}%` : '0',
-        paddingLeft: containerData.ic_columnIndex === 0
-          ? '0'
-          : horizontalGap ? `${horizontalGap}%` : '0'
-        , ...style
+        top: topPosition,
+        paddingLeft: leftPadding,
+        ...style
       }}
     >
       {React.cloneElement(children, containerData)}

package/src/components/ItemsContainer/components/animation.ts

@@ -75,10 +75,10 @@ export class AnimationController {
 
   configure(options: Partial<Options>) {
     this.mode = options.mode && animationModes.hasOwnProperty(options.mode) ? animationModes[options.mode] : animationModes.fade
-    this.duration = options.duration || 10000
-    this.speed = 1000 * (options.speed || 1)
-    this.stagger = this.speed / (options.stagger || 4)
-    this.reverse = options.reverse !== undefined ? options.reverse : true
+    this.duration = options.duration ?? 10000
+    this.speed = 1000 * (options.speed ?? 1)
+    this.stagger = this.speed / (options.stagger ?? 4)
+    this.reverse = options.reverse ?? true
   }
 
   getInitialStyle() {
@@ -96,31 +96,27 @@ export class AnimationController {
       autoplay: false,
     })
     animation.add(
-      Object.assign(
-        {
-          targets: els,
-          duration: this.speed,
-          delay: function (_el: any, i: any, _l: any) {
-            return i * self.stagger
-          },
+      {
+        targets: els,
+        duration: this.speed,
+        delay: function (_el: any, i: any, _l: any) {
+          return i * self.stagger
         },
-        this.mode.in
-      )
+        ...this.mode.in
+      }
     )
     animation.add(
-      Object.assign(
-        {
-          targets: els,
-          duration: this.speed,
-          delay: function (_el: any, _i: any, _l: any) {
-            return _i * self.stagger
-          },
-          complete: () => {
-            finished()
-          },
+      {
+        targets: els,
+        duration: this.speed,
+        delay: function (_el: any, _i: any, _l: any) {
+          return _i * self.stagger
         },
-        this.mode.out
-      ),
+        complete: () => {
+          finished()
+        },
+        ...this.mode.out
+      },
       `+=${offset}`
     )
     animation.play()

package/src/components/Render/index.tsx

@@ -21,11 +21,11 @@ export const Render = ({ start, appData, anniversaries }: Props) => {
     animationTime,
   } = parameters
 
-  const backgroundImageState = backgroundImage && backgroundImage.filename
+  const backgroundImageState = backgroundImage?.filename
     ? `url("${downloadsPath}/${backgroundImage.filename}")` : ''
 
   const anniversaryItems = anniversaries.map((anniversary: Anniversary) => {
-    return <AnniversaryItem style={'standard'} anniversary={anniversary} data={appData} />
+    return <AnniversaryItem style={'standard'} anniversary={anniversary} data={appData} key={anniversary?.name} />
   })
 
   return (

package/src/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html style="position: absolute; height:100%; width: 100%; overflow: hidden;">
+<html lang="es" xml:lang="es" style="position: absolute; height:100%; width: 100%; overflow: hidden;">
 <head>
 <title></title>
 <meta charset="utf-8">

package/src/parameters.d.ts

@@ -5,5 +5,5 @@ declare type VixonicData = {
 }
 
 declare type VixonicParameters = Partial<{
-  displayService: 'AnniversaryAppService' | 'RexmasAnniversarieService', documentService: { id: string }, rexmasService: { id: string }, photosZip: {id?: string, filename?: string, extension?: string}, updateTime: 600000 | 1800000 | 3600000 | 21600000 | 43200000 | 86400000 | 604800000, defaultMessage: string, defaultMessageFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, orientation: 'h' | 'v', animationMode: 'fade' | 'slideRight' | 'slideLeft', animationSpeed: 2 | 1.5 | 1, animationOrder: boolean, animationTime: number, containerColumns: number, containerColumnsGap: number, containerRows: number, containerRowsGap: number, backgroundImage: {id?: string, filename?: string, extension?: string}, padding: string, textPosition: 1 | 2 | 3, textAlignment: 'start' | 'center' | 'end', nameFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, nameMaxChar: number, textMargin: string, descriptionEnabled: boolean, descriptionFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, descriptionMaxChar: number, optionalEnabled: boolean, optionalFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, imageEnabled: boolean, imagePosition: 1 | 2 | 3, imageAlignment: 'start' | 'center' | 'end', imageStyle: 'normal' | 'rounded' | 'circle', imageMargin: string, imageSize: number, dateEnabled: boolean, datePosition: 1 | 2 | 3, dateAlignment: 'start' | 'center' | 'end', dateStyle: 'calendarFlat' | 'calendarText' | 'circle' | 'text' | 'outlines', dateDayFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, dateMonthFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, abbreviatedMonths: boolean, datePrimaryColor: string, dateMargin: string, separator: boolean, separatorWidth: number, separatorColor: string, itemMargins: string
+  displayService: 'AnniversaryAppService' | 'RexmasAnniversarieService', documentService: { id: string }, rexmasService: { id: string }, photoMode: 'zip' | 'online', photosZip: {id?: string, filename?: string, extension?: string}, updateTime: 600000 | 1800000 | 3600000 | 21600000 | 43200000 | 86400000 | 604800000, defaultMessage: string, defaultMessageFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, orientation: 'h' | 'v', animationMode: 'fade' | 'slideRight' | 'slideLeft', animationSpeed: 2 | 1.5 | 1, animationOrder: boolean, animationTime: number, containerColumns: number, containerColumnsGap: number, containerRows: number, containerRowsGap: number, backgroundImage: {id?: string, filename?: string, extension?: string}, padding: string, textPosition: 1 | 2 | 3, textAlignment: 'start' | 'center' | 'end', nameFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, nameMaxChar: number, textMargin: string, descriptionEnabled: boolean, descriptionFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, descriptionMaxChar: number, optionalEnabled: boolean, optionalFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, imageEnabled: boolean, imagePosition: 1 | 2 | 3, imageAlignment: 'start' | 'center' | 'end', imageStyle: 'normal' | 'rounded' | 'circle', imageMargin: string, imageSize: number, dateEnabled: boolean, datePosition: 1 | 2 | 3, dateAlignment: 'start' | 'center' | 'end', dateStyle: 'calendarFlat' | 'calendarText' | 'circle' | 'text' | 'outlines', dateDayFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, dateMonthFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, abbreviatedMonths: boolean, datePrimaryColor: string, dateMargin: string, separator: boolean, separatorWidth: number, separatorColor: string, itemMargins: string
 }>