pmds-hub 20.1.0

package/libs/pmds-cdk/src/lib/pmds-cdk-checkbox/pmds-cdk-checkbox.component.stories.ts

@@ -0,0 +1,224 @@
+////////Angular imports
+import {FormBuilder, FormGroupDirective, FormsModule, ReactiveFormsModule, Validators,} from '@angular/forms';
+import {CommonModule} from '@angular/common';
+////////Third party libraries
+import {moduleMetadata, StoryObj} from '@storybook/angular';
+////////Component imports
+import {PmdsCdkCheckboxComponent} from './pmds-cdk-checkbox.component';
+import {componentInfo} from './story-helpers/pmds-cdk-checkbox-component-info-story';
+import {literalsErrorFn} from './story-helpers/pmds-cdk-checkbox-component-const-story';
+
+export default {
+	title: 'Cdk/Forms, data input and selections/Checkbox',
+	component: PmdsCdkCheckboxComponent,
+	tags: ['autodocs'],
+	args: {
+		dataQA: 'storybook-qa-',
+		label: 'Label',
+		literalsErrorFn,
+	},
+	decorators: [
+		moduleMetadata({
+			imports: [
+				CommonModule,
+				FormsModule,
+				ReactiveFormsModule,
+				PmdsCdkCheckboxComponent,
+			],
+			providers: [FormGroupDirective],
+		}),
+	],
+	argTypes: {
+		dataQA: {
+			description: 'Reference for QA',
+			table: {
+				type: {summary: 'string'}
+			},
+			control: {
+				type: 'text',
+			},
+		},
+		label: {
+			description: 'Label for checkbox that can contain html',
+			table: {
+				type: {summary: 'string'},
+			},
+			control: {
+				type: 'text',
+			},
+		},
+		formControlName: {
+			description: 'String for control name',
+			table: {
+				type: {summary: 'string'},
+			},
+		},
+		literalsErrorFn: {
+			description: 'A callback function for error literals',
+			table: {
+				type: {
+					summary: `IPmdsCdkFormErrorMessage<unknown>: (name: string, error: string, value?: any, label?: string) => string;`,
+				},
+			},
+		},
+		skeleton: {
+            description: 'Show the skeleton section',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+            control: {
+                type: 'boolean',
+            },
+        },
+		isDisabled: {
+			description: 'Boolean for isDisabled the control',
+			control: {
+				type: 'boolean',
+			},
+			table: {
+				type: {summary: 'boolean'}
+			},
+		},
+		valueChanges: {
+			description: 'Emit value when it change',
+			table: {
+				category: 'Events',
+				type: {summary: 'EventEmitter<boolean>'},
+			}
+		}
+	},
+	parameters: {
+		docs: {
+			subtitle: 'PmdsCdkCheckboxComponent',
+			description: {
+				component: componentInfo,
+			},
+		},
+	},
+};
+
+export const WithLabel: StoryObj<PmdsCdkCheckboxComponent> = {};
+
+export const WithLabelLinked: StoryObj<PmdsCdkCheckboxComponent> = {
+	args: {
+		label: `<a class='text-color-action-main-default'> Option </a>`
+	}
+};
+
+export const WithoutLabel: StoryObj<PmdsCdkCheckboxComponent> = {
+	args: {
+		label: undefined,
+	},
+};
+
+export const WithFormRequiredTrue: StoryObj<PmdsCdkCheckboxComponent> = {
+	render: (args) => ({
+		props: {
+			...args,
+			literalsErrorFn,
+			exampleForm: new FormBuilder().group({
+				exampleControl: [false, [Validators.requiredTrue]],
+			}),
+		},
+		template: `
+        <form [formGroup]="exampleForm">
+          <pmds-cdk-checkbox
+						[dataQA]="dataQA"
+						[literalsErrorFn]="literalsErrorFn"
+            			[label]="label"
+            			formControlName="exampleControl"
+            />
+        </form>
+    `,
+	}),
+};
+
+export const allOptions: StoryObj<PmdsCdkCheckboxComponent> = {
+	render: (args) => {
+		return {
+			props: {
+				...args,
+				literalsErrorFn,
+				exampleForm: new FormBuilder().group({
+					trueControl: [true, Validators.requiredTrue],
+					falseControl: [false, Validators.requiredTrue],
+					indeterminateForm: [undefined, Validators.requiredTrue],
+				}),
+			},
+			template: `
+        <form [formGroup]="exampleForm" class="flex">
+          <pmds-cdk-checkbox
+						[dataQA]="dataQA"
+            label='True value'
+            formControlName="trueControl"
+						[literalsErrorFn]="literalsErrorFn"
+            [isDisabled]="isDisabled"/>
+            <pmds-cdk-checkbox
+						[dataQA]="dataQA"
+            class="ml-2"
+            label='False value'
+            formControlName="falseControl"
+						[literalsErrorFn]="literalsErrorFn"
+            [isDisabled]="isDisabled"/>
+            <pmds-cdk-checkbox
+						[dataQA]="dataQA"
+            class="ml-2"
+            label='Indeterminate value'
+            formControlName="indeterminateForm"
+						[literalsErrorFn]="literalsErrorFn"
+            [isDisabled]="isDisabled"/>
+        </form>
+    `,
+		};
+	},
+};
+
+export const AllOptionsDisabled: StoryObj<PmdsCdkCheckboxComponent> = {
+	args: {
+		isDisabled: true,
+	},
+	render: (args) => {
+		return {
+			props: {
+				...args,
+				literalsErrorFn,
+				exampleForm: new FormBuilder().group({
+					trueControl: [true, [Validators.requiredTrue]],
+					falseControl: [false, [Validators.requiredTrue]],
+					indeterminateForm: [undefined, [Validators.requiredTrue]],
+				}),
+			},
+			template: `
+        <form [formGroup]="exampleForm" class="flex">
+          <pmds-cdk-checkbox
+						[dataQA]="dataQA"
+            label='True value'
+            formControlName="trueControl"
+						[literalsErrorFn]="literalsErrorFn"
+            [isDisabled]="isDisabled"/>
+            <pmds-cdk-checkbox
+						[dataQA]="dataQA"
+            class="ml-2"
+            label='False value'
+            formControlName="falseControl"
+						[literalsErrorFn]="literalsErrorFn"
+            [isDisabled]="isDisabled"/>
+            <pmds-cdk-checkbox
+						[dataQA]="dataQA"
+            class="ml-2"
+            label='Indeterminate value'
+            formControlName="indeterminateForm"
+						[literalsErrorFn]="literalsErrorFn"
+            [isDisabled]="isDisabled"/>
+        </form>
+    `,
+		};
+	},
+};
+
+export const Skeleton: StoryObj<PmdsCdkCheckboxComponent> = {
+	args: {
+		skeleton: true,
+	},
+};

