pmds-hub 20.1.0

package/libs/pmds-common/src/lib/pipes/pmds-pipe-account-format/pmds-pipe-account-format.pipe.spec.ts

@@ -0,0 +1,18 @@
+import { PmdsAccountFormatPipe } from './pmds-pipe-account-format.pipe';
+
+describe('PmdsAccountFormatPipe', () => {
+    it('create an instance', () => {
+        const pipe = new PmdsAccountFormatPipe();
+        expect(pipe).toBeTruthy();
+    });
+
+    it('transform correctly', () => {
+        const pipe = new PmdsAccountFormatPipe();
+        expect(pipe.transform('ES121234123412341234')).toBe('ES12 1234 1234 12 341234')
+    });
+
+    it('transform correctly without value', () => {
+        const pipe = new PmdsAccountFormatPipe();
+        expect(pipe.transform('')).toBe('-')
+    });
+});

package/libs/pmds-common/src/lib/pipes/pmds-pipe-account-format/pmds-pipe-account-format.pipe.stories.ts

@@ -0,0 +1,43 @@
+////////Third party libraries
+import { moduleMetadata, StoryObj } from '@storybook/angular';
+////////Component imports
+import { PmdsPipeAccountFormat } from './pmds-pipe-account-format.pipe';
+import { componentInfo } from "./story-helpers/pmds-pipe-account-format-component-info-story";
+
+export default {
+  title: 'Common/Pipes/Account format',
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+        imports: [PmdsPipeAccountFormat],
+    }),
+],
+  argTypes: {
+    value: {
+      description: 'Value to transform',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      subtitle: 'PmdsPipeAccountFormat',
+      description: {
+        component: componentInfo,
+      },
+    },
+  },
+};
+
+export const Docs: StoryObj<{value: string}> = {
+  args: {
+   value: 'ES9121000418450200051332'
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <div>{{ value | pmdsAccountFormat }}</div>
+    `,
+  }),
+};

package/libs/pmds-common/src/lib/pipes/pmds-pipe-account-format/pmds-pipe-account-format.pipe.ts

@@ -0,0 +1,14 @@
+////////Angular imports
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'pmdsAccountFormat',
+    standalone: true
+})
+export class PmdsPipeAccountFormat implements PipeTransform {
+    transform(value: string): string {
+        return value ?
+			`${value.substring(0, 4)} ${value.substring(4, 8)} ${value.substring(8, 12)} ${value.substring(12, 16)} ${value.substring(16, 20)} ${value.substring(20, (value.length))}`
+            : '-';
+    }
+}

package/libs/pmds-common/src/lib/pipes/pmds-pipe-account-format/story-helpers/pmds-pipe-account-format-component-info-story.ts

@@ -0,0 +1,19 @@
+export const componentInfo = `
+
+Import: **PmdsPipeAccountFormat** from **@pmhub/pmds-common**
+
+~~~~
+import {
+	PmdsPipeAccountFormat
+} from '@pmhub/pmds-common';
+~~~~
+
+Add to import array the **PmdsPipeAccountFormat** in your component
+
+~~~~
+imports: [
+	PmdsPipeAccountFormat
+]
+~~~~
+
+Use this pipe to format a IBAN in XXXX XXXX XXXX XXXX XXXX:`

package/libs/pmds-common/src/lib/pipes/pmds-pipe-account-hidden/index.ts

@@ -0,0 +1 @@
+export * from './pmds-pipe-account-hidden.pipe';

package/libs/pmds-common/src/lib/pipes/pmds-pipe-account-hidden/pmds-pipe-account-hidden.pipe.stories.ts

@@ -0,0 +1,55 @@
+////////Third party libraries
+import { moduleMetadata, StoryObj } from '@storybook/angular';
+////////Component imports
+import { PmdsPipeAccountHidden } from './pmds-pipe-account-hidden.pipe';
+import { componentInfo } from "./story-helpers/pmds-pipe-account-hidden-component-info-story";
+
+export default {
+  title: 'Common/Pipes/Account hidden',
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [PmdsPipeAccountHidden],
+    }),
+  ],
+  argTypes: {
+    value: {
+      description: 'Value to transform',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      subtitle: 'PmdsPipeAccountHidden',
+      description: {
+        component: componentInfo,
+      },
+    },
+  },
+};
+
+export const More8Length: StoryObj<{ value: string }> = {
+  args: {
+    value: 'ES123456781234567890',
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <div>{{ value | pmdsAccountHidden }}</div>
+    `,
+  }),
+};
+
+export const With8Length: StoryObj<{ value: string }> = {
+  args: {
+    value: 'ES123456',
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <div>{{ value | pmdsAccountHidden }}</div>
+    `,
+  }),
+};

package/libs/pmds-common/src/lib/pipes/pmds-pipe-account-hidden/pmds-pipe-account-hidden.pipe.ts

@@ -0,0 +1,19 @@
+////////Angular imports
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'pmdsAccountHidden',
+  standalone: true,
+})
+export class PmdsPipeAccountHidden implements PipeTransform {
+  transform(value: string): string {
+    if (value?.length <= 8) {
+		if (value?.length > 4) {
+			return value.substring(0, 4) + '****';
+		}
+      return value;
+    } else {
+      return value ? `${value.substring(0, 4)} **** ${value.substring(value.length-4, value.length)}` : '-';
+    }
+  }
+}

package/libs/pmds-common/src/lib/pipes/pmds-pipe-account-hidden/story-helpers/pmds-pipe-account-hidden-component-info-story.ts

@@ -0,0 +1,20 @@
+export const componentInfo = `
+
+
+Import: **PmdsPipeAccountHidden** from **@pmhub/pmds-common**
+
+~~~~
+import {
+	PmdsPipeAccountHidden
+} from '@pmhub/pmds-common';
+~~~~
+
+Add to import array the **PmdsPipeAccountHidden** in your component
+
+~~~~
+imports: [
+	PmdsPipeAccountHidden
+]
+~~~~
+
+Use this pipe to show only the 4th first and 4th last numbers:`

package/libs/pmds-common/src/lib/pipes/pmds-pipe-amount-format/index.ts

@@ -0,0 +1 @@
+export * from './pmds-pipe-amount-format.pipe';

package/libs/pmds-common/src/lib/pipes/pmds-pipe-amount-format/pmds-pipe-amount-format.pipe.stories.ts

@@ -0,0 +1,149 @@
+////////Angular imports
+import {registerLocaleData} from '@angular/common';
+import localeEs from '@angular/common/locales/es';
+import localeEn from '@angular/common/locales/en';
+////////Third party libraries
+import {moduleMetadata, StoryObj} from '@storybook/angular';
+////////Component imports
+import {PmdsPipeAmountFormat} from './pmds-pipe-amount-format.pipe';
+import {componentInfo} from "./story-helpers/pmds-pipe-amount-format-component-info-story";
+
+export default {
+	title: 'Common/Pipes/Amount format',
+	tags: ['autodocs'],
+	decorators: [
+		moduleMetadata({
+			imports: [PmdsPipeAmountFormat],
+		}),
+	],
+	argTypes: {
+		value: {
+			description: 'Value to transform',
+			table: {
+				type: { summary: 'string'},
+			},
+			control: {
+				type: 'text',
+			},
+		},
+		showDecimals: {
+			description: 'Boolean for show decimals',
+			table: {
+				type: { summary: 'boolean'}
+			},
+			control: {
+				type: 'boolean',
+			},
+		},
+		locale: {
+			description: 'Locale to parse number',
+			table: {
+				type: { summary: 'string'},
+				defaultValue: { summary: 'es-ES'}
+			},
+			options: ['es-ES', 'en-EN'],
+			control: {
+				type: 'radio',
+			},
+		},
+		numberDecimals: {
+			description: 'Number decimal to show',
+			table: {
+				type: { summary: 'number'},
+				defaultValue: { summary: '2'}
+			},
+			control: {
+				type: 'number',
+			},
+		},
+		numberFormat: {
+			description: 'String with the number format define for user, this value rewrite the locale option',
+			table: {
+				type: { summary: 'string'},
+			},
+			options: ['###,###.##', '###.###,##'],
+			control: {
+				type: 'radio',
+			},
+		},
+		currency: {
+			description: 'String with the currency code to format the amount',
+			table: {
+				type: { summary: 'string'},
+			},
+			control: {
+				type: 'text',
+			},
+		},
+	},
+	parameters: {
+		docs: {
+			subtitle: 'PmdsPipeAmountFormat',
+			description: {
+				component: componentInfo,
+			},
+		},
+	},
+};
+
+export const twoDecimals: StoryObj<{ value: string, showDecimals: boolean, locale: string, numberDecimals: number, numberFormat:string, currency:string }> = {
+	args: {
+		value: '12345.67',
+		showDecimals: true,
+		locale: 'ES-es',
+		numberDecimals: 2,
+		numberFormat: '',
+		currency: '',
+	},
+	render: (args) => {
+		registerLocaleData(localeEs, 'es-ES');
+		registerLocaleData(localeEn, 'en-EN');
+		return {
+			props: args,
+			template: `
+      <div>{{ value | pmdsAmountFormat:showDecimals:locale:numberDecimals:numberFormat:currency }}</div>
+    `,
+		}
+	},
+};
+
+export const byCurrencyJPY: StoryObj<{ value: string, showDecimals: boolean, locale: string, numberDecimals: number, numberFormat:string, currency:string }> = {
+	args: {
+		value: '1101.67',
+		showDecimals: true,
+		locale: 'en_US',
+		numberDecimals: 2,
+		numberFormat: '###.###,##',
+		currency: 'JPY',
+	},
+	render: (args) => {
+		registerLocaleData(localeEs, 'es-ES');
+		registerLocaleData(localeEn, 'en-EN');
+		return {
+			props: args,
+			template: `
+      <div>{{ value | pmdsAmountFormat:showDecimals:locale:numberDecimals:numberFormat:currency }}</div>
+    `,
+		}
+	},
+};
+
+export const byCurrencyHUF: StoryObj<{ value: string, showDecimals: boolean, locale: string, numberDecimals: number, numberFormat:string, currency:string }> = {
+	args: {
+		value: '12345.67',
+		showDecimals: true,
+		locale: 'es-ES',
+		numberDecimals: 2,
+		numberFormat: '',
+		currency: 'HUF',
+	},
+	render: (args) => {
+		registerLocaleData(localeEs, 'es-ES');
+		registerLocaleData(localeEn, 'en-EN');
+		return {
+			props: args,
+			template: `
+      <div>{{ value | pmdsAmountFormat:showDecimals:locale:numberDecimals:numberFormat:currency }}</div>
+    `,
+		}},
+};

package/libs/pmds-common/src/lib/pipes/pmds-pipe-amount-format/pmds-pipe-amount-format.pipe.ts

@@ -0,0 +1,64 @@
+////////Angular imports
+import { Pipe, PipeTransform } from '@angular/core';
+import { formatNumber } from '@angular/common';
+
+@Pipe({
+	name: 'pmdsAmountFormat',
+	standalone: true,
+})
+export class PmdsPipeAmountFormat implements PipeTransform {
+	transform(
+		value: string | number | undefined,
+		showDecimals = true,
+		locale = 'es-ES',
+		numberDecimals = 2,
+		numberFormat?: string,
+		currency?: string
+	): string {
+		if (numberFormat) {
+			locale =
+				numberFormat?.indexOf('.') > numberFormat?.indexOf(',')
+					? 'en-en'
+					: 'es-es';
+		}
+		if (value !== undefined && value !== null && !Number.isNaN(value)) {
+			if (currency) {
+				return this.getFormattedValueByCurrency(
+					currency === 'HUF' ? 'JPY' : currency,
+					locale,
+					value
+				);
+			} else {
+				return formatNumber(
+					+value,
+					locale,
+					showDecimals
+						? `1.${numberDecimals}-${numberDecimals}`
+						: '1.0-0'
+				);
+			}
+		} else {
+			return '-';
+		}
+	}
+
+	private getFormattedValueByCurrency(
+		currency: string,
+		locale: string,
+		value: string | number
+	): string {
+		const formattedValue = new Intl.NumberFormat(locale, {
+			style: 'currency',
+			currency: currency,
+			useGrouping: true,
+		})
+			.format(+value)
+			.split(/ /)[0]
+			.replace(/[^\d.,]/g, '');
+		const formattedResult =
+			value.toString().indexOf('-') === -1
+				? formattedValue
+				: '-' + formattedValue;
+		return formattedResult;
+	}
+}

package/libs/pmds-common/src/lib/pipes/pmds-pipe-amount-format/story-helpers/pmds-pipe-amount-format-component-info-story.ts

@@ -0,0 +1,33 @@
+export const componentInfo = `
+
+
+Import: **PmdsPipeAmountFormat** from **@pmhub/pmds-common**
+
+~~~~
+import {
+	PmdsPipeAmountFormat
+} from '@pmhub/pmds-common';
+~~~~
+
+Add to import array the **PmdsPipeAmountFormat** in your component
+
+~~~~
+imports: [
+	PmdsPipeAmountFormat
+]
+~~~~
+
+Use this pipe to format amount with locale
+
+**IMPORTANT** is necessary registerLocaleData
+
+~~~~
+import { registerLocaleData } from '@angular/common'
+import localeEs from '@angular/common/locales/es'
+import localeEn from '@angular/common/locales/en'
+
+...
+
+registerLocaleData(localeEs, 'es-ES')
+registerLocaleData(localeEn, 'en-EN')
+~~~~`

package/libs/pmds-common/src/lib/pipes/pmds-pipe-camelcase-to-snakecase-uppercase/index.ts

@@ -0,0 +1 @@
+export * from './pmds-pipe-camelcase-to-snakecase-uppercase.pipe';

package/libs/pmds-common/src/lib/pipes/pmds-pipe-camelcase-to-snakecase-uppercase/pmds-pipe-camelcase-to-snakecase-uppercase.pipe.stories.ts

@@ -0,0 +1,43 @@
+////////Third party libraries
+import { moduleMetadata, StoryObj } from '@storybook/angular';
+////////Component imports
+import { PmdsPipeCamelcaseToSnakecaseUppercase } from './pmds-pipe-camelcase-to-snakecase-uppercase.pipe';
+import { componentInfo } from "./story-helpers/pmds-pipe-camelcase-to-snakecase-uppercase-component-info-story";
+
+export default {
+  title: 'Common/Pipes/Camelcase to uppersnakecase',
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [PmdsPipeCamelcaseToSnakecaseUppercase],
+    }),
+  ],
+  argTypes: {
+    value: {
+      description: 'Value to transform',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      subtitle: 'PmdsPipeCamelcaseToSnakecaseUppercase',
+      description: {
+        component: componentInfo,
+      },
+    },
+  },
+};
+
+export const Docs: StoryObj<{ value: string }> = {
+  args: {
+    value: 'exampleCase',
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <div>{{ value | pmdsCamelcaseToSnakecaseUppercase }}</div>
+    `,
+  }),
+};