package/libs/pmds-cdk/src/lib/pmds-cdk-checkbox/pmds-cdk-checkbox.component.ts

@@ -0,0 +1,97 @@
+////////Angular imports
+import { NgClass } from '@angular/common';
+import { Component, EventEmitter, forwardRef, inject, Input, OnInit, Output } from '@angular/core';
+import {
+	AbstractControl, ControlValueAccessor, FormControl, FormGroupDirective, NG_VALUE_ACCESSOR
+} from '@angular/forms';
+////////PMDS libraries
+import { IPmdsCdkFormErrorMessage } from '../pmds-cdk-form-error-message/models/pmds-cdk-form-error-message.model';
+import { PmdsCdkFormErrorMessageComponent } from '../pmds-cdk-form-error-message/pmds-cdk-form-error-message.component';
+////////PNXT libraries
+import { tap } from 'rxjs';
+import {
+	PmdsCdkCheckboxSkeletonComponent
+} from './components/pmds-cdk-checkbox-skeleton/pmds-cdk-checkbox-skeleton.component';
+
+@Component({
+	standalone: true,
+	imports: [
+		NgClass,
+		PmdsCdkFormErrorMessageComponent,
+		PmdsCdkCheckboxSkeletonComponent
+	],
+	selector: 'pmds-cdk-checkbox',
+	templateUrl: './pmds-cdk-checkbox.component.html',
+	providers: [
+		{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => PmdsCdkCheckboxComponent),
+			multi: true
+		},
+	]
+})
+export class PmdsCdkCheckboxComponent implements OnInit, ControlValueAccessor {
+
+	@Input() formControlName!: string;
+	@Input() isDisabled!: boolean;
+	@Input() literalsErrorFn!: IPmdsCdkFormErrorMessage<unknown>;
+	@Input() skeleton!: boolean;
+	@Input() dataQA!: string;
+	@Input() label!: string;
+
+	@Output() valueChanges: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+	formControl!: AbstractControl;
+	showError = false;
+	value!: undefined | null | boolean;
+	componentSelector = 'pmds-cdk-checkbox-'
+
+	private formGroupDirective = inject(FormGroupDirective);
+
+	ngOnInit() {
+		this.formControl = (this.formGroupDirective as any)?.form?.get(
+			this.formControlName
+		) as FormControl;
+		this.formControl?.valueChanges
+			.pipe(
+				tap(() => {
+					if (this.formControl?.valid) {
+						this.showError = false;
+					} else {
+						this.showError = true;
+					}
+				}),
+			)
+			.subscribe();
+	}
+
+	onChange = (_: unknown) => {_};
+
+	onTouch = () => undefined;
+
+	toggleValue() {
+		this.onTouch();
+		if (!this.isDisabled) {
+			!this.value ? (this.value = true) : (this.value = false);
+			this.onChange(this.value);
+			this.valueChanges.emit(this.value);
+		}
+	}
+
+	writeValue(value: boolean) {
+		this.value = value;
+	}
+
+	registerOnChange(fn: (_: unknown) => void) {
+		this.onChange = fn;
+	}
+
+	registerOnTouched(fn: () => undefined) {
+		this.onTouch = fn;
+	}
+
+	setDisabledState(isDisabled: boolean): void {
+		this.isDisabled = this.isDisabled || isDisabled;
+	}
+}
+