package/libs/pmds-common/src/lib/pipes/pmds-pipe-camelcase-to-snakecase-uppercase/pmds-pipe-camelcase-to-snakecase-uppercase.pipe.ts

@@ -0,0 +1,12 @@
+////////Angular imports
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'pmdsCamelcaseToSnakecaseUppercase',
+  standalone: true,
+})
+export class PmdsPipeCamelcaseToSnakecaseUppercase implements PipeTransform {
+    transform(value: string): string  {
+        return value.replace(/[A-Z]/g, (letter: string) => `_${letter}`).toUpperCase();
+    }
+}

package/libs/pmds-common/src/lib/pipes/pmds-pipe-camelcase-to-snakecase-uppercase/story-helpers/pmds-pipe-camelcase-to-snakecase-uppercase-component-info-story.ts

@@ -0,0 +1,19 @@
+export const componentInfo = `
+
+Import: **PmdsPipeCamelcaseToSnakecaseUppercase** from **@pmhub/pmds-common**
+
+~~~~
+import {
+	PmdsPipeCamelcaseToSnakecaseUppercase
+} from '@pmhub/pmds-common';
+~~~~
+
+Add to import array the **PmdsPipeCamelcaseToSnakecaseUppercase** in your component
+
+~~~~
+imports: [
+	PmdsPipeCamelcaseToSnakecaseUppercase
+]
+~~~~
+
+Use this pipe to transform a literal in camelCase to SNAKE-CASE in uppercase:`