package/libs/pmds-cdk/src/lib/pmds-cdk-checkbox/story-helpers/pmds-cdk-checkbox-component-const-story.ts

@@ -0,0 +1,7 @@
+export const literalsErrorFn = (name: string, error: string, value?: any, label?: string) => {
+	return (
+		{
+			required: `${label} is required true`
+		}[error] || 'wrong value'
+	);
+};

package/libs/pmds-cdk/src/lib/pmds-cdk-checkbox/story-helpers/pmds-cdk-checkbox-component-info-story.ts

@@ -0,0 +1,23 @@
+export const componentInfo = `
+
+Import: **@pmhub/pmds-cdk**
+
+~~~~
+import { PmdsCdkCheckboxComponent } from '../pmds-cdk-checkbox.component';
+~~~~
+
+Add to import array the **PmdsCdkCheckboxComponent** in your component
+
+~~~~
+imports: [
+	PmdsCdkCheckboxComponent
+]
+~~~~
+
+Selector: **pmds-cdk-checkbox**
+
+~~~~
+<pmds-cdk-checkbox>
+</pmds-cdk-checkbox>
+~~~~
+`

package/libs/pmds-cdk/src/lib/pmds-cdk-copy-clipboard/index.ts

@@ -0,0 +1,2 @@
+export * from './pmds-cdk-copy-clipboard.component';
+export * from './models/pmds-cdk-copy-clipboard-icon-position.model';

package/libs/pmds-cdk/src/lib/pmds-cdk-copy-clipboard/models/pmds-cdk-copy-clipboard-icon-position.model.ts

@@ -0,0 +1 @@
+export type TPmdsCdkCopyClipboardIconPosition = 'left' | 'right'

package/libs/pmds-cdk/src/lib/pmds-cdk-copy-clipboard/pmds-cdk-copy-clipboard.component.html

@@ -0,0 +1,17 @@
+<section class="w-fit">
+    <!-- BUTTON -->
+	<pmds-cdk-button
+		[dataQA]="dataQA + componentSelector"
+		[smallFit]="true"
+		buttonSize="small"
+		buttonType="tertiary"
+        buttonSizeMobile="small"
+		[ngClass]="{'[&>button>span]:text-color-text-success': showCopied}"
+		[label]="showCopied ? literalCopied || literal : literal"
+		[iconPosition]="iconPosition"
+		[icon]="showCopied ? 'pmicons-correct text-color-text-success' : 'pmicons-copy-document'"
+		[hideLabelMobile]="hideLabelMobile"
+		(click)="copyTextToClipboard($event)"
+	/>
+    <!-- END BUTTON -->
+</section>

package/libs/pmds-cdk/src/lib/pmds-cdk-copy-clipboard/pmds-cdk-copy-clipboard.component.spec.ts

@@ -0,0 +1,44 @@
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { PmdsCdkCopyClipboardComponent } from './pmds-cdk-copy-clipboard.component';
+import { Clipboard } from '@angular/cdk/clipboard';
+
+describe('PmdsCdkCopyClipboardComponent', () => {
+	let component: PmdsCdkCopyClipboardComponent;
+	let fixture: ComponentFixture<PmdsCdkCopyClipboardComponent>;
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [PmdsCdkCopyClipboardComponent],
+		}).compileComponents();
+
+		fixture = TestBed.createComponent(PmdsCdkCopyClipboardComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+
+	describe('copyTextToClipboard', () => {
+		it('should call copyTextToClipboard', () => {
+		  const service = fixture.debugElement.injector.get(Clipboard);
+		  const spy = jest.spyOn(service, 'copy');
+		  const mouseEvent = {
+			stopPropagation: () => {}
+		  } as MouseEvent;
+		  component.copyTextToClipboard(mouseEvent);
+	
+		  expect(spy).toHaveBeenCalled();
+		});
+	  });
+	
+	  describe('initCopiedTimer', () => {
+		it('should show "Copied!" message for 2 seconds', fakeAsync(() => {
+		  component['initCopiedTimer']();
+		  expect(component.showCopied).toBeTruthy();
+		  tick(2000);
+		  expect(component.showCopied).toBeFalsy();
+		}));
+	  });
+});

package/libs/pmds-cdk/src/lib/pmds-cdk-copy-clipboard/pmds-cdk-copy-clipboard.component.stories.ts