package/libs/pmds-common/src/lib/pipes/pmds-pipe-date-time/index.ts

@@ -0,0 +1 @@
+export * from './pmds-pipe-date-time.pipe';

package/libs/pmds-common/src/lib/pipes/pmds-pipe-date-time/pmds-pipe-date-time.pipe.stories.ts

@@ -0,0 +1,81 @@
+////////Angular imports
+import { DatePipe } from '@angular/common';
+////////Third party libraries
+import { moduleMetadata, StoryObj } from '@storybook/angular';
+////////Component imports
+import { PmdsPipeDateTime } from './pmds-pipe-date-time.pipe';
+import { componentInfo } from "./story-helpers/pmds-pipe-date-time-component-info-story";
+import { timezones } from "./story-helpers/pmds-pipe-date-time-component-const-story";
+
+export default {
+  title: 'Common/Pipes/Date time',
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [PmdsPipeDateTime],
+      providers: [DatePipe],
+    }),
+  ],
+  argTypes: {
+    value: {
+      description: 'Value to transform',
+      options: ['2023-01-01T00:00:00', '2023-01-01T23:00:00', '2023-01-01T01:00:00'],
+      control: {
+        type: 'select',
+      },
+    },
+    dateFormat: {
+      description: 'Date format to parse',
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: { summary: 'dd/MM/yyyy' },
+      },
+    },
+    timeFormat: {
+      description: 'Time format to parse',
+      control: {
+        type: 'text',
+      },
+    },
+    timezone: {
+      description: 'Time zone to parse',
+      options: timezones,
+      control: {
+        type: 'select',
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      subtitle: 'PmdsPipeDateTime',
+      description: {
+        component: componentInfo,
+      },
+    },
+  },
+};
+
+export const Docs: StoryObj<{
+  value: string;
+  dateFormat: string;
+  timeFormat: string;
+  timezone: string;
+}> = {
+  parameters: {
+    sidebar: { disable: true },
+  },
+  args: {
+    value: '2023-01-01T00:00:00',
+    dateFormat: 'dd/MM/yyyy',
+    timeFormat: '',
+    timezone: 'Atlantic/Azores',
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <div>{{ value | pmdsDateTime:dateFormat:timeFormat:timezone }}</div>
+    `,
+  }),
+};

package/libs/pmds-common/src/lib/pipes/pmds-pipe-date-time/pmds-pipe-date-time.pipe.ts

@@ -0,0 +1,44 @@
+////////Angular imports
+import { DatePipe } from '@angular/common';
+import { inject, Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'pmdsDateTime',
+  standalone: true,
+})
+export class PmdsPipeDateTime implements PipeTransform {
+  private datePipe = inject(DatePipe);
+  transform(
+    value: number | string | undefined | null,
+    dateFormat: string = 'dd/MM/yyyy',
+    timeFormat: string = '',
+    timezone?: string
+  ): string | null {
+    if (value) {
+      let timezoneDate: string | undefined;
+      const valueParse = new Date(value +'+0000').getDate() ? value + '+0000' : value;
+
+      switch (timezone) {
+        case 'GMC': {
+          timezoneDate = new Date(valueParse).toLocaleString('en', {
+            timeZone: 'UTC',
+          });
+          break;
+        }
+        default: {
+          timezoneDate = new Date(valueParse).toLocaleString('en', {
+            timeZone: timezone ? timezone : 'Europe/Madrid',
+          });
+          break;
+        }
+      }
+      return this.datePipe.transform(
+        timezoneDate,
+        `${dateFormat}${!!timeFormat && !!dateFormat ? ', ' : ''}${timeFormat}`,
+        timezone
+      );
+    } else {
+      return '';
+    }
+  }
+}