@@ -0,0 +1,121 @@
+////////Third party libraries
+import type { StoryObj } from '@storybook/angular';
+////////Component imports
+import { PmdsCdkCopyClipboardComponent } from './pmds-cdk-copy-clipboard.component';
+import { componentInfo } from './story-helpers/pmds-cdk-copy-clipboard-component-info-story';
+
+export default {
+	title: 'Cdk/Feedback & System status/Copy clipboard',
+	component: PmdsCdkCopyClipboardComponent,
+	tags: ['autodocs'],
+	args: {
+		dataQA: 'storybook-qa-',
+		iconPosition: 'right',
+		textToCopy: 'Copy text example',
+	},
+	argTypes: {
+		textToCopy: {
+			description: 'Literal for save in clipboard',
+			table: {
+				type: { summary: 'string' },
+			},
+			control: {
+				type: 'text',
+			},
+		},
+		literal: {
+			description: 'Literal for button',
+			table: {
+				type: { summary: 'string' },
+			},
+			control: {
+				type: 'text',
+			},
+		},
+		literalCopied: {
+			description: 'Literal for button when copy value',
+			table: {
+				type: { summary: 'string' },
+			},
+			control: {
+				type: 'text',
+			},
+		},
+		iconPosition: {
+			description: 'Position for icon',
+			table: {
+				type: { summary: 'TPmdsCdkCopyClipboardIconPosition: | right | left' },
+			},
+			defaultValue: {
+				summary: 'right',
+			},
+			options: ['left', 'right'],
+			control: {
+				type: 'radio',
+			},
+		},
+		dataQA: {
+			description: 'Reference for QA',
+			table: {
+				type: { summary: 'string' },
+			},
+			control: {
+				type: 'text',
+			},
+		},
+		hideLabelMobile: {
+			description: 'If label exist hide it in mobile',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+			control: {
+				type: 'boolean',
+			},
+		},
+		copyClick: {
+			description: 'Emit event when copy text',
+			table: {
+				category: 'Events',
+				type: { summary: 'EventEmitter<void>' },
+			},
+		},
+	},
+	parameters: {
+		docs: {
+			subtitle: 'PmdsCdkCopyClipboardComponent',
+			description: {
+				component: componentInfo,
+			},
+		},
+	},
+};
+
+export const CopyClickBoard: StoryObj<PmdsCdkCopyClipboardComponent> = {
+	args: {
+		literal: 'Literal',
+		literalCopied: 'Copied',
+		hideLabelMobile: false,
+	},
+};
+
+export const CopyClickBoardLeftIcon: StoryObj<PmdsCdkCopyClipboardComponent> =
+	{
+		args: {
+			literal: 'Literal',
+			literalCopied: 'Copied',
+			iconPosition: 'left',
+		},
+	};
+
+export const CopyClickBoardHideLabelMobile: StoryObj<PmdsCdkCopyClipboardComponent> =
+	{
+		args: {
+			literal: 'Literal',
+			literalCopied: 'Copied',
+			hideLabelMobile: true,
+		},
+	};
+
+export const CopyClickBoardWithoutLabel: StoryObj<PmdsCdkCopyClipboardComponent> =
+	{};

package/libs/pmds-cdk/src/lib/pmds-cdk-copy-clipboard/pmds-cdk-copy-clipboard.component.ts

@@ -0,0 +1,46 @@
+////////Angular imports
+import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { Clipboard } from '@angular/cdk/clipboard';
+////////PNXT libraries
+import { PmdsCdkButtonComponent } from '../pmds-cdk-button/pmds-cdk-button.component';
+////////PNXT libraries
+import { TPmdsCdkCopyClipboardIconPosition } from './models/pmds-cdk-copy-clipboard-icon-position.model';
+
+@Component({
+	selector: 'pmds-cdk-copy-clipboard',
+	standalone: true,
+	imports: [PmdsCdkButtonComponent, NgClass],
+	templateUrl: './pmds-cdk-copy-clipboard.component.html',
+})
+export class PmdsCdkCopyClipboardComponent {
+	@Input() textToCopy!: string;
+	@Input() dataQA!: string;
+	@Input() hideLabelMobile!: boolean;
+	@Input() literal!: string;
+	@Input() literalCopied!: string;
+	@Input() iconPosition: TPmdsCdkCopyClipboardIconPosition = 'right';
+
+	@Output() copyClick: EventEmitter<void> = new EventEmitter<void>();
+
+    componentSelector = 'pmds-cdk-copy-clipboard-';
+	showCopied = false;
+
+	private clipboard = inject(Clipboard);
+
+	copyTextToClipboard(event: MouseEvent) {
+		event.stopPropagation();
+		if (!this.showCopied) {
+			this.initCopiedTimer();
+			this.clipboard.copy(this.textToCopy);
+			this.copyClick.emit()
+		}
+	}
+
+	private initCopiedTimer() {
+		this.showCopied = true;
+		setTimeout(() => {
+			this.showCopied = false;
+		}, 3000);
+	}
+}

package/libs/pmds-cdk/src/lib/pmds-cdk-copy-clipboard/story-helpers/pmds-cdk-copy-clipboard-component-info-story.ts

@@ -0,0 +1,23 @@
+export const componentInfo = `
+
+Import: **@pmhub/pmds-cdk**
+
+~~~~
+import { PmdsCdkCopyClipboardComponent } from '../pmds-cdk-copy-clipboard.component';
+~~~~
+
+Add to import array the **PmdsCdkCopyClipboardComponent** in your component
+
+~~~~
+imports: [
+	PmdsCdkCopyClipboardComponent
+]
+~~~~
+
+Selector: **pmds-cdk-copy-clipboard**
+
+~~~~
+<pmds-cdk-copy-clipboard>
+</pmds-cdk-copy-clipboard>
+~~~~
+`

package/libs/pmds-cdk/src/lib/pmds-cdk-country-label/components/pmds-cdk-country-label-skeleton/pmds-cdk-country-label-skeleton.component.html

@@ -0,0 +1,7 @@
+<!-- SKELETON -->
+<section
+	[attr.data-qa-id]="dataQA + 'skeleton'" class="flex gap-2 items-center">
+		<pmds-cdk-skeleton [style]="size === 'small' ? 'size-4 !rounded-full' : 'size-6 !rounded-full'" />
+		<pmds-cdk-skeleton [style]="size === 'small' ? 'w-[72px] h-3' : 'w-[88px] h-4'" />
+</section>
+<!-- SKELETON -->

package/libs/pmds-cdk/src/lib/pmds-cdk-country-label/components/pmds-cdk-country-label-skeleton/pmds-cdk-country-label-skeleton.component.ts

@@ -0,0 +1,17 @@
+////////Angular imports
+import { Component, Input } from '@angular/core';
+////////PPMDS libraries
+import { PmdsCdkSkeletonComponent } from '../../../pmds-cdk-skeleton/pmds-cdk-skeleton.component';
+////////Component imports
+import { TPmdsCdkCountryLabelSize } from '../../models/pmds-cdk-copy-country-label-size.model';
+
+@Component({
+    selector: 'pmds-cdk-country-label-skeleton',
+    standalone: true,
+    imports: [PmdsCdkSkeletonComponent],
+    templateUrl: './pmds-cdk-country-label-skeleton.component.html',
+})
+export class PmdsCdkCountryLabelSkeletonComponent {
+    @Input() dataQA!: string;
+	@Input() size: TPmdsCdkCountryLabelSize = 'small';
+}

package/libs/pmds-cdk/src/lib/pmds-cdk-country-label/index.ts

@@ -0,0 +1,2 @@
+export * from './pmds-cdk-country-label.component';
+export * from './models/pmds-cdk-copy-country-label-size.model'

package/libs/pmds-cdk/src/lib/pmds-cdk-country-label/models/pmds-cdk-copy-country-label-size.model.ts

@@ -0,0 +1 @@
+export type TPmdsCdkCountryLabelSize = 'small' | 'large'

package/libs/pmds-cdk/src/lib/pmds-cdk-country-label/pmds-cdk-country-label.component.html

@@ -0,0 +1,37 @@
+@if (skeleton) {
+	<pmds-cdk-country-label-skeleton [size]="size" [dataQA]="dataQA + componentSelector"/>
+} @else {
+	<section
+		class="flex items-center mobile:font-body-s-bold text-color-text-primary"
+		[ngClass]="{
+			'font-body-s-bold': size === 'small',
+			'font-body-m-bold': size === 'large'
+		}"
+	>
+		<!-- FLAG -->
+		<img
+			class="mobile:h-6"
+			[ngClass]="{
+				'h-6': size === 'small',
+				'h-8': size === 'large'
+			}"
+			[src]="src"
+			[alt]="'flag ' + codeCountry"
+			[attr.data-qa-id]="dataQA + componentSelector + 'flag'"
+			(error)="updateUrl()"
+		/>
+		<!-- END FLAG -->
+		<!-- LABEL -->
+		@if (showLabel) {
+			<span [ngClass]="{
+				'ml-1': size === 'small',
+				'ml-2': size === 'large'
+			}"
+				  [attr.data-qa-id]="dataQA + componentSelector + 'label'"
+				  class="mobile:ml-1"
+			>{{ label }}</span
+			>
+		}
+		<!-- END LABEL -->
+	</section>
+}